I have some ionic segment buttons that essentially act as toggle switches. I'm trying to limit the rate at which the effects of the toggles can be switched/selected) and have tried Debounce & Throttle from both lodash and now underscores without success.

I'm currently using underscores and am still having the issue that the function is still being called freely despite the use of debounce.

Here's my code:

<IonSegment onIonChange={e => setOptionsHandlerThrottled(e.detail.value as string, "Trigger", "statusSensorHighTrigger")} className="lowercase" color="brand" value={settingsHandler("statusSensorHighTrigger")}>
  <IonSegmentButton value="false">
    <IonLabel>Low</IonLabel>
  </IonSegmentButton>
  <IonSegmentButton value="true">
    <IonLabel>High</IonLabel>
  </IonSegmentButton>
</IonSegment>


const setOptionsHandler = (value: string, option: string, key: string) => {
if (value === "true") {
  console.log("RESULT: True / " + value + " / " + option + " / " + key);
  if (!settingsHandler(key)) {
    setControlHandler(option, false); //toggle on
    console.log("TOGGLE " + option + " ON!");
  }
}
else { // false
  console.log("RESULT: False / " + value + " / " + option + " / " + key);
    if (settingsHandler(key)) {
    setControlHandler(option, false); //toggle off
    console.log("TOGGLE " + option + " OFF!");
    }
  }
}

const setOptionsHandlerThrottled = _.debounce(setOptionsHandler, 5000, true);

Why is setOptionsHandler still being called when the IonSegmentButton changes regardless of the debounce timeout? Am I accidentally creating a new debounced function every time it's called?