title: react-hook-form's validate function always returns errors
body: <p>This is the one that occurs problem.</p>
  <pre class="lang-js prettyprint-override"><code> &lt;input
       type=&quot;text&quot;
       name=&quot;nickname&quot;
       {...register('nickname', {
       required: true,
       validate: async (value) =&gt;
          value !== profile?.nickname &amp;&amp;
          (await validateNickname(value).catch(() =&gt; {
           return 'Invalid nickname.';
          })),
       })}
       placeholder=&quot;Nickname&quot;
       /&gt;
  </code></pre>
  <ul>
  <li>If the input value is not same with the defaultValue</li>
  <li>and It's duplicated with another nickname, (<code>validateNickname</code> function returns error)
  Then, error message is registered 'Invalid nickname.'<br/>
  and the errors object looks like this below.</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>{
   nickname:
   message: &quot;Invalid nickname.&quot;
   ref:...
   type: &quot;validate&quot;
  }
  </code></pre>
  <p>but the problem is</p>
  <ul>
  <li>If I input the value which is same with the defaultValue,</li>
  <li>or If I input not duplicated value,
  The errors object should be empty.
  but it still returns error like this below.</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>{
   nickname:
   message: &quot;&quot;
   ref:...
   type: &quot;validate&quot;
  }
  </code></pre>
  <p>so there's no error message registered, but somehow, error is exist.
  <br/>
  Please let me know if there's anything I'm doing wrong.
  Thanks!</p>