Multiselect change selected value background dynamically

[azure zinc]

Is this possible?

I have the follow code:

<MultiSelect
  data={[{ value: 'Dangerous', label: 'Dangerous', backgroundColor: '#C92A2A' }]}
  label="Tags"
  placeholder="Select tags"
  rightSection={<IconChevronDown size="1rem" />}
  rightSectionWidth={40}
  searchable
  creatable
  styles={{ value: { backgroundColor: '#C92A2A' } }}
  getCreateLabel={(query) => `+ Create ${query}`}
  onCreate={(query) => {
    const item = { value: query, label: query };
    return item;
  }}
/>         

But i want the styles to be like this: value: { backgroundColor: data.backgroundColor } or something in that order? Is that possible?

[spare thunder]

You can create your own wrapper component with something like:

const selected = props.data.find(item => item.value === props.value);
return (
<MultiSelect
  data={[{ value: 'Dangerous', label: 'Dangerous', backgroundColor: '#C92A2A' }]}
  label="Tags"
  placeholder="Select tags"
  rightSection={<IconChevronDown size="1rem" />}
  rightSectionWidth={40}
  searchable
  creatable
  styles={{ value: { backgroundColor: selected.backgroundColor } }}
  getCreateLabel={(query) => `+ Create ${query}`}
  onCreate={(query) => {
    const item = { value: query, label: query };
    return item;
  }}
/>  )

[azure zinc]

Doesn't work... Then it just sets the background color as the first one, in this case the background color just gets set to "#C92A2A" no matter what the background color is for the rest of the objects in the array

[spare thunder]

Sorry I misunderstood what you are looking for.
You should probably create your own Item component, that will take props color.
https://mantine.dev/core/select/#custom-item-component