React事件监听器不能像我期望的那样工作

以下是我的代码:

import { useState } from 'react'

function App() {
  const [key, setKey] = useState()
  document.addEventListener('keydown', (e) => {
       setKey(e.key)
  })
  return (
    <>
     <div>{key}</div>

     {console.log('hello world')}
    </>
  );
}

export default App;

当我按下键盘上的任何一个键时，它应该将键设置为我按下的任何一个键，并在控制台记录 "hello world"。设置键的部分工作正常，但记录的部分我不明白。