Unable to get the selected value from the React fluent UI dropdown

Question

I am trying to do something extremely simple, something that in JS I can do in a fraction of a second, but that for some reason is not working in the React

I am trying to change the dropdown value and capture the target element in the event, so I could assign it to the state with a certain index (idx)

However, no matter what I do, the event target comes up as undefined. I did already try to apply bind but in that case the event wouldn't fire at all

Please help, thank you in advance

Here is the dropdown

<Dropdown   onChange={event => this.handleRoleChange(event, idx)}
        placeholder="Staff Member Roles"
        options={options}
        styles={dropdownStyles}
       />

Here is handleRoleChange event

    private handleRoleChange(event, idx) {
        alert(idx);
        alert(event.target.value);
    }  

Answer 1

Found an answer

   <Dropdown   onChange={this.handleRoleChange}
         placeholder="Staff Member Roles"
         options={options}
         styles={dropdownStyles}
         id={idx.toString()}
   />

    public handleRoleChange = (event, option, index) => {       
         let idx = parseInt(event.target.id);
         alert(idx);
         alert(option.key);
    }