title: MUI Autocomplete's 'defaultValue' not working when used with Controller of react-hook-form
body: <p>I am trying to use MUI's Autocomplete with react-hook-form. I have wrapped an Autocomplete component in React Hook Form's Controller. When I try to set defaultValue to AutoComplete it does not work, when I try to change the preset value the Autocomplete component breaks.
  Here is the snippet from my code.</p>
  <pre><code>&lt;Controller
    name=&quot;combo-box-demo&quot;
    control={control}
    defaultValue={top100Films.find(film =&gt; film.year === selectedFilmYear)}
    as={
      &lt;Autocomplete
        id=&quot;combo-box-demo&quot;
        options={top100Films}
        getOptionLabel={option =&gt; option.title}
        style={{ width: 300 }}
        renderInput={params =&gt; (
          &lt;TextField {...params} label=&quot;Combo box&quot; variant=&quot;outlined&quot; /&gt;
        )}
      /&gt;
    }
  /&gt;
  </code></pre>
  <p>Sandbox link of working demo code is <a href="https://codesandbox.io/s/material-demo-oi085" rel="nofollow noreferrer">here</a>.</p>