如何在react中使用箭头键在列表中导航？

import React, { useState } from 'react';

const ListNavigation = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  const handleKeyDown = (event) => {
    const { key } = event;
    let newIndex;

    if (key === 'ArrowUp' && selectedIndex > 0) {
      newIndex = selectedIndex - 1;
    } else if (key === 'ArrowDown' && selectedIndex < items.length - 1) {
      newIndex = selectedIndex + 1;
    }

    if (newIndex !== undefined) {
      setSelectedIndex(newIndex);
    }
  };

  return (
    <div>
      {items.map((item, index) => (
        <div
          key={index}
          tabIndex={0}
          onKeyDown={handleKeyDown}
          style={{
            backgroundColor: index === selectedIndex ? 'lightblue' : 'white',
            padding: '10px',
            margin: '5px',
            cursor: 'pointer',
          }}
        >
          {item}
        </div>
      ))}
    </div>
  );
};

export default ListNavigation;