Удаление нескольких фишек из автозаполнения Material-UI при отправке формы

Question

У меня есть форма, которая содержит несколько компонентов автозаполнения React Material (множественный выбор с помощью чипов). Когда я отправляю форму, состояние каждого автозаполнения очищается должным образом, но визуально фишки остаются показанными. Я не могу понять, как их удалить.

Я тоже не могу найти никаких других обсуждений по этому поводу.

Изменить:

Код здесь, он почти не изменился по сравнению с примером Material-UI:

<Autocomplete
    multiple
    id="tags-standard"
    options={top100Languages.map((option) => option.name)}
    onChange={(event, value) => setCategory(value)}
    freeSolo
    renderTags={(value, getTagProps) =>
      value.map((option, index) => (
        <Chip
          variant="outlined"
          label={option}
          {...getTagProps({ index })}
        />
      ))
    }
    renderInput={(params) => <TextField {...params} placeholder={label} />}
  />

, а форма:

<EntryForm onSubmit={onSubmit}>
  <h4>Add Entry</h4>
  <InputSelector setCategory={setThink} label={i18n("questionThink")} />
  <AddEntryLocation setLocation={setLocation} setGeolocation={setGeolocation} />
  <button>Add</button>
</EntryForm>

Answer 1

Вы хотите манипулировать значением вашего компонента извне, которое называется управляемым компонентом. Здесь ваш пример.