How to use the react-select.components.MultiValue function in react-select

const SortableSelect = ({ onChange, value, valueComponent, valueTransformer, ...remainingProps }) => {
  // eslint-disable-next-line react/prop-types
  const ValueList = ({ children, ...rest }) => (
     _onSortEnd(v, onChange, value)}
                       axis="x"
                       helperClass={`Select--multi has-value is-clearable is-searchable ${styles.draggedElement}`}
                       pressDelay={200}>
      {children}
    
  );
  const values = valueTransformer(value);
  const SortableMultiValue = SortableElement(components.MultiValue);
  const Item = (props) => {
    // eslint-disable-next-line react/prop-types
    const index = findIndex(value, v => v.field === props.data.value);
    return ;
  };
  const _components = {
    MultiValueLabel: valueComponent,
    MultiValue: Item,
    ValueContainer: ValueList,
  };
  return (
    <select value="{values}"></select>

);
};

const MultiValueLabel = (props) => (
    
        <img alt="{`Avatar" src="{`/profile/${props.data.value}.jpg`}">
        {props.children}
    
);

const MultiValue = components.MultiValue;

export const SelectUsers = ({
    isMulti = true,
    className = "",
    ...props
}: {
    isMulti?: boolean;
    name: string;
    className?: string;
    [key: string]: any;
}) =&gt; {
    const [, meta, helpers] = useField(props);
    const { value } = meta;
    const { setValue } = helpers;

    const { data } = useBetterQuery&gt;(