Getting a typescript error in react-select

Question

i am getting a typescript type error in react-select options parameter in the componenet,

ERROR: Type 'readonly optionType[] | undefined' is not assignable to type 'OptionsOrGroups<string, GroupBase> | undefined'. Type 'readonly optionType[]' is not assignable to type 'readonly (string | GroupBase)[]'. Type 'optionType' is not assignable to type 'string | GroupBase'. Property 'options' is missing in type 'optionType' but required in type 'GroupBase'

type optionType = { readonly label: string; readonly value: string };

const [options, setOptions] = useState<readonly optionType[]>();


  useEffect(() => {
    const createOption = (label: string,value: string) => ({
  label,
  value ,
});
    if(userDetails){
    const tempArray: optionType[]=[];
    const tempVariableCrew = userDetails?.startList.tables.filter((item) => {
      if (item?.tableCode === "DFDEQUI") {
        
         tempArray.push(createOption(item.itemValue, item.itemCode))
        
        return item;
      }
    });
    setOptions(tempArray);
    setDfdCrew(() => tempVariableCrew);
  }
}, [userDetails]);


------------------------------------------
return(
<>
 <CreatableSelect
        isClearable
        onChange={(newValue) => setValue(newValue as string)}
        onCreateOption={handleCreate}
        **options**={options}  **//error here**
        value={value}
        classNames={{ option: () => "hover:bg-gray-200 rounded-md" }}
      />
</>
)

i tried looking into in but have not found anything substancial.

Answer 1

On your CreatableSelect component the options prop expects a value of type OptionsOrGroups<string, GroupBase> if provided, but you pass it your custom optionType[]to it instead, so if you replace your useState<readonly OptionType[]> by useState<OptionsOrGroups<string, GroupBase>>, it should work correctly, and you will see which properties are missing. If you still want to use your custom type for option you may want to look at the definition of the OptionOrGroups type to see what doesn't match with yours.