title: Show Error From Controllers in React Hook Forms
body: <p>I am trying to throw required errors from my input which I have wrapped in a Controller component from <code>react-hook-form</code> version 7.</p>
  <p>My Input is a Material-UI TextField as such;</p>
  <pre><code>&lt;Controller
                          
      name=&quot;firstName&quot;
      control={control}
      defaultValue=&quot;&quot;
      rules={{ required: true}}
      render={({field}) =&gt;
          &lt;TextField
          id=&quot;firstName&quot;
          name=&quot;firstName&quot;
          autoComplete=&quot;fname&quot;
          variant=&quot;outlined&quot;
          fullWidth
          label=&quot;First Name&quot;
          autoFocus={true}
          {...field} /&gt;
      }
  /&gt;
  </code></pre>
  <p>I would like to expose an error when rules fails.</p>