How do I fix this offset with cropper.js?

Question

I have my form to upload an image, crop it and send it to my api and everything works fine but the crop thing... I´m using React and Crop.js and I´m doing like this:

<input type="file" name="image1" accept='.jpg, .png, .jpeg' onChange={handleImg}/>

In that handleImg function I just render this uploaded file to the cropper container (an img element)

const miCropper = new Cropper(canvas)
var fr = new FileReader();
fr.onload = function () {
    miCropper.getCropperImage().src=fr.result
}
fr.readAsDataURL(fichero)

and then, on the SAVE button I have this:

mySelection = miCropper.getCropperSelection()
mySelection.$toCanvas()
.then(myCanvas=>{
    const croppedData = myCanvas.toDataURL()
    document.querySelector('#myDashboard>img').src = croppedData 
}) 

Code is working BUT I´m getting a wrong selection, I mean, for example in this picture I´m attaching, I select the first girl and selection is getting the third one... and if I select the second boy selection is getting the fourth one. It´s like there´s an offset from what I select to what I actually get and I don´t know why, tried several approaches and none of them are working.

How can I fix this?