Callback for when Canvas scene is fully rendered to <canvas>

[seflless]

I'm trying to automate generating and downloading PNGs of r3f scenes. I keep getting blank pngs with my current approach. Realized it might be because I'm access the element when it hasn't been rendered to.

Is it possible to get a callback when the scene is fully rendered to the canvas?

My code:

const takeScreenshot = ()=>{
    const imgData = THREE.ImageUtils.getDataURL(canvasStateRef.current.gl.domElement);
    const imgEl = document.createElement( 'img' ); 
    imgEl.src = imgData;
    document.body.appendChild( imgEl ); 
  }

Resulting image vs source image

Result

Source (Result Should Match Source)