title: How to validate react hook form select field
body: <p>I am able to get value onChange after select any value in Countries but when  I submit the form Error message displaying (but select has value)</p>
  <pre><code>&lt;div className=&quot;form-group mb-3&quot;&gt;
                              &lt;label&gt;Country&lt;/label&gt;
                              &lt;Controller
                                  control={control}
                                  name=&quot;country&quot;
                                  render={({ 
                                      field: { onChange, onBlur, value, ref }
                                  }) =&gt; (
                                      &lt;select className='form-control form-select'
                                          onChange={(e) =&gt; setCountry(e.target.value)}
                                          inputRef={register(&quot;country&quot;, { required: true })}
                                      &gt;
                                          &lt;option&gt;Select Country&lt;/option&gt;
                                          {
                                              Country.getAllCountries().map((item) =&gt; &lt;option value={item.isoCode} key={item.isoCode}&gt;{item.name}&lt;/option&gt;)
                                          }
                                      &lt;/select&gt;
                                  )}
                              /&gt;
                              {errors.country &amp;&amp; &lt;span className=&quot;error-text&quot;&gt;Country is required&lt;/span&gt;}
                          &lt;/div&gt;
  </code></pre>
  <p>please see attached screen shot</p>
  <p><a href="https://i.stack.imgur.com/rG9cN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rG9cN.png" alt="enter image description here" /></a></p>