title: Material UI React - Autocomplete - How to reset the internal state
body: <p>My goal is to reset the internal state of <strong>Autocomplete</strong> Material-UI's component.</p>
  <p>My custom component is rendered N times in my cycle</p>
  <pre><code>{branches.map((branch, index) =&gt; {
      return (
          &lt;BranchSetting
              key={index}
              index={index}
              data={branch}
              removeBranch={removeBranch}
          /&gt;
  
      )
  })}
  </code></pre>
  <p><strong>branch</strong> is my hook state.</p>
  <p>This is my <strong>removeBranch</strong> function:</p>
  <pre><code>const removeBranch = (index) =&gt; {
      let listBranch = branches;
      listBranch.splice(index, 1);
      setBranches([...listBranch]);
  }
  </code></pre>
  <p>Every time I delete an item to my array <strong>branch</strong>, everything works fine except the <strong>Autocomplete</strong>.</p>
  <p>This is my <strong>BranchSetting</strong> component:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import Autocomplete from '@material-ui/lab/Autocomplete';
  
  const BranchSettings = ({ removeBranch, index, branchModify, data }) =&gt; {
      const [ brands, setBrands ] = useState(data.brands);
  
      const handleBrandSelected = (event, payload) =&gt; {
          const values = payload.map(item =&gt; item.value);
          setBrands(values);
      }
  
      useEffect(() =&gt; {
          setBrands(data.brands);
      }, [data])
  
      return (
          &lt;&gt;
              &lt;Autocomplete
                  id={'branch-brand'}
                  multiple
                  disableCloseOnSelect
                  options={carsBrand}
                  getOptionLabel={(carsBrand) =&gt; carsBrand.label}
                  onChange={handleBrandSelected}
                  renderTags={(value, getTagProps) =&gt;
                      value.map((option, index) =&gt; (
                          &lt;Chip
                              variant=&quot;outlined&quot;
                              label={option.value}
                              size=&quot;small&quot;
                              {...getTagProps({ index })}
                          /&gt;
                      ))
                  }
                  renderInput={(params) =&gt; {
                      return (
                          &lt;TextField
                              {...params}
                              variant=&quot;filled&quot;
                              fullWidth
                              label={'brand'}
                          /&gt;
                      )
                  }}    
              /&gt;
          &lt;/&gt;
      )
  }
  export default BranchSettings
  </code></pre>
  <p><strong>carsBrand</strong> it is my data source that in the example I avoided writing the population. It's an array</p>
  <p>Everytime I try to delete an item, Autocomplete keep the state of the component ad the prev position.
  I'm looking a way to reset all the internal state of Autocomplete component.
  The status I refer to can be seen with the <em>devToolBar</em></p>
  <p><a href="https://i.stack.imgur.com/ePPoR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ePPoR.jpg" alt="enter image description here" /></a></p>
  <p>I'm looking a good way to keep the items selected properly or that every time the component has changed, rerender the Autocomplete component.</p>