title: Proper way to use react-hook-form Controller with Material-UI Autocomplete
body: <p>I am trying to use a custom <code>Material-UI Autocomplete</code> component and connect it to <code>react-hook-form</code>.</p>
  
  <blockquote>
    <p>TLDR: Need to use MUI Autocomplete with react-hook-form Controller without <code>defaultValue</code></p>
  </blockquote>
  
  <p>My custom <code>Autocomplete</code> component takes an object with the structure <code>{_id:'', name: ''}</code> it displays the name and returns the <code>_id</code> when an option is selected. The <code>Autocomplete</code> works just fine. </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Autocomplete
    options={options}
    getOptionLabel={option =&gt; option.name}
    getOptionSelected={(option, value) =&gt; option._id === value._id}
    onChange={(event, newValue, reason) =&gt; {
      handler(name, reason === 'clear' ? null : newValue._id);
    }}
    renderInput={params =&gt; &lt;TextField {...params} {...inputProps} /&gt;}
  /&gt;
  </code></pre>
  
  <p>In order to make it work with <code>react-hook-form</code> I've set the <code>setValues</code> to be the handler for <code>onChange</code> in the <code>Autocomplete</code> and manually register the component in an <code>useEffect</code> as follows</p>
  
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
    register({ name: "country1" });
  },[]);
  </code></pre>
  
  <p>This works fine but I would like to not have the <code>useEffect</code> hook and just make use of the register somehow directly. </p>
  
  <p>Next I tried to use the <code>Controller</code> component from <code>react-hook-form</code> to proper register the field in the form and not to use the <code>useEffect</code> hook </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Controller
    name="country2"
    as={
      &lt;Autocomplete
        options={options}
        getOptionLabel={option =&gt; option.name}
        getOptionSelected={(option, value) =&gt; option._id === value._id}
        onChange={(event, newValue, reason) =&gt;
          reason === "clear" ? null : newValue._id
        }
        renderInput={params =&gt; (
          &lt;TextField {...params} label="Country" /&gt;
        )}
      /&gt;
    }
    control={control}
  /&gt;
  </code></pre>
  
  <p>I've changed the <code>onChange</code> in the <code>Autocomplete</code> component to return the value directly but it doesn't seem to work. </p>
  
  <p>Using <code>inputRef={register}</code> on the <code>&lt;TextField/&gt;</code> would not cut it for me because I want to save the <code>_id</code> and not the <code>name</code></p>
  
  <p><a href="http://codesandbox.io/s/vigilant-feather-6nvf6" rel="noreferrer">HERE</a> is a working sandbox with the two cases. The first with <code>useEffect</code> and <code>setValue</code> in the <code>Autocomplete</code> that works. The second my attempt in using <code>Controller</code> component</p>
  
  <p>Any help is appreciated.</p>
  
  <blockquote>
    <p>LE</p>
  </blockquote>
  
  <p>After the comment from Bill with the working sandbox of MUI Autocomplete, I Managed to get a functional result</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Controller
    name="country"
    as={
      &lt;Autocomplete
        options={options}
        getOptionLabel={option =&gt; option.name}
        getOptionSelected={(option, value) =&gt; option._id === value._id}
        renderInput={params =&gt; &lt;TextField {...params} label="Country" /&gt;}
      /&gt;
    }
    onChange={([, { _id }]) =&gt; _id}
    control={control}
  /&gt;
  </code></pre>
  
  <p>The only problem is that I get an <code>MUI Error</code> in the console </p>
  
  <p><em>Material-UI: A component is changing the uncontrolled value state of Autocomplete to be controlled.</em></p>
  
  <p>I've tried to set an <code>defaultValue</code> for it but it still behaves like that. Also I would not want to set a default value from the options array due to the fact that these fields in the form are not required.</p>
  
  <p>The updated sandbox <a href="http://codesandbox.io/s/wizardly-platform-i7fwc" rel="noreferrer">HERE</a></p>
  
  <p>Any help is still very much appreciated</p>