title: react-hook-form Controller onBlur callback not triggering validation
body: <p>Want to trim an input field when user onBlurs.</p>
  
  <pre><code>    &lt;Controller 
      ...
      onBlur={([e]) =&gt; {
      const { value } = e.target;
      const trimmedValue = value.trim();
      console.log('trim here: ', value, value.length, trimmedValue.length);
      if (trimmedValue === '') {
      console.log('error!!!');
      return trimmedValue;
      }
      return trimmedValue;
      }} /&gt;
  </code></pre>
  
  <p>Rule: </p>
  
  <pre><code>rules={{
   pattern: {
   value: new RegExp(firstName.validationString, 'i'),
  message: 'First name must be 2 - 100 characters with no numbers.',
  },
  required: firstName.mandatory &amp;&amp; 'Must fill in first name',
  }}
  </code></pre>
  
  <p>The function is triggered and reaching the if-statement. But is not triggering an error even though I have a rule set as required.</p>