What is the difference between using dropEffect and effectAllowed properties?

Question

The MDN Web Docs specifies what the two properties do:

effectAllowed

The Datatransfer.effectAllowed property specifies the allowed effect for a drag operation. The copy operation is used to indicate that the data being dragged will be copied from its current location to the drop location. The drive operation is used to indicate that the data being dragged will be moved and the link operation is used to indicate that some form of relationship or connection will be created between the source and drop locations. Source

dropEffect

The Datatransfer.dropEffect property controls the feedback (usually visual) the user receives during a drag-and-drop operation. This will affect the cursor displayed when dragging. For example, when the user hovers over a target element, the browser cursor can indicate what type of operation will occur. Source

But what happens is that if I use as many values as move, copy, link, none that both properties have, they will return the same result which is to change the cursor to a given icon or not allow the drop of the draggable element depending on the set value.

In the example below it makes me use effectAllowed or dropEffect with the defined value for none the result will be the same one in which the draggable element cannot be discarded:

Example:

let drag = document.querySelector("#drag");
let drop = document.querySelector("#drop");

drag.ondragstart = (event) => {
  event.dataTransfer.effectAllowed = "none"; // Comente essa e habilita a outra.
  event.dataTransfer.setData("example", event.target.id);
}

drop.ondragover = (event) => {
  // event.dataTransfer.dropEffect = "none";
  event.preventDefault();
}

drop.ondrop = (event) => {
  let data = event.dataTransfer.getData("example");
  event.target.appendChild(document.querySelector(`#${data}`));
}

#drag,
#drop {
  width: 100px;
  height: 100px;
}

#drag {
  background: #dddddd;
}

#drop {
  border: 1px solid #000000;
  position: absolute;
  left: 120px;
  top: 9px;
}

<div id="drag" draggable="true"></div>
<div id="drop"></div>

What would be the difference between using both properties mentioned being that using either the result is the same?