react-select不会自动滚动到所选选项

import React, { useRef } from 'react';
import Select from 'react-select';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
  // 其他选项...
];

const MySelect = () => {
  const selectRef = useRef(null);

  const handleChange = (selectedOption) => {
    // 获取所选选项的位置信息
    const selectedOptionIndex = options.findIndex(option => option.value === selectedOption.value);
    const menuList = selectRef.current.select.selectMenuListRef;

    if (selectedOptionIndex !== -1 && menuList) {
      const menuItems = menuList.querySelectorAll('.react-select__menu-item');
      const selectedItem = menuItems[selectedOptionIndex];

      // 判断所选选项是否超出可见区域
      if (selectedItem.offsetTop < menuList.scrollTop || selectedItem.offsetTop + selectedItem.offsetHeight > menuList.scrollTop + menuList.offsetHeight) {
        // 滚动到可见区域
        selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    }
  };

  return (
    <Select
      ref={selectRef}
      options={options}
      onChange={handleChange}
    />
  );
};

export default MySelect;