如何使用react使下拉菜单可与键盘上、下箭头键和Enter键一起使用？

import React, { useState } from 'react';

const DropdownMenu = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const menuItems = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  const handleKeyDown = (e) => {
    if (e.key === 'ArrowUp' && selectedIndex > 0) {
      setSelectedIndex(selectedIndex - 1);
    } else if (e.key === 'ArrowDown' && selectedIndex < menuItems.length - 1) {
      setSelectedIndex(selectedIndex + 1);
    } else if (e.key === 'Enter') {
      // 执行选中菜单项的操作，例如触发某个事件或跳转页面
      console.log('Selected:', menuItems[selectedIndex]);
    }
  };

  return (
    <div onKeyDown={handleKeyDown}>
      {menuItems.map((item, index) => (
        <div
          key={index}
          style={{ background: index === selectedIndex ? 'lightblue' : 'white' }}
        >
          {item}
        </div>
      ))}
    </div>
  );
};

export default DropdownMenu;