cannot make properly working modal window with zoom and drag image

Question

The zoom and drag function work well, but when I try to drag the enlarged image, it moves to the upper left corner for ~100-200px

red mark on screenshots means where my cursor was at the moment
zooming pic
after moving a few pixels
tried to move

The second problem is that after dragging the enlarged pic, the zoom function returns the initial state when I scroll down (zoom=0) or up (zoom = 0 + 1)

I found the zoom function and used first 13 JS lines https://codepen.io/youwenliang/pen/xqaxXE
drag function i rewrote from https://www.youtube.com/watch?v=jfJ5ON05JKk

const [diffY, setDiffY] = useState()
const [diffX, setDiffX] = useState()
const [draggable, setDraggable] = useState(false)

    //tried to use useState hook but i can't fix return previus state with useEffect yet
    let zoom = 0
    function Zooming(e){
        if(e.deltaY < 0){
            zoom ++
        }else{
            zoom --
        }
        if(zoom <= 0){
            zoom = 0
        }else if (zoom > 40){
            zoom = 40 
        }
        let resultZoom = String(1+zoom/5)
        if(zoom >= 0 & zoom <= 50){
            e.target.style.transform = ` scale(${resultZoom})`
        }
    }
    
    function HandlerDragStart(e){
        setDiffY( e.screenY - e.target.getBoundingClientRect().top)
        setDiffX( e.screenX - e.target.getBoundingClientRect().left)  
        setDraggable(true)
    }

    function HandlerDragging(e){
        if(draggable){
            let top = e.screenY - diffY
            let left = e.screenX - diffX    
            e.target.style.top = `${top}px`
            e.target.style.left = `${left}px`
        }
    }

    function HandlerDragEnd(e){
        setDraggable(false)
    }

        <div className="modal__img">
            <img className="img"
                src={Item.image} alt=""
                onClick={(e) => e.stopPropagation()}
                onWheel={(e) => Zooming(e)}
                onMouseDown={(e) => HandlerDragStart(e)}
                onMouseMove={(e) =>{
                    HandlerDragging(e)
                    e.preventDefault()}
                }
                onMouseUp={(e) => HandlerDragEnd(e)}  
            />
        </div>

.modal__img{
        display:flex;
        justify-content: center;
        align-items: center;
        .img{
            position: absolute;
            top: 20px;
            
            max-width: 100%;
            max-height: 90vh;

            object-fit:contain;
            object-position: center;
        }
    }

After a week, the code looks messy, I hope it won't become a big problem for you.

I tried to use libraries but some didn't install , some not doing what i want, other i can't style for my project
Tried to change height and width instead of transform: scale
Tried use zoom function on image and drag function on div container but all of that didn't go well

I hope you can help fix bugs or offer a better solution.