Tengo este código en el componente HomePage y cuando presiono la tecla de flecha hacia abajo/arriba, no sucede nada. Y acabo de darme cuenta de que el controlador de eventos funciona correctamente al presionar las teclas de flecha con ctrl. Busqué por todas partes, pero no encontré nada. ¿Alguien puede ayudar, por favor? Mi navegador es Chrome v.96.+ React versión 17.0.2, nodo v.16.13.1

 const HomePage = () => { const keyPressHandler = (e) => { if (e.repeat) return; if (e.key === "ArrowDown") { window.scrollBy(0, window.innerHeight); } if (e.key === "ArrowUp") { window.scrollBy(0, -window.innerHeight); } }; return ( <Container tabIndex="0" onKeyDown={keyPressHandler}> <div style={{ width: "100%", height: "100vh", backgroundColor: "green" }} /> <div style={{ width: "100%", height: "100vh", backgroundColor: "gray" }} /> <div style={{ width: "100%", height: "100vh", backgroundColor: "red" }} /> </Container> ); };