react Событие нажатия клавиши где угодно в документе, Пример обработчика keydown

Можно написать обертку вида:

import { PropsWithChildren, useEffect } from 'react';

export interface ButtonDownListenerProps extends PropsWithChildren<{}> {
  handler: (event: KeyboardEvent) => void;
}

export function ButtonDownListener({ children, handler }: ButtonDownListenerProps) {
  useEffect(() => {
    document.addEventListener<'keydown'>('keydown', handler, false);

    return () => {
      document.removeEventListener<'keydown'>('keydown', handler, false);
    };
  }, [handler]);

  return <>{children}</>;
}

И использовать ее далее:

// ...........
 const handleListKeyDown = useCallback( 
    (event: KeyboardEvent) => { // какой-то обработчик
      if (event.key === 'Escape' && onClose) {
        event.preventDefault();
        console.log('Escape!!');
      }
    },
    [onClose],
  );

return (
<ButtonDownListener handler={handleListKeyDown}>
        // что-то внутри
</ButtonDownListener>
)