I want to add an option to crop and zoom the image when uploading. I am opening a modal on image upload, where I am adding the crop option. However, when I upload an image, it is getting converted to a Blob URL. Instead of a Blob URL, I want to send the actual image path to the cropper.

Can you please provide a solution for cropping an image? I am using the react-easy-crop package.

  const [file, setProfileImage] = React.useState({});
  const [open, setOpen] = useState(false);
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  const [rotation, setRotation] = useState(0);
 const handleUpload = (event) => {
    setProfileImage(event.target.files[0]);
    const preview = URL.createObjectURL(event.target.files[0]);
    // setPreviews(preview);
    console.log(preview, "profileimageeeee");
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
    setProfileImage(null);
  };
 <label htmlFor="icon-button-file">
                      <Input
                        accept="image/*"
                        id="icon-button-file"
                        type="file"
                        name="profile_image"
                        onChange={(e) => handleUpload(e)}
                      />
                      <IconButton
                        className="edit-profile-icon-position"
                        color="primary"
                        aria-label="upload picture"
                        component="span"
                      >
                        <PhotoCamera />
                      </IconButton>
                    </label>

                    {/* Image Crop Modal */}
                    <Dialog
                      open={open}
                      onClose={handleClose}
                      maxWidth="sm"
                      fullWidth
                    >
                      <DialogTitle>Crop & Adjust Image</DialogTitle>
                      <DialogContent
                        style={{ height: 400, position: "relative" }}
                      >
                        {image && (
                          <Cropper
                            image={file}
                            crop={crop}
                            zoom={zoom}
                            rotation={rotation}
                            aspect={1} // Square Crop
                            onCropChange={setCrop}
                            onZoomChange={setZoom}
                            onRotationChange={setRotation}
                          />
                        )}
                      </DialogContent>
                      <DialogActions>
                        <Slider
                          value={zoom}
                          min={1}
                          max={3}
                          step={0.1}
                          onChange={(e, val) => setZoom(val)}
                        />
                        <Slider
                          value={rotation}
                          min={0}
                          max={360}
                          step={1}
                          onChange={(e, val) => setRotation(val)}
                        />
                      </DialogActions>
                      <div>
                        <Button onClick={handleClose} color="secondary">
                          Cancel
                        </Button>
                        <Button onClick={handleClose} color="primary">
                          Save
                        </Button>
                      </div>
                    </Dialog>