Invalid hook call. Hooks can only be called inside of the body of a function component. While cropping an image and preview that image with react js

Question

Basically, I want to add cropping functionality. If user select a file then, user have choice to crop the image if he/she want. When I preview cropped image.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

    import React, { useEffect, useState, useRef } from 'react';
    import ReactCrop from 'react-image-crop';
    import 'react-image-crop/dist/ReactCrop.css';
    
    // import Styles from './Image.module.css';
    
    
    const Image = (props) => {
    
      const [crop, setCrop] = useState({ 
        aspect: 3/4,
        unit: 'px',
        x: 0,
        y: 0,
        width: 500,
        height: 500
      });
      const [file, setFile] = useState(null);
      const [imgPreview, setImgPreview] = useState(null);
      const canvasRef = useRef(null);
    
      const filePicker = (e) => {
        setFile(e.target.files[0]);
      };
    
      function image64toCanvasRef (cnvRef, image64, pixelCrop) {
        const canvas = cnvRef;
        canvas.width = pixelCrop.width;
        canvas.height = pixelCrop.height;
        const ctx = canvas.getContext('2d');
        const image = new Image(); // On this line throwing error
        image.src = image64
        image.onload = () => {
          ctx.drawImage(
            image,
            pixelCrop.x,
            pixelCrop.y,
            pixelCrop.width,
            pixelCrop.height,
            0,
            0,
            pixelCrop.width,
            pixelCrop.height
          )
        }
      }
    
      useEffect(() => {
        if (file) {
          const fileReader = new FileReader();
          fileReader.onload = () => {
            setImgPreview(fileReader.result);
          }
          fileReader.readAsDataURL(file);
        }
      }, [file]);
    
      const handleOnCropChanged = (crop) => {
        // console.log('handleOnCropChanged: ', crop);
        const state = {
          ...crop,
          x: crop.x,
          y: crop.y,
          width: crop.width,
          height: crop.height
        }
        setCrop(state);
      };
    
      const handleOnCropComplete = (crop, pixelCrop) => {
        image64toCanvasRef(canvasRef.current, imgPreview, pixelCrop);
      }
    
      return (
        <div
          style={{
            margin: '10px 28px',
          }}
        >
          {
            imgPreview ? (
              <div>
                <ReactCrop 
                  src={imgPreview}
                  crop={crop}
                  keepSelection
                  locked
                  onChange={(crop) => handleOnCropChanged(crop)}
                  onComplete={handleOnCropComplete}
                  onImageLoaded={handleOnImageLoaded}
                />
              </div>
            ) : (
              <input type='file' onChange={filePicker} />
            )
          }
          <div>
            <canvas
              ref={canvasRef}
            ></canvas>
          </div>
        </div>
      )
    };
    
    export default Image;