How can I set onDelete prop in autocomplete?

Question

I want to delete chips thanks to an handleDelete function called in ChipProps but it seems not to be able to get the event.target.value... How can I do?

const handleDelete = (event) => 
{
  console.log(event.target);  // here I get undefined
}

<AutoComplete
  multiple
  id="checkboxes-options"
  debug
  options={newData.map((item) => item.name)}
  ChipProps={{ clickable: false, onDelete: handleDelete, variant: "outlined", color: "primary" }}
  disableCloseOnSelect
  disableClearable
  value={newData}
  tag={{ color: "primary" }}
  renderOption={(options, { selected }) =>
   <Aux>
     <FormControlLabel
     control={
       <Checkbox
         icon={icon}
         checkedIcon={checkedIcon}
         style={{ marginRight: 20 }}
         value={options}
         name={options === newData ? "isChecked" : "isUnchecked"}
         color='primary'
         checked={options === newData ? state.isChecked : selected}
         onChange={updateNewData}
        />
      }
    />
    {options}
/>

Answer 1

Add a render function to the renderTags prop of your autocomplete component. Inside your renderTags method you can not only change your tags, but also override the onDelete function.

<Autocomplete
  ...
  renderTags={(values) =>
    values.map((value) => (
      <Chip
        key={value.id}
        label={value.title}
        onDelete={() => {
          removeOption(value.id);
        }}
      />
    ))
  }
/>
    

Here is a reference to a similar question, which also has a demo: Material UI Autocomplete - unchecking checkboxes in renderOption using Redux dispatch