材质 UI 自动完成 |选择选项时重置值

Question

我正在使用 Material UI 中的自动完成功能。我希望能够在选择选项时重置输入。当您单击列表中的一个选项时，onChange 道具会触发，但我不知道如何进行设置以便重置输入。我尝试为输入分配一个 useState 值，但它不起作用。这是我的代码：

<Autocomplete
    id="select-add-on"
    options={addOns}
    getOptionLabel={addOn => addOn.name}
    renderInput={params => (
      <TextField {...params} label="Type an add-on" variant="outlined" />
    )}
    onChange={(e, val) => console.log(val)} // logs the add on object
/>

编辑：我可以让它像这样工作：

const [autocompleteValue, setAutocompleteValue] = useState('');

<Autocomplete
  id="select-add-on"
  options={addOns}
  getOptionLabel={addOn => addOn.name}
  renderInput={params => (
    <TextField {...params} label="Type an add-on" variant="outlined" />
  )}
  inputValue={autocompleteValue}
  onInputChange={(e, val, reason) => {
    if (reason === 'reset') return;
    setAutocompleteValue(val);
  }}
  onChange={(e, val) => {
    console.log(val);
    setAutocompleteValue('');
  }}
/>

现在我唯一的问题是当我重置输入值时，它仍然显示清除按钮：