自定义MultiValueRemove属性在react-select中不起作用

import React from 'react';
import Select from 'react-select';

const CustomMultiValueRemove = ({ innerProps, removeProps }) => {
  const handleClick = (event) => {
    event.stopPropagation(); // 阻止事件冒泡，避免触发父组件的点击事件
    removeProps.onClick(); // 执行默认的删除操作
    // 在这里可以添加自定义的逻辑
    console.log('Custom MultiValueRemove clicked');
  };

  return (
    <div {...innerProps} onClick={handleClick}>
      x
    </div>
  );
};

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'orange', label: 'Orange' },
];

const App = () => {
  return (
    <Select
      isMulti
      options={options}
      components={{ MultiValueRemove: CustomMultiValueRemove }}
    />
  );
};

export default App;