Cropped image smaller than crop (Reactjs + react-image-crop)

Question

I'm trying to implement react-image-crop in my React.JS project. I have a little issue : my cropped image isn't the same dimensions as my crop.. I'm using the following functions on my <ReactCrop> component :

handleImageLoaded = (image) => {
    //
  };

  handleOnCropChange = (percentCrop) => {
    this.setState({ crop: percentCrop });
  };

  handleOnCropComplete = (percentCrop) => {
    if (this.imageRef && percentCrop.width && percentCrop.height) {
      const canvasRef = this.imagePreviewCanvasRef.current;
      const { imgSrc } = this.state;

      image64toCanvasRef(canvasRef, imgSrc, percentCrop);
    }
  };

And here's my image64toCanvasRef function :

export function image64toCanvasRef(canvasRef, image64, percentCrop) {
  const canvas = canvasRef; // document.createElement('canvas');
  canvas.width = percentCrop.width;
  canvas.height = percentCrop.height;

  const ctx = canvas.getContext('2d');
  const image = new Image();
  image.src = image64;

  image.onload = function () {
    ctx.drawImage(
      image,
      percentCrop.x,
      percentCrop.y,
      percentCrop.width,
      percentCrop.height,
      0,
      0,
      percentCrop.width,
      percentCrop.height
    );
  };
}

Here's what it looks like when i upload an image and crop :

So my guess is the issue lies in the ctx.drawImage()