title: React form hooks How to validate select option
body: <p>I am working with reach hooks and to validate my form fields I am using <code>react-hook-form</code> as it is the best option for now</p>
  <p>SO to validating my normal input fields I am doing just <code>ref={register({ required: true })}</code> then on submit it is checking for errors as I am importing errors from react-hook-form</p>
  <p>But when I am doing same for select field it is not checking the error object</p>
  <p><strong>This is what I am doing</strong></p>
  <pre><code>&lt;label htmlFor=&quot;func&quot; className=&quot;form_label&quot;&gt;
        Select function
      &lt;/label&gt;
      &lt;select name=&quot;func&quot; ref={register({ required: true })}&gt;
        &lt;option selected disabled&gt;
          Select function
        &lt;/option&gt;
        &lt;option value=&quot;5&quot;&gt;Function 2&lt;/option&gt;
        &lt;option value=&quot;6&quot;&gt;Function 3&lt;/option&gt;
      &lt;/select&gt;
      {errors.func &amp;&amp; (
        &lt;div&gt;
          &lt;span&gt;Function is required&lt;/span&gt;
        &lt;/div&gt;
      )}
  </code></pre>
  <p>I don't know what I am missing</p>
  <p>My actual code is with dynamic data</p>
  <p>so I am looping it like this</p>
  <pre><code>&lt;Form.Control as=&quot;select&quot; custom&gt;
                      &lt;option disabled selected&gt;Select role&lt;/option&gt;
                      {loading === false &amp;&amp;
                      data.get_roles.map((li) =&gt; (
                      &lt;option value={li.user_type_id}&gt; 
                      {li.user_type}&lt;/option&gt;
          ))}
              &lt;/Form.Control&gt;
  </code></pre>
  <p><a href="https://react-hook-form.com/" rel="noreferrer">React hook form</a></p>