For some reason, when hovering over the red div (child) after drag and drop, the onMouseMove event of the blue div (parent) is not triggered in React, but it is triggered in pure HTML.

Example:

Test with HTML: https://codepen.io/JucVictor/pen/bGJXzeE?editors=1111

<div>
    <div
      id="child"
      draggable="true"
      ondragstart="drag(event)"
      style="background-color: red; width: 200px; height: 200px;"
    >
        1. Put me on blue container<br/>
        2. Check console<br/>
        3. Move mouse over containers
    </div>

    <div
      id="newParent"
      ondrop="drop(event)"
      onmousemove="mouseMove(event)"
      ondragover="allowDrop(event)"
      style="background-color: blue; width: 400px; height: 400px;"
    ></div>
</div>

<script>
  function drag(ev) {
    ev.dataTransfer.setData('id', ev.target.id);
  }

  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData('id');
    var element = document.getElementById(data);
    ev.target.appendChild(element);
  }

  function allowDrop(ev) {
    ev.preventDefault();
  }

  function mouseMove(event) {
    console.clear();
    console.log('onMouseMoveDiagram', event.clientX, event.clientY);
  }
</script>

Test with React: https://playcode.io/1861106

export function App(props) {
    return (
        <div>
            <div
                id="child"
                draggable
                onDragStart={(ev) => {
                    ev.dataTransfer.setData('id', ev.currentTarget.id);
                }}
                style={{ backgroundColor: 'red', width: '200px', height: '200px' }}
            >
                1. Put me on blue container
                <br />
                2. Check console
                <br />
                3. Move mouse over containers
            </div>

            <div
                id="newParent"
                onDrop={(ev) => {
                    ev.preventDefault();
                    const data = ev.dataTransfer.getData('id');
                    const element = document.getElementById(data);
                    ev.currentTarget.appendChild(element);
                }}
                onMouseMove={(event) => {
                    console.clear();
                    console.log('onMouseMoveDiagram', event.clientX, event.clientY);
                }}
                onDragOver={(ev) => ev.preventDefault()}
                style={{ backgroundColor: 'blue', width: '400px', height: '400px' }}
            ></div>
        </div>
    );
}

Am I forgetting something?