React-select scrollintoView does not scroll the selected value

Question

I am using react-select3.2.0. When I open my select box and select a option. And then I open my select dropdown again then selected value comes into view. But the problem comes when value of the dropdown comes from the props and not manually selected by opening dropdown. Then when I open the drop down it does not scroll into view the selected value. I have also tried menuScrollIntoView={true} props of react-select but my problem persists. My Select component is as follow;

import Select from "react-select";
.
.
.
    <Select 
      options={props.options}
      // isLoading={props.options ? true: false}
      onMenuOpen={onOpen}
      value={props.defaultOption}
      onChange={(event: any) => props.onSelect(event)}
      className ={"MyDropdown"}
      classNamePrefix={"MyDropdown"}
      // menuShouldScrollIntoView={true}
      isDisabled={props.isDisabled}
      isSearchable={props.isSearchable}
      >
    </Select>

Answer 1

So I was able to solve this using onMenuOpen() call back function with timeOut as we do not have "MyDropdown__option--is-selected" class at the time when this function is invoked.

My solution is as follows;

//when dropdown is not manually clicked then it does not scroll into view
onMenuOpen = () => {
  setTimeout(()=>{
    const selectedEl = document.getElementsByClassName("MyDropdown__option--is-selected")[0];
    if(selectedEl){
      selectedEl.scrollIntoView({behavior:'smooth', block:'nearest', inline: 'start'});
    }
  },15);
};

render(){
const {defaultOption, options} = this.props;

  return (
    <Select 
      options={options}
      value={defaultOption}
      onMenuOpen={this.onMenuOpen}
      onChange={(item: IDropdownOptions) => this.props.onSelect(item)}
      className ={"MyDropdown"}
      classNamePrefix={"MyDropdown"}
      isDisabled={this.props.isDisabled}
      isSearchable={this.props.isSearchable}
      >
    </Select>
  );
}