onKeyDown is only trigger after a click on the element

Question

I work with react and I have a div like this

<div
    className="maskWrapper"
    onWheel={zoomHandler}
    onMouseMove={mouseMoveHandler}
    onMouseDown={mouseDownHandler}
    onMouseUp={mouseUpHandler}
    onKeyDown={keyDownHandler}
    tabIndex="-1"
>

Every events except onKeyDown is triggered as soon as the component is loaded but onKeyDown is only trigger after I clicked on the div.
How to avoid this behaviour and trigger onKeyDown as soon as the component is loaded ?

Thanks

Answer 1

Thanks @Konrad

Doing this worked!

<div
    className="maskWrapper"
    onWheel={zoomHandler}
    onMouseMove={mouseMoveHandler}
    onMouseDown={mouseDownHandler}
    onMouseUp={mouseUpHandler}
    //onKeyDown={keyDownHandler}
    tabIndex="-1"
>
useEffect(() => {
    document.addEventListener("keydown", keyDownHandler);
    return () => document.removeEventListener("keydown", keyDownHandler);
  }, [keyDownHandler]);