MouseDown doesn't get capture immediately after pressing Shift key with some alphabet

Question

I was trying to create a drawing app using react and canvas. For that, I needed to capture KeyDown and MouseDown events on canvas for cursor coordinates. So, I created a handler on Keydown that will select a command like a circle, etc... So, the key used to enter the command key is SHIFT+CTRL. But, when I enter SHIFT+CTRL and then any normal key, the canvas doesn't capture the MouseDown event for some seconds. The same is happening when I am using SHIFT+Alphabet.

I also checked whether any component is being rendered during the process. But it wasn't. I haven't used stopPropagation or preventDefault on any of the event handlers.

So, can someone help me out?

const DrawingCanvas = () => {
  const canvasRef = useRef();

  useEffect(() => {
    const el = canvasRef.current;
    el.focus();
    el.height = window.innerHeight;
    el.width = window.innerWidth;
    el.style.cursor = 'crosshair';
    canvas.el = el;
    canvas.ctx = el.getContext('2d');
    window.addEventListener('keydown', onKeyDown);
    window.addEventListener('keyup', onKeyUp);
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('keydown', onKeyDown);
      window.removeEventListener('keyup', onKeyUp);
      window.removeEventListener('resize', onResize);
    }
  }, []);

  return (
    <div className='root-canvas'>
      <canvas
        className='drawing-canvas position-absolute'
        onMouseMove={onMouseMove}
        onMouseDown={onMouseDown}
        onMouseUp={onMouseUp}
        ref={canvasRef}
      />
    </div>
  )
}

Edit: After further debugging, I found that the problem is producing because of alphabet keys (not because of SHIFT key). Whenever I pressed any Alphabet key canvas won't capture MouseDown event.