Can't change not-allowed cursor when dragging on div borders

Question

Whenever I'm dragging a div over another one, I see the not-allowed cursor appearing and flashing when passing over the borders of another div, even if it has no borders specified. The expected behaviour is keeping to see the default cursor. If I would drag over very slowly on the borders, the cursor will behave correctly.

Happening on Windows 11 + Chrome 123.0.6312.123

      const target = document.getElementById("app");
      target.addEventListener("dragover", (event) => {
        event.preventDefault();
      });

      #app {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      .dragme {
        height: 100px;
        width: 100px;
        background-color: red;
      }

      .another {
        margin-top: 10px;
        height: 100px;
        width: 100px;
        background-color: lightblue;
      }

    <div id="app">
      <div class="dragme" draggable="true">DragMe!</div>
      <div class="another"></div>
    </div>