Not possible to selected multiple options in case of object as value

[thiagodemoura]

I was trying to use object as value instead of primitive ones.
In this case the component does not allow to selected multiples options.
Is this a the component limitation? Or by designt only primitive values could be used?

---

Sample code

import React from "react";

import AsyncSelect from "react-select/async";

interface Colours {
readonly data: string;
readonly text: string;
readonly color: string;
readonly isFixed?: boolean;
readonly isDisabled?: boolean;
}
const colourOptions: readonly Colours[] = [
{ data: "ocean", text: "Ocean", color: "#00B8D9", isFixed: true },
{ data: "blue", text: "Blue", color: "#0052CC", isDisabled: true },
{ data: "purple", text: "Purple", color: "#5243AA" },
{ data: "red", text: "Red", color: "#FF5630", isFixed: true },
{ data: "orange", text: "Orange", color: "#FF8B00" },
{ data: "yellow", text: "Yellow", color: "#FFC400" },
{ data: "green", text: "Green", color: "#36B37E" },
{ data: "forest", text: "Forest", color: "#00875A" },
{ data: "slate", text: "Slate", color: "#253858" },
{ data: "silver", text: "Silver", color: "#666666" },
];

const filterColors = (inputValue: string) => {
return colourOptions.filter((i) =>
i.text.toLowerCase().includes(inputValue.toLowerCase())
);
};

const promiseOptions = (inputValue: string) =>
new Promise<Colours[]>((resolve) => {
setTimeout(() => {
resolve(filterColors(inputValue));
}, 1000);
});

export default () => {
return (
<AsyncSelect
isMulti
name="colors"
cacheOptions
defaultOptions
loadOptions={promiseOptions}
getOptionLabel={(option) => {
return option.text;
}}
/>
);
};