Fluent UI - Combo box - Problem with selectedOptions

Question

I am working with Fluent UI on my React js + SPFx project and found a problem.

In my ComboBox component I am trying to set property for selectedOptions and onChange I want to write it to console.

import * as React from 'react';

import {

ComboBox,

IComboBoxOption,

IComboBox,

IComboBoxStyles,

} from '@fluentui/react';

//import { IDropdownOption } from '../IOrganizacnyPoriadokProps';

export interface ComboBoxProps {

props: any;

onValueChange: (selectedOptions: IComboBoxOption[]) => void;

}

export const ComboBoxField: React.FC<ComboBoxProps> = ({ props, onValueChange }): JSX.Element => {

//const [selectedValues, setSelectedValues] = React.useState<IDropdownOption[]>([]);

const handleChange =

(event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string, selectedOptions?: IComboBoxOption[]): void => {

if (option) {

onValueChange(selectedOptions);

}

};

const comboBoxStyles: Partial<IComboBoxStyles> = { root: { width: 728 } };

return (

<ComboBox

multiSelect

selectedKey={props.selectedKeys}

label={props.label}

allowFreeform={props.allowFreeform || false}

options={props.options !== undefined ? props.options : []}

onChange={handleChange}

styles={props.style ? props.style : comboBoxStyles}

/>

);

};

export default ComboBoxField;

Component where I use ComboBox ->

const [klucoveSlova, setKlucoveSlova] = React.useState<IMultiDropdownPropTypes>({

label: "Kľúčové slová", options: [], required: false, disabled: false, placeholder: "Vyberte možnosť", selected: []

});

const setKlucoveSlovaValueChange = (selectedOptions: IDropdownOption[]): void => {

setKlucoveSlova({...klucoveSlova, selected: selectedOptions});

console.log(selectedOptions);

};

return (

<ComboBoxField props={klucoveSlova} onValueChange={setKlucoveSlovaValueChange} />

)

PropTypes I am using ->

export interface IDropdownOption {

key: number | string;

text: string;

active?: boolean;

//selected?: boolean;

}

export interface IMultiDropdownPropTypes {

options: IDropdownOption[];

label: string;

placeholder?: string;

//values?: IDropdownOption[];

error?: string;

required?: boolean;

disabled?: boolean;

styles?: any;

selected?: IDropdownOption[];

}

Hovewer I still can console.log only undefined (after selection from combobox), if I console.log option it show selected option (but only last selected).

Any suggestions ?