title: How to set value of a Select in react-hook-form?
body: <p>I am trying to load async data and use it to populate material-ui components in a form with react-hook-form. I have a <code>TextField</code> that seems to work fine, but I can't seem to figure out how to get the <code>Select</code> to show the correct value.</p>
  <p>Here's a <a href="https://codesandbox.io/s/cool-cdn-ju06v?file=/src/App.tsx" rel="nofollow noreferrer">codesandbox</a> to demo my problem.</p>
  <p>I am using <code>Controller</code> to manage the <code>Select</code> as seems to be recommended in the docs:</p>
  <pre><code>  const { register, handleSubmit, control, reset, setValue } = useForm()
  
    &lt;TextField name=&quot;name&quot; inputRef={register} /&gt;
    &lt;Controller
      name=&quot;color_id&quot;
      control={control}
      register={register}
      setValue={setValue}
      as={
        &lt;Select&gt;
          {thingColors.map((tc, index) =&gt; (
            &lt;MenuItem key={index} value={tc.id}&gt;
              {tc.name}
            &lt;/MenuItem&gt;
          ))}
        &lt;/Select&gt;
      }
    /&gt;
  </code></pre>
  <p>I'm trying to populate the fields with <code>reset</code> from useForm(), which seems to work for the TextField.</p>
  <pre><code>  useEffect(() =&gt; {
      getData().then((result) =&gt; {
        reset({
          color_id: 3,
          name: 'Bill'
        });
      });
    }, [reset]);
  </code></pre>
  <p>This seems to correctly set the values for the form, and when I submit my form it seems to have the correct values for <code>name</code> and for <code>color_id</code>.  It seems like I'm not correctly hooking up the <code>Select</code> and the control is not showing the selected value that I set.</p>
  <p>How can I get my material UI <code>Select</code> to show my applied value here?</p>