如何使用react-easy-crop来反映从react-easy-crop到在另一个div中渲染的实时图像的位置变化？

npm install react-easy-crop

yarn add react-easy-crop

import React, { useState } from 'react';
import Cropper from 'react-easy-crop';
import { getCroppedImg } from './utils'; // 自定义的图像裁剪工具函数
import 'react-easy-crop/style.css';

const ImageCropper = () => {
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  
  const onCropChange = (crop) => {
    setCrop(crop);
  };
  
  const onZoomChange = (zoom) => {
    setZoom(zoom);
  };
  
  return (
    <div>
      <Cropper
        image={yourImageSource} // 替换为你的图像源
        crop={crop}
        zoom={zoom}
        aspect={4 / 3} // 设置裁剪框的宽高比
        onCropChange={onCropChange}
        onZoomChange={onZoomChange}
      />
      <div>
        {/* 在这里渲染实时图像 */}
      </div>
    </div>
  );
};

const onCropComplete = async (_, croppedAreaPixels) => {
  const croppedImage = await getCroppedImg(yourImageSource, croppedAreaPixels);
  document.getElementById('rendered-image').style.backgroundImage = `url(${croppedImage})`;
};

return (
  <div>
    <Cropper
      // ...
      onCropComplete={onCropComplete}
    />
    <div id="rendered-image"></div>
  </div>
);