dataTransfer.dropEffect doesn't work in dragenter event handler

Question

I want to figure out whether dataTransfer.dropEffect should work both in dragover and dragenter event handlers, and why it doesn't work in dragenter.

In this example I set e.dataTransfer.dropEffect to "none" both in dragover and in dragenter event handlers one by one. In case of dragover it works and doesn't allow drop, but when I comment it in dragover and set dropEffect in dragenter, it doesn't work and allows drop.

Although HTML Drag and Drop API documentations states that this can be configured in either of them.

For the dragenter and dragover events, dropEffect will be initialized based on what action the user is requesting. How this is determined is platform specific, but typically the user can press modifier keys such as the alt key to adjust the desired action. Within event handlers for dragenter and dragover events, dropEffect should be modified if a different action is desired than the action that the user is requesting.

The thing is that dragover event fires incomparably more often, so I am thinking the function is better to be called in dragenter event handler rather than in dragover.

const target = document.querySelector("main");

target.addEventListener("dragenter", e => {
  e.dataTransfer.dropEffect = "none";
});

target.addEventListener("dragover", e => {
  e.preventDefault();
  // e.dataTransfer.dropEffect = "none";
});

.dropTarget {
  width: 400px;
  aspect-ratio: 1;
  background-color: teal;
  margin: 10px 0;
}

.draggable {
  width: 400px;
  height: 40px;
  background-color: lightgreen;
}

<main class="dropTarget"></main>
<div class="draggable" draggable="true"></div>

I tried to call the same operation in both dragover and dragenter event handlers, to understand the issue. And HTML Drag and Drop API documentation didn't help.

Thank you in advance for your ideas!