title: React Form hook - getting "required field" error message despite input being entered
body: <p>I just started building a form using react form hook. Just started with single input called name and when I submit the form I get the error message.</p>
  <p>I tried to follow these instructions:
  <a href="https://react-hook-form.com/get-started" rel="nofollow noreferrer">https://react-hook-form.com/get-started</a></p>
  <pre><code>//I have tried with this but I get unexpected token error:
   &lt;input {...register('name', { required: true })} /&gt;
  </code></pre>
  <hr />
  <pre><code>import React from 'react'
  import { useForm } from 'react-hook-form'
  
  
  
  const NewUserForm = () =&gt; {
      const { register, handleSubmit,  formState: { errors } } = useForm();
      const onSubmit = data =&gt; console.log(data)
  
  
      return (
  
        &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Name&quot; name=&quot;name&quot; ref={register('name', {required: true})} /&gt;
          {errors.name &amp;&amp; &lt;span&gt; This field is required&lt;/span&gt;} 
       &lt;input type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot; ref={register('email', {required: true})} /&gt;
          {errors.email &amp;&amp; &lt;span&gt; This field is required&lt;/span&gt;} 
          &lt;input type=&quot;submit&quot; /&gt;            
        &lt;/form&gt;
      )
  }
  
  export default NewUserForm
  </code></pre>