i was working on a project using Cropper to cut images, and i just have this error
This is my code, the error is in the handleCrop function, can somebody help me ? :)

我正在做一个使用Cropper剪切图像的项目，我有这个错误这是我的代码，错误在handleCrop函数中，有人能帮我吗？：)

import { useRef, useState } from "react";
import UploadWidget from "../../UploadWidget/UploadWidget";
import styles from './Grilla0.module.css'
import Cropper from "react-cropper";
import 'cropperjs/dist/cropper.css';


const Grilla0 = ({ phoneImg }) => {

    const [imgData, setImgData] = useState(null);

    const [escala, setEscala] = useState(1);

    const [translateX, setTranslateX] = useState(0);

    const [translateY, setTranslateY] = useState(0);

    const [croppedImage, setCroppedImage] = useState(null);

    const cropperRef = useRef(null);

    const handleCrop = () => {
        if (cropperRef.current) {
            const croppedCanvas = cropperRef.current.getCroppedCanvas();
            const croppedImageBase64 = croppedCanvas.toDataURL();
            setCroppedImage(croppedImageBase64);
        }
    };

    return (
        <>
            <div className={styles.marco}>
                {imgData && (
                    <Cropper
                        ref={cropperRef}
                        src={imgData.url}
                        className={styles.croper}
                        style={{
                            transform: `scale(${escala}) translate(${translateX}px, ${translateY}px)`,
                        }}
                        aspectRatio={NaN}
                        guides={true}
                        viewMode={1}
                        dragMode="move"
                        autoCropArea={1}
                        cropBoxResizable={false}
                    />
                )}
                <img className={styles.marcoImg} src={phoneImg} alt="" />
            </div>

            <UploadWidget getImageData={setImgData} />

            <div className={styles.containerEditar}>
                <div className={styles.container}>
                    <button
                        className={styles.button}
                        onClick={() => setEscala(escala + 0.3)}
                    >
                        Zoom +
                    </button>
                    <button
                        className={styles.button}
                        onClick={() => setEscala(escala - 0.3)}
                    >
                        Zoom -
                    </button>
                </div>

                <div className={styles.container}>
                    <button
                        className={styles.button}
                        onClick={() => setTranslateY(translateY - 5)}
                    >
                        Arriba
                    </button>
                    <button
                        className={styles.button}
                        onClick={() => setTranslateY(translateY + 5)}
                    >
                        Abajo
                    </button>
                    <button
                        className={styles.button}
                        onClick={() => setTranslateX(translateX + 5)}
                    >
                        {"=>"}
                    </button>
                    <button
                        className={styles.button}
                        onClick={() => setTranslateX(translateX - 5)}
                    >
                        {"<="}
                    </button>
                </div>
            </div>

            <button className={styles.button2} onClick={handleCrop}>
                Recortar
            </button>

            {croppedImage && (
                <div>
                    <h2>Imagen recortada:</h2>
                    <img src={croppedImage} alt="Imagen recortada" />
                </div>
            )}
        </>
    );
}

export default Grilla0;

I tried what is in that code and i expect to get a button that you can click and the image that you previusly load, once you click the button, it should generate another image but cutted by the dimensions that can be modified by the buttons "Zoom +" "Zoom -", "Arriba", "Abajo", "<=", "=>".

我尝试了代码中的内容，我希望得到一个你可以点击的按钮和你之前加载的图像，一旦你点击按钮，它应该会生成另一个图像，但被可以通过按钮“Zoom+”“Zoom-”、“Arriba”、“Abajo”、“<=”、“=>”修改的尺寸剪切。

It should be:

它应该是：

const handleCrop = () => {
        if (cropperRef.current) {
            const croppedCanvas = cropperRef.current.cropper.getCroppedCanvas();
            const croppedImageBase64 = croppedCanvas.toDataURL();
            setCroppedImage(croppedImageBase64);
        }
};

See official example

请参阅官方范例