title: React-hook-form doesn't change the form validity when React-Select is changed
body: <p>I have a react-hook-form with a react-select:</p>
  <ul>
  <li>When I change the value of react-select, the form becomes both dirty and valid.</li>
  <li>The submit button is now enabled and the form can be sent.</li>
  <li>Once the form is sent, <code>useForm</code> defaultValue's are reset to the new values</li>
  <li>The submit button is disabled again, waiting for a change in the form.</li>
  <li>When I change again react-select value, the form is not dirty. The button remains disabled. Yet, the react-select value has changed.</li>
  </ul>
  <p>I have tried almost everything: replace <code>onChange</code> by <code>setValue(&quot;name&quot;, value, {shouldDirty: true}</code>, etc.</p>
  <p>Here is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useForm, Controller } from "react-hook-form";
  import Select from "react-select";
  
  const options = [
    { value: "joe", label: "Joe" },
    { value: "jack", label: "Jack" },
    { value: "averell", label: "Averell" }
  ];
  
  type Data = { name: string; surname: string };
  export default function Form({
    defaultValues,
    onSend
  }: {
    defaultValues: Data;
    onSend: (data: Data) =&gt; void;
  }) {
    const {
      register,
      handleSubmit,
      reset,
      getValues,
      control,
      formState: { isValid, isDirty }
    } = useForm({
      mode: "onChange",
      defaultValues
    });
  
    const onSubmit = (data: Data) =&gt; {
      onSend(data);
      reset(getValues());
      console.log("data sent!", data);
    };
  
    return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
       
          &lt;Controller
            control={control}
            name="name"
            render={({ field }) =&gt; (
              &lt;Select
              {...field}
                value={field.value}
                options={options}
                onChange={(v) =&gt; field.onChange(v)}
              /&gt;
            )}
          /&gt;
        &lt;input placeholder="surname" {...register("surname")}/&gt;
      
       
          &lt;button type="submit" disabled={!isValid || !isDirty}&gt;
            submit
          &lt;/button&gt;
  
      &lt;/form&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>How to fix this?</p>
  <p>ps: here is also a sandbox: <a href="https://codesandbox.io/s/react-hook-form-test-8tdq3?file=/src/FormController.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/react-hook-form-test-8tdq3?file=/src/FormController.tsx</a></p>