title: Yup validation on Select field (dropdown) react-hook-form not working
body: <p>iam new in ReactJs, so iam working with react-hook-form and Yup schema validation, and i need to validate my &quot;Select field&quot;, and i need to do something when my &quot;Select field&quot; onChange. But the schema validation is not working. For example: when the submit button cliked and the value on &quot;Select field&quot; is null/empty the error message is appear, but when the select field value change to not null/ not empty value, the error message is not disapear, and error message still exit. My goal is when the value &quot;Select field&quot; is not null the error message is disapear. Anyone know how to fix this? Thanks in advance and sorry for my broken english. Below is my code and link in codesandbox.
  <a href="https://codesandbox.io/s/react-hook-form-v7-validationschema-forked-e70iq?file=/src/index.js:0-1187" rel="noreferrer">Codesandbox</a></p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  import { yupResolver } from &quot;@hookform/resolvers/yup&quot;;
  import * as yup from &quot;yup&quot;;
  
  import &quot;./styles.css&quot;;
  
  const SignupSchema = yup.object().shape({
    select: yup.string().required()
  });
  
  function App() {
    const {
      register,
      handleSubmit,
      formState: { errors }
    } = useForm({
      mode: &quot;onChange&quot;,
      resolver: yupResolver(SignupSchema)
    });
    const onSubmit = (data) =&gt; {
      alert(JSON.stringify(data));
    };
  
    const doSomething = (value) =&gt; {
      // do something with my select value onChange
    };
  
    return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;div&gt;
          &lt;label&gt;Select&lt;/label&gt;
          &lt;select
            {...register(&quot;select&quot;)}
            onChange={(e) =&gt; doSomething(e.target.value)}
          &gt;
            &lt;option value=&quot;&quot;&gt;Null&lt;/option&gt;
            &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
            &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
          &lt;/select&gt;
          {errors.select &amp;&amp; &lt;p&gt;{errors.select.message}&lt;/p&gt;}
        &lt;/div&gt;
        &lt;input type=&quot;submit&quot; /&gt;
      &lt;/form&gt;
    );
  }
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;App /&gt;, rootElement);
  
  </code></pre>