react functional component (validate with refs)

refs-validate.js

import React, { createRef, useEffect, useState } from 'react';
import { TextField } from '@material-ui/core';

function App() {
  const [value, setValue] = useState('');
  const handleChange = event => {
    setValue(event.target.value);
  };
  return (
    <div>
      <MyTextField value={value}
        handleChange={handleChange} />
    </div>
  );
}

function MyTextField({value, handleChange, ...props}) {
  const ref = createRef();
  const [qty, setQty] = useState(0);
  useEffect(() => {
    setQty(ref.current.value.length);
  }, [value]);
  return (
    <div>
      <TextField inputRef={ref}
        value={value} {...props}
        onChange={handleChange} />
      {qty > 5 && <div>Error</div>}
    </div>
  );
}

export default App;