title: Getting values from react-select component in react-hook-form?
body: <p>I'm trying to use a <code>react-select</code> component inside of a form created using <code>react-hook-form</code>. I have followed the instructions from the react-hook-form website <a href="https://react-hook-form.com/get-started/#IntegratingwithUIlibraries" rel="nofollow noreferrer">here</a>, but when I submit the form the value from the select component is <code>&quot;&quot;</code> (the default value).</p>
  <p>I know that the form is working in general because other values that are input with <code>ref={register}</code> work fine. It's just this one value that I'm using the <code>Controller</code> for. Am I missing a prop in the <code>Select</code> component or am I going wrong somewhere else?</p>
  <p>I have a parent component where the form is defined:</p>
  <pre><code>&lt;Form id=&quot;public-share-form&quot; onSubmit={handleSubmit(onSubmit)}&gt;
     &lt;Controller
      as={&lt;PublicShareNetworkSelect /&gt;}
      name=&quot;network&quot;
      control={control}
      defaultValue=&quot;&quot;
     /&gt;
  &lt;/Form&gt;
  </code></pre>
  <p>Then a child component for the <code>react-select</code> component used in the <code>as</code> prop of the <code>Controller</code>:</p>
  <pre><code>return (
     &lt;Select
     closeMenuOnSelect={true}
     options={networks}
     noOptionsMessage={() =&gt; &quot;No matching options&quot;}
     defaultValue=&quot;&quot;
     className=&quot;basic-single&quot;
     classNamePrefix=&quot;select&quot;
  /&gt;
  );
  </code></pre>