title: How to remove a selected Chip outside of Autocomplete in material UI
body: <p>So I want to display selected values as <code>&lt;Chip /&gt;</code> outside of the <code>&lt;TextField /&gt;</code> in <code>&lt;Autocomplete /&gt;</code>. I was able to display values as <code>state</code>. However, I still have trouble deleting those chips, i.e. not just the display, but also change the <code>selected</code> prop in <code>&lt;Autocomplete /&gt;</code>. Does anyone have an idea?</p>
  
  <pre><code>  const [val, setVal] = useState([]);
  
    const valHtml = val.map((option, index) =&gt; (
      &lt;Chip
        label={option.title}
        deleteIcon={&lt;RemoveIcon /&gt;}
        onDelete={() =&gt; {}}
      /&gt;
    ));
  
    return (
      &lt;div&gt;
        &lt;Autocomplete
          multiple
          filterSelectedOptions
          options={top100Films}
          onChange={(e, newValue) =&gt; setVal(newValue)}
          getOptionLabel={option =&gt; option.title}
          renderTags={() =&gt; {}}
          renderInput={params =&gt; (
            &lt;TextField
              {...params}
              variant="standard"
              placeholder="Favorites"
              margin="normal"
              fullWidth
            /&gt;
          )}
        /&gt;
        &lt;div className="selectedTags"&gt;{valHtml}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Complete code <a href="https://codesandbox.io/s/material-demo-wllfw" rel="nofollow noreferrer">here</a></p>