title: The validation errors are not showing using React Hook Form
body: <p>I'm using <a href="https://react-hook-form.com" rel="noreferrer"><code>React Hook Form</code></a> in order to validate some simple inputs :</p>
  <pre><code>import React from &quot;react&quot;;
  import useForm from &quot;react-hook-form&quot;;
  
  import &quot;./App.css&quot;;
  
  function App() {
    const { register, handleSubmit, errors } = useForm();
    const onSubmit = data =&gt; {
      console.log(data);
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;header className=&quot;App-header&quot;&gt;
          &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
            &lt;input
              className=&quot;mkn-input&quot;
              name=&quot;firstName&quot;
              placeholder=&quot;First name&quot;
              ref={register({
                required: true,
                maxlength: 20,
                message: &quot;invalid first name&quot;
              })}
            /&gt;
            &lt;span&gt; {errors.firstName &amp;&amp; errors.firstName.message}&lt;/span&gt;
  
            &lt;input
              placeholder=&quot;Last name&quot;
              className=&quot;mkn-input&quot;
              name=&quot;lastName&quot;
              ref={register({
                pattern: /^[A-Za-z]+$/i,
                message: &quot;Invalid last name&quot;
              })}
            /&gt;
            {errors.lastName &amp;&amp; &lt;span&gt; errors.lastName.message&lt;/span&gt;}
            &lt;input
              name=&quot;age&quot;
              type=&quot;number&quot;
              placeholder=&quot;Age&quot;
              className=&quot;mkn-input&quot;
              ref={register({ min: 18, max: 99 })}
            /&gt;
            &lt;input type=&quot;submit&quot; className=&quot;mkn-btn&quot; /&gt;
          &lt;/form&gt;
        &lt;/header&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p>But I'm facing a weird issue with showing that <strong>errors</strong> in the DOM, i also to tried to log them in console but without success, what am I missing ?</p>
  <p>the full code :</p>
  <p><a href="https://codesandbox.io/s/react-hook-form-custom-input-c1mtl?fontsize=14" rel="noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit React Hook Form - Custom Input" /></a></p>