react-select - Cascading选择未清除的MultiValue

import React, { useState } from 'react';
import Select from 'react-select';

const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
];

const cascadingOptions = {
  option1: [
    { label: 'Suboption 1-1', value: 'suboption1-1' },
    { label: 'Suboption 1-2', value: 'suboption1-2' },
  ],
  option2: [
    { label: 'Suboption 2-1', value: 'suboption2-1' },
    { label: 'Suboption 2-2', value: 'suboption2-2' },
  ],
  option3: [
    { label: 'Suboption 3-1', value: 'suboption3-1' },
    { label: 'Suboption 3-2', value: 'suboption3-2' },
  ],
};

const App = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const handleSelectChange = (selected) => {
    setSelectedOptions(selected);
  };

  const getCascadingOptions = () => {
    if (selectedOptions.length === 0) {
      return options;
    } else {
      const lastSelectedValue = selectedOptions[selectedOptions.length - 1].value;
      return cascadingOptions[lastSelectedValue];
    }
  };

  return (
    <Select
      options={getCascadingOptions()}
      value={selectedOptions}
      onChange={handleSelectChange}
      isMulti
    />
  );
};

export default App;