它什么也没显示

大家好，我是网络开发领域的大人物，正在努力学习，所以有我的笔

https://codepen.io/amine-ouahioune/pen/eYVxJdL

class App extends React.Component {
  state = {
    keys: ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"]
  };
  render() {
    const { keys } = this.state;
    return (
      <div className="inner-container" id="drum-machine">
        <div id="display">
          {keys.map((key, idx) => (
            <box text={key} key={idx} />
          ))}
        </div>
      </div>
    );
  }
}
const box = (props) => <div className="box">{props.text}</div>;

ReactDOM.render(<App />, document.getElementById("app"));

通常，当我使用地图时，它会显示我显示中的所有字母，为什么它不显示？