onDeleteAllChips property

[FairouzBF]

I've been using the mui-chips-input, and after updating the package turns out you can't use the onDeleteAllChips property anymore. I might just be forgetting something, so here is an example where i use the component : I have an "Advanced search" option with a form, and in this form i display multiple MuiChipsInputs, here is one of them :

<FormGroup sx={{ display: 'flex', flexWrap: 'wrap' }}>
  .....
  <MuiChipsInput
    sx={{ mt: 1, mb: 1 }}
    label={'Schedule ID'}
    value={req['scheduleId' as keyof IGetScheduleRequest] as string[]}
    onAddChip={(chip: string) =>
      handleChipChange('scheduleId' as keyof IGetScheduleRequest, [
        ...(req['scheduleId' as keyof IGetScheduleRequest] as string[]),
        chip,
      ])
    }
    onDeleteChip={(chip: string, index: number) => {
      const updatedChips = (
        req['scheduleId' as keyof IGetScheduleRequest] as string[]
      ).filter((_, i) => i !== index);
      handleChipChange('scheduleId' as keyof IGetScheduleRequest, updatedChips);
    }}
    onDeleteAllChips={() =>
      handleChipChange('scheduleId' as keyof IGetScheduleRequest, [])
    }
  />
  .......
</FormGroup>

When the user clicks on the X to delete all chips, not only does it clear the field but i also want to set my state. Here is my chip change handler if needed :

const handleChipChange = (name: keyof IGetScheduleRequest, chips: string[]) => {
  setReq((prevState) => ({ ...prevState, [name]: chips }));
};

Is there a way around this? Please note that i'm coding in typescript and that i'm using vitejs.

Thank you for your time.