I don’t get the drop event to work, and every suggestion I got from googling is to use preventDefault / preventPropagation, but that is not doing it.

  const handleDragLeave = (e) => {
        // e.stopPropogation()
        // e.preventDefault()
        console.log("handleDragLeave");
        console.log(e.target);
        // Bring the endzone back to normal, maybe?
    };
    const handleDragOver = (e) => {
        // e.stopPropogation()
        // e.preventDefault()
        console.log("handleDragOver");
        // Turn the endzone red, perhaps?
    };
    const handleDragEnter = (e) => {
        // e.stopPropogation()
        // e.preventDefault()
        console.log("handleDragEnter");
        // Play a little sound, possibly?
    };
    const handleDrop = (e) => {

        // e.stopPropagation();
        e.preventDefault();
        console.log("handleDrop");
        alert("dropped")
        // Add a football image to the endzone, initiate a file upload,
        // steal the user's credit card
    };

            return(    
 <div
                    onDrop={(e) => handleDrop(e)}
                    onDragOver={(e) => handleDragOver(e)}
                    onDragLeave={(e) => handleDragLeave(e)}
                    onDragEnter={(e) => handleDragEnter(e)}
                > <p> DIES IST EINE TERST ZONE</p></div>)

The formatting is a little bit weird.

The drag:

    const handleDrag = (e) => {
        console.log("drag");
        console.log(e);
    }
return (
        <div >
            <div type="button" draggable="true" onDragStart={(e) => handleDrag(e, index)} 
             className="col-6 btn">Drag</div>
             </div>
        </div>)

Can someone tell me what I have to do to get it to work?