title: React Hook Form require rules of Controller always triggering
body: <p>I started using <code>react-hook-form</code> to validate my inputs, but the require rule is always triggering even if I typer/enter something in the input field.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { Controller, useForm } from &quot;react-hook-form&quot;;
  import { Button, Form, Label, Input } from &quot;reactstrap&quot;;
  
  const setErrorStyle = (name) =&gt; {
    return {
      borderColor: name ? &quot;red&quot; : &quot;&quot;,
      boxShadow: name ? &quot;0 0 1.5px 1px red&quot; : &quot;&quot;
    };
  };
  
  const App = () =&gt; {
    const [comment, setComment] = useState(&quot;&quot;);
    const {
      handleSubmit,
      control,
      formState: { errors }
    } = useForm();
  
    const submitForm = (data) =&gt; {
      console.log(data);
    };
  
    return (
      &lt;Form onSubmit={handleSubmit(submitForm)}&gt;
        &lt;Label for=&quot;commentNote&quot; className=&quot;mr-sm-10&quot;&gt;
          Note/Comment
        &lt;/Label&gt;
        &lt;Controller
          name=&quot;commentNote&quot;
          control={control}
          defaultValue={comment}
          rules={{ required: true }}
          render={({ field: { ref, onChange, ...field } }) =&gt; (
            &lt;Input
              {...field}
              type=&quot;textarea&quot;
              rows={5}
              id=&quot;commentNote&quot;
              innerRef={ref}
              value={comment}
              onChange={(e) =&gt; setComment(e.target.value)}
              aria-invalid={!!errors.commentNote}
              style={setErrorStyle(errors.commentNote)}
            /&gt;
          )}
        /&gt;
        {errors.commentNote &amp;&amp; (
          &lt;span style={{ color: &quot;red&quot; }} role=&quot;alert&quot;&gt;
            required
          &lt;/span&gt;
        )}
        &lt;Button type=&quot;submit&quot; color=&quot;primary&quot; size=&quot;sm&quot; className=&quot;w-auto&quot;&gt;
          Submit
        &lt;/Button&gt;
      &lt;/Form&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>Here is the SandBox for testing: <a href="https://codesandbox.io/s/modern-wind-6v2gp" rel="nofollow noreferrer">https://codesandbox.io/s/modern-wind-6v2gp</a></p>
  <p>Thanks</p>