Arrow Key Scrolling Not Working in react-select with react-window

import React, { useRef } from "react";
import Select, { components } from "react-select";
import { FixedSizeList as List } from "react-window";

// Sample options for the dropdown
const options = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
  // Add more options to test scrolling and virtualization
];

// Custom MenuList component using react-window
const MenuList = (props) => {
  const { options, children, maxHeight, getValue } = props;
  const height = 35; // Height of each option
  const [value] = getValue();
  const initialOffset = options.findIndex(
    (option) => option.value === value?.value
  );

  // Reference for list to manage scrolling
  const listRef = useRef();

  return (
    <List
      height={maxHeight} // Set the height of the dropdown
      itemCount={children.length} // Number of items to display
      itemSize={height} // Height of each item
      initialScrollOffset={initialOffset * height} // Scroll to the selected value
      ref={listRef}
    >
      {({ index, style }) => (
        <div style={style}>
          {children[index]} {/* Render each option */}
        </div>
      )}
    </List>
  );
};

const CustomSelect = () => (
  <Select
    options={options} // Pass your options
    components={{ MenuList }} // Override the MenuList component
  />
);

export default CustomSelect;


Try this way.