title: Issue with async default value in React Material UI Autocomplete
body: <p>I am using 'Material UI' Autocomplete component to render a dropdown in my form. However, in case the user wants to edit an object then the dropdown should be displayed as autofilled with whatever value that's being fetched from the database. </p>
  
  <p>I've tried to mock the situation using below code</p>
  
  <pre><code>import React, { Component } from 'react';
  import Autocomplete from '@material-ui/lab/Autocomplete';
  import TextField from '@material-ui/core/TextField';
  
  export default class Sizes extends Component {
      state = {
          default: []
      }
  
      componentDidMount() {
          setTimeout(() =&gt; {
              this.setState({ default: [...this.state.default, top100Films[37]]})
          })
      }
  
      render() {
          return (
                  &lt;Autocomplete
                      id="size-small-standard"
                      size="small"
                      options={top100Films}
                      getOptionLabel={option =&gt; option.title}
                      defaultValue={this.state.default}
                      renderInput={params =&gt; (
                          &lt;TextField
                              {...params}
                              variant="standard"
                              label="Size small"
                              placeholder="Favorites"
                              fullWidth
                          /&gt;
                      )}
                  /&gt;
          );
      }
  }
  </code></pre>
  
  <p>Here after the component is mounted, I'm setting a timeout and returning the default value that should be displayed in the dropdown</p>
  
  <p>However, it's unable to display the value in the dropdown and I'm seeing this error in console - </p>
  
  <pre><code>index.js:1375 Material-UI: the `getOptionLabel` method of useAutocomplete do not handle the options correctly.
  The component expect a string but received undefined.
  For the input option: [], `getOptionLabel` returns: undefined.
  </code></pre>
  
  <p>Apparently the state is getting updated when componentDidMount is getting called but the Autocomplete component's defaultValue prop is unable to read the same</p>
  
  <p>Any idea what I might be getting wrong here?</p>
  
  <p>Code sandbox link - <a href="https://codesandbox.io/s/dazzling-dirac-scxpr?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="noreferrer">https://codesandbox.io/s/dazzling-dirac-scxpr?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>