crop the area of a photo on reactjs

I'm trying to crop a photo in real time as u can see like in the picture

but actually I have no idea how to do it, I implemented the react-webcam library with react-image-crop and i get something like this

My idea is that once I press the green button, it takes the entire picture, and then in another view the image is cut, but I have no idea how to obtain the result of the cut image.

This is how it looks on the result page...

and this is my component but i dont understand how to obtaine only the crop image

import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setPreviewImage } from "../../redux/features/cam";
import ReactCrop from "react-image-crop";

const CamPreview = memo(() => {
  const dispatch = useDispatch();
  const [crop, setCrop] = useState({
    unit: "%", // Can be 'px' or '%'
    x: 25,
    y: 25,
    width: 50,
    height: 50,
  });
  useEffect(() => {
    return () => {
      console.log("se ejecuto?");
      dispatch(setPreviewImage({ imagePrev: null }));
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  console.log(crop);
  const { imagePrev } = useSelector((store) => store.camera);
  console.log(imagePrev);
  if (imagePrev === null) return null;
  return (
    <ReactCrop crop={crop} onChange={(c) => setCrop(c)}>
      <img src={imagePrev} alt="preview" />;
    </ReactCrop>
  );
});

export default CamPreview;