How do I get the actual selection from cropper.js

Question

I have a React app using cropper.js and I have this basic structure

<input type="file" name="imagen1" id="imagen1" accept='.jpg, .png, .jpeg' onChange={handleImg1}/>
                
<cropper-canvas background>
    <cropper-image></cropper-image>
    <cropper-shade hidden></cropper-shade>
    <cropper-handle action="select" plain></cropper-handle>
    <cropper-selection aspect-ratio='1' initial-coverage="0.8" movable resizable zoomable>
        <cropper-grid role="grid" bordered covered></cropper-grid>
        <cropper-crosshair theme-color="rgba(238, 238, 238, 0.5)" centered></cropper-crosshair>
        <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
        <cropper-handle action="n-resize"></cropper-handle>
        <cropper-handle action="e-resize"></cropper-handle>
        <cropper-handle action="s-resize"></cropper-handle>
        <cropper-handle action="w-resize"></cropper-handle>
        <cropper-handle action="ne-resize"></cropper-handle>
        <cropper-handle action="nw-resize"></cropper-handle>
        <cropper-handle action="se-resize"></cropper-handle>
        <cropper-handle action="sw-resize"></cropper-handle>
    </cropper-selection>
</cropper-canvas>
        
<button onClick={saveImg1} type="button">SAVE</button>

The input onClick is getting the uploaded file and rendering to the like this:

const renderImg = (canvas, e)=>{
    var tgt = e.target || window.event.srcElement,
    files = tgt.files;
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
           canvas.src = fr.result;
        }
        fr.readAsDataURL(files[0]);
    }
}

The user can manipulate the selection as expected, great... but now when I finish I don´t know how to get that actual selection to save it/upload it/whatever. How do I get that selection made by the user?