react-image-crop will not provide initial crop on canva - reactjs

Question

Have an issue with react-image-crop. If I change the crop, it works perfectly, but if I just load and then hit save, I get an empty image back. At first I thought maybe its just not loading it, but I can see the croped image on load. And I don't get an "undefined" image back, I get an image with no data in it.
This is how I read the image:
useEffect(() => {
console.log("Got completed crop")
const canvas: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement
if (canvas) {
console.log("Got canvas")
console.log(canvas.toDataURL())
setCroppedImgUrl(canvas.toDataURL())
} else {
}
}, [completedCrop])
This code gets called every time completedCrop is updated, and I can see that it works when the image is first loaded, BUT, the image it returns on load (independent on what image I am cropping) is
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAABGJJREFUeF7t1AEJAAAMAsHZv/RyPNwSyDncOQIECEQEFskpJgECBM5geQICBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAgQdWMQCX4yW9owAAAABJRU5ErkJggg==
To initiate the crop, I use the following code:
<div className='d-flex align-items-center gap-4'>
<div className='text-center'>
<p>Crop:</p>
{Boolean(posterSrc) && (
<ReactCrop
crop={crop}
onChange={(_, percentCrop) => {
setCrop(percentCrop)
}}
onComplete={(crop) => setCompletedCrop(crop)}
aspect={aspect}>
<img
style={{maxHeight: previewHeight, maxWidth: previewWidth, objectFit: "cover"}}
ref={imgRef}
alt="Crop me"
src={posterSrc}
onLoad={onImageLoad}/>
</ReactCrop>
)}
</div>
<div className='text-center'>
<p>Preview:</p>
{Boolean(completedCrop) && (
<canvas
id='canvas'
ref={previewCanvasRef}
style={{
objectFit: 'contain',
width: previewWidth,
height: previewHeight,
}}
/>
)}
</div>
</div>
Anyone have any idea what I'm doing so wrong