I want to be able to zoom and crop an image like in react-easy-crop but with react-image-crop

so far it cuts me off but when I zoom using ReactCrop's scale = prop

Doesn't take this into account for clipping

I need to zoom to the photo and crop it with the canvas this is my canvas code with which I crop the photo

     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
    )
  })