title: React-Hook-Form: How to show no error when input is blank
body: <p>Once a component has been touched, and then the user clears the input, the default behaviour is that the error continues to show. How can you make it so that the error goes away when the input is cleared after touching it?</p>
  <p>The code below is an excerpt from the docs</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  
  export default function App() {
    const { register, formState: { errors }, handleSubmit } = useForm();
    
    return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;input {...register(&quot;firstName&quot;, { required: true })} /&gt;
        {errors.firstName?.type === 'required' &amp;&amp; &quot;First name is required&quot;}
        
        &lt;input {...register(&quot;lastName&quot;, { required: true })} /&gt;
        {errors.lastName &amp;&amp; &quot;Last name is required&quot;}
        
        &lt;input type=&quot;submit&quot; /&gt;
      &lt;/form&gt;
    );
  }
  
  </code></pre>