Type 'number' is not assignable to type 'SetStateAction'. - React

Question

I have a SelectInput that let me choose 1, 2 or 3, and below that, I have a MultiSelect (with Mantine library).

I would like to select the number of co-pilots (on the SelectInput), and allow the selected number on the MultiSelect.

Here is my code :

const [maxCopilote, setMaxCopilote] = useState()

<NumberInput
      defaultValue={1}
      max={3}
      min={1}
      required
      placeholder="Number of copilot"
      onChange={(e) => setMaxCopilote(e)}
 />
                                        
<MultiSelect
      data={['Copilote1', 'Copilote2', 'Copilote3']}
      required
      placeholder="Select copilote(s)"
      maxSelectedValues={maxCopilote}
      clearable
/>

With this code, I got the error :

Argument of type 'number | undefined' is not assignable to parameter of type SetStateAction<undefined>.
Type 'number' is not assignable to type 'SetStateAction<undefined>'.  TS2345

How can I get the number I selected, to put it dynamicaly into maxSelectValues ?

Thank you

PS : console.log(e) onChange in the numberInput, log the selected number correctly

Answer 1

Declare a type when using useState

const [maxCopilote, setMaxCopilote] = useState<number | undefined>(1)

Also, you may add a default value