React: pass function to component or not

Hi,
I am doing my drum machine front end project. I have a (main) class component that renders functional components. In this project, I believe there are 2 principal events: click and keypress. While it is fairly obvious that the way to handle the click event is to pass a handleclick function to the proper functional component, I am not sure about the keypress event. For me, since the keypress event acts on the whole document, (1) I am keeping it in the (main) class component and (2) I am using “querySelector” to select the audio elements. Are (1) and (2) acceptable React practices? Thanks for reading this through.