Manually re-render multiselect values to update internal state

[lucastobrazil]

i have a bit of an odd case where the MultiSelect component has an internal checkbox too. This means each "Chip" that's visible with isMulti=true would perform an action that should trigger a re-render so that its internal state gets updated.

As you can see in the video below (and code snippet underneath), the onClick of the checkbox does actually get triggered (as when i delete and re-add the chip, its state has now updated). So it looks to me like the react-select component has no reason to re-render, thus never re-rendering the child MultiValue component to show the new state.

Is it possible to manually trigger a re-render?

Screen.Recording.2023-07-27.at.12.03.59.am.mov

() => {
  const [isLoading, setIsLoading] = React.useState(false);
  const [isAcknowledged, setIsAcknowledged] = React.useState(false);
  const [selectedValue, setSelectedValue] = React.useState([]);
  


  return (
    <Select
      name="foodAllergies"
      id="foodAllergies"
      value={selectedValue}
      openMenuOnClick
      onChange={(newValue) => setSelectedValue(newValue)}
      isMulti
      options={[
        {
          label: "Practitioners",
          options: [
            {
              label: "Dr Vivian Jones",
              value: "drvivian",
                chipCheckboxProps: {
                  onClick: () => setIsAcknowledged(true),
                  isLoading: isLoading,
                  isChecked: isAcknowledged,
                  label: "Ack",
              },
            },
          ],
        },
      ]}
    />
  );
};