Fluent UI dropdown selection - reactjs

Question

I am using fluent ui dropdown So, when i click on dropdown the first option is selected by default without selecting. If i click on dropdown and without selecting if i click somewhere on the page nothing should be selected and dropdown should be closed is what i want. Please help me with this.
Below is the code which iam using:
<Dropdown
disabled={this.state.HideLocationFilter}
selectedKey={selectedItem1 ? selectedItem1.key : undefined}
onChange={this._onChange1}
placeholder="Location"
options={[
{ key: 'UK', text: 'UK' },
{ key: 'Hyderabad', text: 'Hyderabad' },
{ key: 'Bangalore', text: 'Bangalore' },
{ key: 'Ahmedabad', text: 'Ahmedabad' },
{ key: 'Pune', text: 'Pune' },
{ key: 'Mumbai', text: 'Mumbai' },
{ key: 'USA', text: 'USA' }
]}
styles={dropdownStyles}
/>
private _onChange1 = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
console.log(`Selection change: ${item.text} ${item.selected ? 'selected' : 'unselected'}`);
if(item.selected == true)
{
this.setState({ selectedItem1: item });
}
};
Initially it is like this:location dropdown
When i click on dropdown it is selecting by default(find picture of the same):dropdown when clicked

Answer 1

There is an issue currently that when you press on the default option and click outside of the browser window and then click back in the dropdown selects the first option.
The solution for this is to looked at the type of event and short circuit the onChange if the type === 'focus':
const onChange = useCallback((e, value) => {
if (e.type === 'focus') return
// do if not type 'focus'
}, [])
In my situation I needed also to trigger a re-render and augmented the above as such:
const onChange = useCallback((callback) => (e, value) => {
if (e.type === 'focus') return callback()
// do if not type 'focus'
}, [])
Then when calling it:
<Dropdown
{...props}
onChange={onChange(() => setOnChangeTriggered(true))}
/>