title: react-hook-form can't see change value by click on button to reset input
body: <p>Component with input and button to reset input <code>TexInputComponent</code>:</p>
  <pre><code>&lt;input
      type={type}
      name={name}
      ref={register}
  /&gt;
  &lt;button
      type=&quot;button&quot;
      onClick={clearInput}&gt;
  Reset input
  &lt;/button&gt;
  
  const clearInput = () =&gt; {
    document.querySelector(`#${name}`).value = null;
  };
  </code></pre>
  <p>I'm using <code>TexInputComponent</code> inside form in another component:</p>
  <pre><code>  &lt;TexInputComponent
      name=&quot;title&quot;
      defaultValue={data?.title}
      register={register({ required: 'Title is required.' })}
      error={errors.title}
    /&gt;
  </code></pre>
  <p>Now when I click submit on form <code>react-hook-form</code> return me error e.g 'Title is required!'. When I writing something in <code>TexInputComponent</code>, then error disapear.
  The problem is when I writing text and click button to reset input. The <code>clearInput</code> method is executed (this method changing <code>value</code> to <code>null</code>) Now should displaying error, but I thing the react hook form can't see value changing.</p>
  <p>How I can fix it?</p>