Reactjs 如何在React Select中向自定义组件多值添加移除（X）按钮？

目标是在多选选项列表中添加图标，并在选择选项时显示图标。我遇到的问题是“x”删除按钮丢失。如何将其包含在自定义多值中

const customMultiValue = ({ props, data }) => {
  return (
    <div className='input-select'>
      <div className='input-select__multi-value'>
        {data.icon && <FontAwesomeIcon
          icon={data.icon.fa}
          color={data.color}
        />} <span>{data.label}</span>
      </div>
    </div>
  );
};

<Select
    isMulti
    closeMenuOnSelect={false}
    onChange={this.handleSetStatus}
    options={healthMonitoringStore.statuses}
    components={{ MultiValue: customMultiValue, Option: IconOption } }
    placeholder={'Filter Status'}
/>

constCustomMultiValue=（{props，data}）=>{
返回(
{data.icon&&}{data.label}
);
};

我尝试过使用MultiValueRemove，但是格式很奇怪，图标不可点击

const customMultiValue = ({ props, data }) => {
  return (
    <div className='input-select' {...props}>
      <div className='input-select__multi-value'>
        {data.icon && <FontAwesomeIcon
          icon={data.icon.fa}
          color={data.color}
          fixedWidth />} <span>{data.label}</span>
        <components.MultiValueRemove {...props}></components.MultiValueRemove>
      </div>
    </div>
  );
};

constCustomMultiValue=（{props，data}）=>{
返回(
{data.icon&&}{data.label}
);
};

不确定我的方向是否正确。

我自己解决了这个问题

我需要多值标签，而不是多值标签