How do I add Remove (X) button to my custom components MultiValue in React-Select?

Question

Goal was to add an icon to the list of multiselect options and also show the icon upon selecting the option(s). Problem I am having is that the "x" remove button is lost. How do I include it in my custom MultiValue?

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'}
/>

I've tried using MultiValueRemove, but the formatting is weird and the icon isn't clickable.

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>
  );
};

Not sure If I am heading the right direction.

Answer 1

Fixed it myself.

I needed MultiValueLabel instead of MultiValue.