Typescript for OptionType is not accepting React component

The code will work as expected, but typescript ruqires me to have labels as strings.

Type '{ value: string; label: Element; }[]' is not assignable to type 'readonly ({ value: string; label: string; } | GroupBase<{ value: string; label: string; }>)[]'.ts(2322)
Select.d.ts(180, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & Omit<Pick<Props<{ value: string; label: string; }, false, GroupBase<{ value: string; label: string; }>>, "value" | "form" | ... 28 more ... | "theme"> & Partial<...> & Partial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'

 var options = [ {value: 0, label: () => (<span>{"All"}</span>)}],

     <Select
            ...
                    options={options}
           ...
                  />

You may also find the online Babel tool quite helpful if you wish to use ES6/ES7 syntax not yet supported by the browser you are using.

[wegry]

@Methuselah96 here’s a repro with react-select@5.3.1.

https://codesandbox.io/s/hopeful-chaum-v385xj and typescript@4.4.2.

Just noticed that the value prop has to be the same shape as options elements. If value’s a string, then options must be a string[]. If options is {value: string; label: string}[], then value must be {value: string; label: string}.

[Rall3n]

Additionally if you want to format your options based on provided data, you should either style them using the styling framework or use the formatOptionLabel prop to customize the JSX of the label.