如何在react组件中使用向上键和向下键切换div焦点(typescript + css)

import React, { Component, createRef } from 'react';
import './styles.css';

class MyComponent extends Component {
  state = {
    currentIndex: 0
  };

  divRefs = [];

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyDown);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyDown);
  }

  handleKeyDown = (event) => {
    const { currentIndex } = this.state;
    const { key } = event;

    if (key === 'ArrowUp') {
      this.setState({ currentIndex: Math.max(currentIndex - 1, 0) });
    } else if (key === 'ArrowDown') {
      this.setState({ currentIndex: Math.min(currentIndex + 1, this.divRefs.length - 1) });
    }
  };

  render() {
    const { currentIndex } = this.state;

    return (
      <div>
        {data.map((item, index) => (
          <div
            key={index}
            ref={(ref) => (this.divRefs[index] = ref)}
            className={currentIndex === index ? 'focused' : ''}
          >
            {item}
          </div>
        ))}
      </div>
    );
  }
}

export default MyComponent;