react bootstrap typeahead selected type can only be an array and typeaheadjs gives a warning that Im passing an array?

Question

Warning: [react-bootstrap-typeahead] You are passing multiple options to theselectedprop of a Typeahead in single-select mode. This may lead to unexpected behaviors or errors.

so this is the error I get when I try to use react-bootstrap-typeahead. The Typeahead component expects selected to be an Option[] array type and I pass it like that. This is the code:

  const [selected, setSelected] = useState<Option[]>([]);
  const options = ["option1", "option2"]

  const handleChange = (opt: Option[]) => {
    setSelected(opt);
    }

<Typeahead
        onChange={handleChange}
        options={options}
        selected={selected}

      />

What am I doing wrong? I don't get it. I can't pass single value due to ts type requirements.

Answer 1

The typeahead expects selected to receive an array of options for both single- and multi-select mode. For single-selection, the array should contain one or zero selections.

You're seeing the warning because the array you're passing in contains more than one selection in single-select mode. The component warns you about this because it's unexpected and the typeahead can't do anything with the extra selections.