有没有办法让react-select拥有可折叠的组？

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

const { Option, GroupHeading } = components;

const CollapsibleGroup = ({ label, options, selectProps }) => {
  const isGroupOpen = selectProps.menuIsOpen && options.some(option => option.isFocused);

  return (
    <div>
      <GroupHeading {...selectProps.innerProps}>{label}</GroupHeading>
      {isGroupOpen && options.map(option => (
        <Option key={option.value} {...option.innerProps}>
          {option.label}
        </Option>
      ))}
    </div>
  );
};

const options = [
  { value: 'apple', label: 'Apple', group: 'Fruits' },
  { value: 'banana', label: 'Banana', group: 'Fruits' },
  { value: 'carrot', label: 'Carrot', group: 'Vegetables' },
  { value: 'celery', label: 'Celery', group: 'Vegetables' },
];

const groupedOptions = [
  {
    label: 'Fruits',
    options: options.filter(option => option.group === 'Fruits'),
  },
  {
    label: 'Vegetables',
    options: options.filter(option => option.group === 'Vegetables'),
  },
];

const App = () => {
  return (
    <Select
      options={groupedOptions}
      components={{ Group: CollapsibleGroup }}
      isMulti
    />
  );
};

export default App;