title: Yup and react hook form input validation bug
body: <p>I have a problem in the input validation. The validation works when I submit and a error message appears, but when I press the first key on the keyboard nothing appears in the textarea and the error message disappears; after that, I can write normally. Its an inconvenience and I don't know why its happening. I am using the TextArea from Material UI. The code snippet of a login form is below.</p>
  <pre><code>
  const schema = yup.object().shape({
    username: yup.string().matches(/^[a-z0-9]+$/, 'Must be all lower-case letters.').required(),
    password: yup.string().required(),
  })
  
  const Login = props =&gt;  {
    const [formValues, setFormValues] = React.useState({
      username: &quot;&quot;,
      password: &quot;&quot;
    });
  
    const { register,errors, handleSubmit } = useForm({
      resolver: yupResolver(schema),
      mode: 'onSubmit',
    });
  
  
    const onSubmit = async (data, e) =&gt; {
      e.preventDefault()
      const isValid = await schema.isValid(data)
      if(isValid){
        console.log(data);
      }
    }
  
    return (
      &lt;Container component=&quot;main&quot; maxWidth=&quot;xs&quot;&gt;
        &lt;div&gt;
          &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
            &lt;TextField
              autoFocus
              required
              fullWidth
              id=&quot;username&quot;
              label=&quot;Username&quot;
              name=&quot;username&quot;
              value={formValues.username}     
              inputRef={register}         
              helperText = {errors.username?.message}
            /&gt;
            &lt;TextField
              required
              fullWidth
              name=&quot;password&quot;
              label=&quot;Password&quot;
              type=&quot;password&quot;
              id=&quot;password&quot;
              value={formValues.password}
              inputRef={register}
              helperText = {errors.password?.message}
            /&gt;
            &lt;Button
              type=&quot;submit&quot;
              fullWidth
              className={classes.submit}
            &gt;
              Login
            &lt;/Button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>