Unnecesarry canvases created by react-webcam

Question

I am using react-webcam in my React Typescript application, and there is a scenario when user have to take around 100 photos in one session. So with this function I get the screenshot and the add the image to states and later proceed the logic and after sending the request application again redirects to camera page to take a picture:

  const capture = useCallback(async () => {
    if (isMounted && webcamRef.current !== null) {
      const imageSrc = webcamRef.current?.getScreenshot();
      if (imageSrc) {
         store.dispatch(commitSourceImage(imageSrc));
      }
    }
  }, [isMounted, webcamRef]);

The problem is that when I inspect the application through Safari browser(in Graphics section) I can see Multiple Canvases, so each time when I reopen camera page and take a picture new canvas is created. After some tries the app is reaching the maximum size of Canvas 384 MB and it blocks taking picture. Also after 10-15 tries as the canvas limit is reaching top, the application and mainly the camera is starting to lag. Want to mention that canvases are not inside html elements so it is not a part of Virtual Dom

Refreshing page is deleting all canvases and fixing all lagging problem!

Do you have any solution how to avoid creating multiple canvases or even deleting old canvases and keeping only one?

 <Webcam
          style={{
                borderRadius: '12px',
                margin: '10px 0',
                border: '2px solid blue',
                objectFit: 'cover',
              }}
              width={'100%'}
              ref={webcamRef}
              forceScreenshotSourceSize={true}
              screenshotFormat='image/jpeg'
              videoConstraints={videoConstraints}
              hidden={sourceImage != null}
            />

I am expecting to have single canvas for the session, so not creating a new canvas each time.