hoverdivonkeydown.js

const MyComponent = () => {
  const [isMouseOver, setIsMouseOver] = React.useState(undefined);

  // Need to add event listener to entire document
  React.useEffect(() => {
    document.addEventListener('keydown', keyDown);

    // Don't forget to clean up
    return function cleanup() {
      document.removeEventListener('keydown', keyDown);
    }
  });

  function keyDown(e) {
    if (isMouseOver && e.ctrlKey) {
      alert("ctrl key pressed!");
    }
  };

  const mouseOver = (e) => {
    setIsMouseOver(() => true);
  };

  const mouseOut = (e) => {
    setIsMouseOver(() => false);
  };

  const generateDOM = (layoutState) => {
    return (
      <div
        style={{ width: "100%", height: "100%", border: "1px solid black" }}
        // onKeyDown={keyDown}
        // tabIndex="0"
        onMouseOver={mouseOver}
        onMouseOut={mouseOut}
      >
        Hover in this div then press the ctrl key
        <div>
          <small>is mouse over? {isMouseOver ? "yes" : "no"}</small>
        </div>
      </div>
    );
  };

  return generateDOM();
};

ReactDOM.render(<MyComponent />, document.body);