Drag&Drop Image setData is ignored

I'm implementing a drag&drop grid for some images, that can have a rotation, and when I drop them on the grid I need both the image URL and the rotation. Instead chrome always gives me the Image URL and nothing else. I also tried to do this without setting a setData and it still works giving me the image URL even though I didn't set any data to transfer. I also tried setting different setData types (using text/plain and uri/list, in the first putting the rotation and in the second the URL), but it always just gives me the image URL. I'm using react on the frontend:

DragImage component code:

import React from 'react';

function DragImg({src}) {
    return <img src={src} draggable="true" 
                onClick={(e) => {rotate(e)}} 
                data-rotation="0"
                onDrag={(e) => {onDragStartHandler(e)}} 
                onDragEnd={(e) => {onDragEndHandler(e)}}
            />
}

function rotate(e) {
    let rot  = parseInt(e.target.dataset.rotation) + 1;
    if(rot === 4) rot = 0;
    e.target.style.transform = `rotate(${rot * 90}deg)`;
    e.target.dataset.rotation = rot.toString();
}

function onDragStartHandler(e) {
    e.preventDefault();
    e.dataTransfer.setData("text/plain", e.target.attributes["src"].value + e.dataset.rotation);
    e.dataTransfer.dropEffect = "copy";
    e.dataTransfer.effectAllowed = "copy";
    e.target.style.opacity = "0.4";
}

function onDragEndHandler(e) {
    e.preventDefault();
    e.target.style.opacity = "1";
}

export default DragImg;

and the DragGrid code:

    function onDragLeaveHandler(e) {
    e.preventDefault();
}

function onDragOverHandler(e) {
    e.preventDefault();
}
function onDropHandler(e) {
    e.preventDefault();
    console.log(e.dataTransfer.getData("text/plain")) // ----> Always gives me http://localhost:3000/<image name>
    const arr = imgToArray(e.dataTransfer.getData("text/plain"));
    e = e.target;
    placeArray(e,arr,e.parentElement.parentElement);
}