Javascript: Drag’n’drop starts with not-allowed cursor at the droptarget place: instantly not-allowed cursor flickers at the start of dragging

Drag’n’drop starts with not-allowed cursor at the droptarget place: instantly not-allowed cursor flickers at the start of dragging.

Please try this code and try dragging the white div:

<div id="droptarget">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>


<style>
#draggable {
  text-align: center;
  background: white;
  height: 200px;
}

#droptarget {
  width: 500px;
  height: 500px;
  background: blueviolet;
  margin: 10px;
  padding: 20px;
}
</style>


<script>
const target = document.getElementById("droptarget")
target.addEventListener("dragover", (event) => {
  event.preventDefault()
})
target.addEventListener("dragenter", (event) => {
  event.preventDefault()
})
</script>

The not-allowed cursor should not be displayed, but it is displayed.