Javascript cannot manually dispatch mouse event of react-rendered buttons

Question

I have two buttons, one rendered by React and one by plain HTML, which have the same handlers for mousedown and mouseup. Though they works correctly upon clicking, when I try to manually dispatch mousedown and mouseup events manually (by .dispatch(new MouseEvent)), only the HTML one receives the event, while the React one does not. There are no errors thrown in the process, and dispatching events on either button returns true.

I have made a simple CodePen to illustrate my problem.

There are two buttons in the pen, one rendered by React and one by plain HTML, the mousedown and mouseup events of which are set to have simple visual effects. Manual dispatching can be done by pressing spacebar.

My environment is the latest Vivaldi with JavaScript engine V8 7.1.302.31

Expecting the React button to receive the dispatched event and behave just like being clicked as well.

Answer 1

Inspired by this question

I have to set bubbles: true upon constructing the event. An example on MDN uses the following three options

new MouseEvent("mousedown", {
  bubbles: true,
  cancelable: true,
  view: window
})