Type Element[] is not assignable to type never[] in react-bootstrap-typeahead

Question

I am trying to create a typeahead dropdown in react. Dropdown list will display a list of names. I'm following the single selection example in npm documentation live example

This is my code block.

const [singleSelections, setSingleSelections] = useState([]);

<Form.Group>
    <Form.Label>Selection</Form.Label>
        <Typeahead
            id="basic-typeahead-single"
            labelKey={option => `${option.key}`}
            onChange={selected => setSingleSelections(selected)}                                  
            options={personList.map(p => <option key={p.firstName} value={p.firstName!!}>{p.firstName}</option>)}
                                placeholder="Search Person"
            selected={singleSelections}
                            />                          
</Form.Group>                            

But here I get an error from onChange saying

Argument of type 'Element[]' is not assignable to parameter of type 'SetStateAction<never[]>'

How can I fix this issue. can someone help me

Answer 1

When you write useState([]), you have to tell typescript about the type of "singleSelections" through useState<T>([]). Since you just passed [] as value, typescript evaluates it as never[].

const [singleSelections, setSingleSelections] = useState<TypeOfsingleSelection[]>([])