I want to use not controlled TextField with default value.
Then let user edit and check input on each entered character.
If validation fails I’m trying to set error flag but useState rerenders whole component that causes reset user’s input to default value

 import { TextField } from '@mui/material';

  const emailAddressInputRef = useRef();
  const [emailError, setEmailError] = useState(false);


  const checkEmail = emailToCheck => {
    if (emailHasError(emailToCheck.trim())) {
      setEmailError(true);
    } else  {
      setEmailError(false);
    }
  };

           

 <TextField
     autoFocus
     label="Email address"
     variant="outlined"
     fullWidth
     error={emailError === true}
     inputRef={emailAddressInputRef}
     defaultValue='[email protected]'
     onKeyUp={e => checkEmail(e.target.value)}
     onBlur={e => checkEmail(e.target.value)}
 />