Как отловить загрузку изображения (реагирует на легкую подрезку)

Question

Извините, если задаю неправильный вопрос

Я хочу, чтобы после кадрирования фото область обрезки была меньше. (На 50% меньше фото) В документации сказано использовать «onMediaLoaded», но по какой-то причине он не работает должным образом, то есть размер области кадрирования изменяется только после повторной загрузки фотографии.

const [cropSize, setCropSize] = React.useState(null)
const onImageLoad = (img) => {
        const circleWidth = 50
        const circleSize = img.width < img.height
            ? (img.width * circleWidth) / 100
            : (img.height * circleWidth) / 100
        setCropSize({ width: circleSize, height: circleSize })
    }

<Cropper
   classes={{ containerClassName: styles.container }}
    image={`http://localhost:3000/${src}`}
     crop={crop}
     zoom={zoom}
     aspect={1}
     cropShape="round"
     showGrid={false}
     onCropChange={onCropChange}
     onCropComplete={onCropComplete}
     onZoomChange={setZoom}
     cropSize={cropSize}
     onMediaLoaded={onImageLoad}
/>                                

https://codesandbox.io/s/react-easy-crop-custom-image-demo-8gpbz

Если вы снова загрузите фотографию, вы увидите, как изменяется область кадрирования