title: React Hook Form and React Select Not Working as Expected
body: <p>Im trying to wrap React Select inside of a React Hook Form with the <code>Controller</code> wrapper component as per the docs (<a href="https://react-hook-form.com/get-started#IntegratingControlledInputs" rel="nofollow noreferrer">https://react-hook-form.com/get-started#IntegratingControlledInputs</a>)</p>
  <pre class="lang-js prettyprint-override"><code>            &lt;Controller
                name=&quot;ShiftCaptain&quot;
                control={control}
                render={({ field }) =&gt; (
                  &lt;Select
                    {...field}
                    value={selectValue}
                    options={options}
                    placeholder={&quot;Select Person&quot;}
                    onChange={(e) =&gt; setSelectValue(e)}
                  /&gt;
                )}
              /&gt;
  </code></pre>
  <p>On form submission, the value captured inside the React Select isnt being populated into React Hook Forms:
  <a href="https://i.stack.imgur.com/YszfC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YszfC.png" alt="enter image description here" /></a></p>
  <p>Any ideas?</p>
  <p>TIA</p>