title: How to keep the state of the Material-UI AutoComplete when the component re-render?
body: <p>I'm using Material-UI v4 <code>AutoComplete</code> component with <code>renderOption</code> prop to render a <code>checkbox</code> item option, However the problem is when <code>onChange</code> event fires it updates a <code>hook</code> in the parent component and results a render to the child and thus the state of the component and the state of selected items are lost which leads to inconsistency in the UI and the logic, How can I prevent such scenario while rendering!</p>
  
  <pre><code>export default function CheckboxesTags() {
    return (
      &lt;Autocomplete
        multiple
        id="checkboxes-tags-demo"
        options={top100Films}
        disableCloseOnSelect
        getOptionLabel={option =&gt; option.title}
        onChange={(e, values)=&gt; {
            setMoveisFilter(values); // it calls the setter of the hook at the parent component
  
        }}
        renderOption={(option, { selected }) =&gt; (
          &lt;React.Fragment&gt;
            &lt;Checkbox
              icon={icon}
              checkedIcon={checkedIcon}
              style={{ marginRight: 8 }}
              checked={selected}
            /&gt;
            {option.title}
          &lt;/React.Fragment&gt;
        )}
        style={{ width: 500 }}
        renderInput={params =&gt; (
          &lt;TextField
            {...params}
            label="Checkboxes"
            placeholder="Favorites"
            fullWidth
          /&gt;
        )}
      /&gt;
  </code></pre>