React:如何使用箭头键转移焦点？(TreeView)

import React, { Component } from 'react';

class TreeView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      focusedElement: null
    };
  }

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

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

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

    if (event.key === 'ArrowUp') {
      // 处理向上箭头键
      event.preventDefault();
      // 更新focusedElement的值
      // ...
    } else if (event.key === 'ArrowDown') {
      // 处理向下箭头键
      event.preventDefault();
      // 更新focusedElement的值
      // ...
    }
  }

  render() {
    return (
      <div>
        <button ref={(element) => { this.button1 = element; }}>按钮1</button>
        <button ref={(element) => { this.button2 = element; }}>按钮2</button>
        <input ref={(element) => { this.input = element; }} />
      </div>
    );
  }
}

export default TreeView;