Jcrop have selected area follow scroll

I am creating a website where one functionality is that users can select an area of an image from which to extract text from.

I have put my image in a scrollable div to save space.

<div id="image-container" style="width: 100%; height:75%; overflow:scroll; overflow-x:hidden;">
    <img src="data:image/png;base64,{{ image }}" style="object-fit: cover; width: 100%; height: auto;" id="target" >
</div>

When I am selecting the area the program looks like this image. And when i try to scroll the crosshair moves but the selected area does not want to follow it image.

My Jcrop code:

var jcropApi
var scroll = 0

$(document).ready(function(){
    $('#target').Jcrop({
        onSelect: showCoords,
        onChange: showCoords
    })
})

function showCoords(c) {
    $('#image-container').on('scroll', function(){
        scroll = $('#image-container').scrollTop()
    })

    c.y2 += scroll

    jcropApi = this
}

function getSelectedImageData() {
    if (jcropApi) {
        var canvas = document.createElement('canvas')
        var context = canvas.getContext('2d')

        // Get the selected coordinates
        var selection = jcropApi.tellSelect()

        // Set the canvas size to the selection size
        canvas.width = selection.w
        canvas.height = selection.h

        // Draw the cropped region to the canvas
        context.drawImage(jcropApi.ui.holder.find('img')[0], selection.x, selection.y, selection.w, selection.h, 0, 0, selection.w, selection.h)


        // Get the data URL from the canvas
        var dataUrl = canvas.toDataURL('image/png')
        
        input = document.getElementById('image')
        image = document.getElementById('target')
        x1 = document.getElementById('x1')
        y1 = document.getElementById('y1')
        x2 = document.getElementById('x2')
        y2 = document.getElementById('y2')

        input.value = dataUrl
        x1.value = selection.x 
        y1.value = selection.y 
        x2.value = (selection.w + selection.x) 
        y2.value = (selection.h + selection.y) 
            
    } else {
        console.log('Jcrop instance not initialized.')
    }
}

How can I make the selected area follow the cursor ?