useEffect(() => {
    document.addEventListener("dragend", () => {
      console.log("end");
    });
    document.addEventListener("mouseleave", () => {
      console.log("hello");
    });
  }, []);

Why is it that after I drag an item, the mouseleave event is no longer being listened to?

  <div
    id="draggable"
    draggable
    onDragLeave={(event) => {
      console.log("mouseleave");
      event.preventDefault();
    }}
    onDragEnd={(event) => {
      console.log("onDragEnd");
      event.preventDefault();
    }}
  >
    Drag me!
  </div>