title: react-hook-form - Controller not updating on first change
body: <p>This is my example
  <a href="https://codesandbox.io/s/react-hook-form-basic-forked-4stdl?file=/src/index.js" rel="noreferrer">https://codesandbox.io/s/react-hook-form-basic-forked-4stdl?file=/src/index.js</a></p>
  <p>It has 2 input examples - firstName and lastName.
  Typing a space into firstName correctly displays  an error.</p>
  <p>Typing a space into lastName (Using a Controller) does not display the error until second keypress. It does not fire on first change.</p>
  <p>Not sure why this is.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { FC } from &quot;react&quot;;
  import { useFormContext, useWatch, Controller } from &quot;react-hook-form&quot;;
  
  export interface Props {
    name: string;
    label?: string;
    defaultValue?: string;
  }
  
  const ControlledInput: FC&lt;Props&gt; = ({
    name,
    label: labelText = &quot;&quot;,
    defaultValue = &quot;&quot;
  }) =&gt; {
    const { register, control, errors } = useFormContext();
  
    const label = labelText || name;
    const value = useWatch({
      control,
      name,
      defaultValue
    });
  
    console.log(
      `ControlledInput() render(), name=${name}, defaultvalue=&quot;${defaultValue}&quot;, value=&quot;${value}&quot;`
    );
    return (
      &lt;div&gt;
        &lt;Controller
          control={control}
          name={name}
          defaultValue={defaultValue}
          render={(props) =&gt; {
            const errorText = errors[name]?.type;
  
            // console.log('#################################');
            // console.log('name = ', name);
            // console.log(`errors[${name}] = `, errors[name]);
            // console.log('type = ', type);
            // console.log('errorText =', errorText);
  
            return (
              &lt;&gt;
                &lt;input
                  name={props.name}
                  defaultValue={defaultValue}
                  ref={register({
                    validate: {
                      beginSpace: (value) =&gt; /^\S/.test(value)
                    }
                  })}
                  type={&quot;text&quot;}
                  placeholder={label}
                  aria-label={label}
                  data-error={errorText !== &quot;&quot; &amp;&amp; errorText}
                /&gt;
                {errorText ? (
                  &lt;span style={{ color: &quot;white&quot; }}&gt;
                    {label} ERROR: {errorText}
                  &lt;/span&gt;
                ) : null}
              &lt;/&gt;
            );
          }}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  export default ControlledInput;
  </code></pre>