Quiero poder hacer zoom y recortar una imagen como en react-easy-crop pero con react-image-crop

hasta ahora me corta, pero cuando hago zoom usando la escala = prop de ReactCrop

No tiene esto en cuenta para el recorte.

Necesito hacer zoom en la foto y recortarla con el lienzo. Este es mi código de lienzo con el que recorto la foto.

 const canvas = document.createElement('canvas') const scaleX: number = image.naturalWidth / image.width const scaleY: number = image.naturalHeight / image.height canvas.width = crop.width canvas.height = crop.height const ctx = canvas.getContext('2d') // New lines to be added const pixelRatio = window.devicePixelRatio canvas.width = crop.width * pixelRatio canvas.height = crop.height * pixelRatio if (ctx !== null) { ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0) ctx.imageSmoothingQuality = 'high' ctx.drawImage( image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width, crop.height ) } // As Base64 string // const base64Image = canvas.toDataURL("image/jpeg"); // return base64Image; // As a blob return new Promise((resolve, reject) => { canvas.toBlob( (blob: any) => { if (blob) { blob.name = fileName const newImg = URL.createObjectURL(blob) resolve(newImg) } return }, 'image/png', 1 ) })