Configure SelectMenu with Typescript

[kadoshmt]

Hi guys. How can I configure the props onChange() and value element SelectMenu to works with Typescript.

I try this many ways, but is not working...

const [fruits, setFruits] = useState();
....
             <SelectMenu
                  hasTags
                  isMultiSelect
                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                    setFruits(e.target.value);
                  }}
                  options={[
                    { key: 1, label: 'Apples', value: 'apples' },
                    { key: 2, label: 'Bananas', value: 'bananas' },
                    { key: 3, label: 'Oranges', value: 'oranges' },
                    { key: 4, label: 'Mangos', value: 'mangos' },
                  ]}
                  placeholder="Select a fruit..."
                  value={fruits}
               />

Error:

TypeScript error in /mnt/c/Users/kados/Documents/Dev/projetos/harpa-crista/admin/src/pages/Hinos/Editar/index.tsx(127,19):
Type '(e: React.ChangeEvent<HTMLSelectElement>) => void' is not assignable to type '((event: FormEvent<any>) => void) & ((newOptions: "" | Option | Option[], option: "" | Option) => void)'.
  Type '(e: React.ChangeEvent<HTMLSelectElement>) => void' is not assignable to type '(newOptions: "" | Option | Option[], option: "" | Option) => void'.
    Types of parameters 'e' and 'newOptions' are incompatible.
      Type '"" | Option | Option[]' is not assignable to type 'ChangeEvent<HTMLSelectElement>'.
        Type '""' is not assignable to type 'ChangeEvent<HTMLSelectElement>'.  TS2322

    125 |                   hasTags
    126 |                   isMultiSelect
  > 127 |                   onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
        |                   ^
    128 |                     setFruits(e.target.value);
    129 |                   }}
    130 |                   options={[

[Will-Mann-16]

I'm having the same issue, as I want to get the value on the onChange event. There looks like two different types being used, either the form event or the 'Option' type. Is the 'Option' type exported?

[Will-Mann-16]

Managed to have a rudamentary fix - not the best TS but it works:

type Option = { key: number | string; label: string; value: any };

<SelectMenu
      options={options}
      isMultiSelect
      hasTags
      onChange={(options: any) => {
        const opts = options as Option[];
        setFruits(opts);
      }}
      placeholder='Select a fruit...'
      value={fruits}
 />