React/HTML: onMouseDown does not fire until after the mouse is released

EDIT: possibly a dupe of this: How can I make Mousedown/Mouseup trigger on mobile devices?

I am losing my mind trying to troubleshoot this extremely bizarre behavior.

In this setup, “onMouseDown” will not appear in the log until after I release the mouse. I am on Chrome with Linux Mint.

EDIT: Here’s a huge clue as to what’s going on that I just discovered. This is only happening when I go into the Chrome dev tools and click on “toggle device toolbar” which puts the screen into mobile mode.

Code:

  useEffect(() => {
    const onMouseUp = () => {
      console.log('onMouseUp')
    }

    const onMouseDown = () => {
      console.log('onMouseDown')
    }

    window.onmouseup = onMouseUp
    window.onmousedown = onMouseDown

    return () => {
      window.onmouseup = null
      window.onmousedown = null
    }
  }, [])

Does anybody have any insight into this? I am completely at a loss here.