handleChange for MUI DropDown with multiple enabled. Limits the number of entries to a maximum of 3

handleChangeSnippet.js

const handleChange = (event, selectedChildNode) => {
    const {
      target: { value },
    } = event;
    console.log(event.target.value);
    // allow a maximum of 3 values only
    if (annualCompensationProp.length > 2) {
      // make a copy so not to mutate original state
      let newArray = annualCompensationProp.slice();
      // removes the incoming newItem if it already is in the array
      // This is because the user can also deselect and already selected item
      let arr = removeItemOnce(newArray, selectedChildNode.props.value);
      setannualCompensationProp(arr);
    } else
      setannualCompensationProp(
        // On autofill we get a stringified value.
        typeof value === "string" ? value.split(",") : value
      );
  };