javascript drag an image after rotation

Question

I'm working on dragging and rotating image on preact and javascript. the problem is, event.offsetX,Y doesn't work propery after I rotate an image. event.LayerX,Y works well, however, they are deprecated.

I tried to use sin, cos, matrix rotation. Is there any methods to solve this problem instead of LayerX,Y??

enter image description here

I used dragg formula below.

const movePosOfBox = useCallback((e: MouseEvent) => {

    const el = document.getElementById("canvas");
    if (el) {
        const elRect = el.getBoundingClientRect();

        let x = e.clientX - elRect.left - imgOffset.x;
        let y = e.clientY - elRect.top - imgOffset.y;

// I used e.offsetX,Y in imgOffset.x,y. but they cant not work on rotated image.

        setBoxPos({ left: x, top: y });
    }
}, []);