Office-ui-fabric React JS Dropdown Select Index

Question

I'm using Office-ui-fabric in React-JS. I'm working on a Dropdown, and the values inside the dropdown change. My problem is that I cannot control the Selected Index manually. Every time the values change the last selected index is addressed. ie:
Dog
Cat
Horse (selected)

I change the array:
Dog
Cat

Now there is no selection whatsoever because it tries to address the 3rd row.

I searched for some answers but all I got is to change the 'selected' value of the row from FALSE to TRUE. But I don't have one, and if I add it, it still doesn't work

import {Dropdown} from 'office-ui-fabric-react/lib/Dropdown'
<Dropdown options={optionsArray} onChanged={(val)=> onChangeProperty(id, val.key)}>

My optionsArray is:

cosnt optionsArray =[
{key: '1', text: "Cat"},
{key: '2', text: "Dog"},
{key: '3', text: "Horse"},
]

Answer 1

use selectedKey to select the vale in Dropdown. To do that you need to declare useState as below:

const [option, setOption] = useState('');

Then you need to set the value using setOption like

setOption('2'); // 2 is the key for Dog in your example

finally in UI, you need to use selectedKey props

<Dropdown selectedKey={option} options={optionsArray} onChanged={(val)=> onChangeProperty(id, val.key)}>