How can I get onKeyDown event to work in Next.js/React

I'm building a website using Next.js, and currently I'm trying to get a simple function to run when pressing a key. The problem I'm having is that the onKeyDown event isn't being triggered like I expected. My code is as follows: <main onKeyDown={e => console.log("Key pressed")}>

Currently it's placed in the "main" element, which is the top root element of this component. I've tried placing the onKeyDown event in many of the other elements as well, without luck. I'm not sure if it's the placement which causes issues or my lack of understanding of how to use this event. Any help would be appreciated.

As for now I simply want it to write something in the console so that I can see that it triggers. I've tried using onKeyPress instead, as well as assigning a function to the event instead of a lambda expression, which shouldn't make a difference.