Rsuite TreePicker clear selections programmitacally - ReactJS

Question

I am using TreePicker & CheckTreePicker from rsuite package. I would like to clear the selections programmatically for the tree picker when certain props value is changed. I am able to trigger event in the useEffect when value of selectItemchanges , and I would like to clear all the current selections for treePicker just after it.

const Categories = ({ selectItem }) => {
  useEffect(() => {
    // INCLUDE LOGIC HERE TO RESET ALL THE FILTERS WHEN the value of selectItem change
  }, []);

  const handleCategFilters = (value) => {
    console.log("do something here with value", value);
  };

  return (
    <CheckTreePicker
      data={pickerDT}
      onChange={(i) => {
        handleCategFilters(i);
      }}
    />
  );
};

I appreciate yur help. Thank you.

Answer 1

You can manually control the value

const Categories = ({ selectItem }) => {
  const [value, setValue] = React.useState([]);
  useEffect(() => {
    // INCLUDE LOGIC HERE TO RESET ALL THE FILTERS WHEN the value of selectItem change
    setValue([]);
  }, []);

  const handleCategFilters = (value) => {
    console.log("do something here with value", value);
  };

  return (
    <CheckTreePicker
      data={pickerDT}
      value={value}
      onChange={(i) => {
        handleCategFilters(i);
      }}
    />
  );
};