title: How to make React-hook-form Controller validation triggered on blur?
body: <p>I am creating a form with React-Hook-Form.
  I have set <code>useForm({mode: 'onBlur'})</code> to trigger validation instantly and show error message right after user onBlur an element.
  For input text fields, it works fine.
  However, it doesn't work with my <code>&lt;Controller /&gt;</code> element, which wraps an customized <code>&lt;Select /&gt;</code>.</p>
  
  <p>The following is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { useForm, Controller, ErrorMessage } from 'react-hook-form';
  import Select from '../../components/UI/Select';
  
  const departmentList = [
      { name: 'PLEASE SELECT', value: '' },
      { name: 'Finance', value: 'FIN' },
      { name: 'IT', value: 'IT' },
      { name: 'Business', value: 'BIZ' }
  ];
  
  const Form = props =&gt; {
      const { register, handleSubmit, control, errors } = useForm({ mode: "onBlur" });
  
      const onSubmit = (data) =&gt; {
          console.log(data);
      }
      return (
          &lt;form onSubmit={handleSubmit(onSubmit)} style={{backgroundColor: 'white'}}&gt;
              &lt;div&gt;
                  &lt;label&gt;First Name:&lt;/label&gt;
                  &lt;input type="text" name='firstName' ref={register({ required: 'First name cannot be null.' })} /&gt;
                  &lt;ErrorMessage errors={errors} name='firstName' /&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;label&gt;Last Name:&lt;/label&gt;
                  &lt;input type='text' name='lastName' ref={register({ required: 'Last name cannot be null.' })} /&gt;
                  &lt;ErrorMessage errors={errors} name='lastName' /&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;label&gt;Department:&lt;/label&gt;
                  &lt;Controller
                      as={&lt;Select options={departmentList} /&gt;}
                      control={control}
                      valueName="selected"
                      rules={{ required: 'Department cannot be null.' }}
                      name="department"
                  /&gt;
                  &lt;ErrorMessage errors={errors} name='department' /&gt;
              &lt;/div&gt;
  
              &lt;input type="submit" value="Submit" /&gt;
          &lt;/form&gt;
      );
  }
  
  export default Form;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The following is the <code>&lt;Select /&gt;</code> element:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  
  const Select = props =&gt; {
      let optionList = null;
  
      if(props.options) {
          optionList = props.options.map((o, i) =&gt; &lt;option key={i} value={o.value}&gt;{o.name}&lt;/option&gt;)
      }
  
      return (
          &lt;select 
              className="form-control" 
              value={props.value}
              style={props.style} 
              selected={props.selected}
              onChange={props.onChange}
          &gt;
              { optionList }
          &lt;/select&gt;
      );
  };
  
  export default Select;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After clicking on the select, choosing the empty value, and then blur, it doesn't show the error message onBlur.</p>
  
  <p>Is there any way to make the  trigger validation and show error message onBlur? Do I missed anything? </p>