React-select correct onchange value type

Question

I have basic select component like this.

import { Controller } from "react-hook-form";
import Select, { StylesConfig } from "react-select";
//..

const [universe, setUniverse] = useState<SetStateAction<TOption | unknown>>(null);

<Controller
    name="universe_id"
    control={control} // this control is imported from react-hook-form nothing special
    rules={{ required: true }}
    render={({ field }) => (
        <Select
            {...field}
            value={universe}
            onChange={handleUniverseChange}
            options={universeOptions}
            styles={selectStyles as StylesConfig}
        />
    )}
/>

And TOption type

export type TOption = {
  label: string | number;
  value: string | number;
};

Problem is that I can't set correct type for change handler value.

const handleUniverseChange = (item: unknown ) => {
    setUniverse(item);
    setValue("universe_id", item.value); // object type is unknown
};

Try to use TOption type for item also does not work.

const handleUniverseChange = (item: TOption) => {

Getting error in this line

<Select
    {...field}
    value={universe}
    onChange={handleUniverseChange}

Error: Type "(item: TOption) => void" can't assign for "(newValue: unknown, actionMeta: ActionMeta) => void".

Answer 1

Fixed with type assertions and additional variable.

const handleUniverseChange = (item: TOption | unknown) => {
    setUniverse(item as TOption);
    const val = item as TOption;
    setValue("universe_id", val.value as string);
};

Answer 2

The options should be in array and not in object. Kindly try the below code,

export type TOption = [{
  label: string | number;
  value: string | number;
}];

Answer 3

I think the problem here lies with useState generic - unknown "dominating" TOption. If SetStateAction<...> is intended, change the unknown to null:

const [universe, setUniverse] = useState<SetStateAction<TOption | null>>(null);

if SetStateAction<...> is not intended:

const [universe, setUniverse] = useState<TOption | null>(null);

and then try

const handleUniverseChange = (item: TOption) => {
   ...
}

EDIT

The type is inferred from the passed options so make sure it is clear that your passed options are of the desired type (f.ex. TOption[])

export type TOption = {
    label: string | number;
    value: string | number;
};

const universes: TOption[] = [
    { label: "test", value: 0 },
    { label: "test2", value: 1 },
];

const App = () => {
    const handleChange = (item: TOption | null) => {
        if (!item) return;

        console.log(item); // {label: ..., value: ...}
    };

    return <Select onChange={handleChange} options={universes} />;
};

Answer 4

The SetStateAction is not required here.

Change the handler to

  const handleUniverseChange = (item: TOption | null )  => {}

Having said that, TOption feels very wrong. You are making your life difficult by saying label and value can be string | number.

type TOption = {
  label: string | number;
  value: string | number;
};

Also, i recommend you assign a default value instead of null here

  const [universe, setUniverse] = useState<TOption | null>(null);

Having nulls floating around is never a good idea.