Is there any memory problem that "Too many active WebGL contents." keeps coming out in my web console

Question

Now I'm using RTSP stream with jsmpeg, ffmpeg, node-rtsp-stream in React.js

I set multiple streaming in react component about 1 to maximum 25

and when I change route to many , It apeard my console

I'm a little afraid of if it caused by memory leak problem

I cannot figure out it is okay or critical problem

Could you tell me how to solve this problem or is it fine

// out of component
const streams: Streams = {};

...

  const { preset } = props;

  const elementsRef = useRef<any>(new Array(preset?.partition).fill(0).map((v) => createRef()));


  // Mount
  useEffect(() => {
    const { JSMpeg } = window;

    const sortedStream = _.sortBy(preset?.stream, ["position"]);
    console.log(sortedStream);


    sortedStream.forEach((v, i: number) => {

      const player = new JSMpeg.Player(v.camera_monitoring.ws, {
        canvas: elementsRef?.current[v.position]?.current, // Canvas should be a canvas DOM element
      });
      console.dir(elementsRef?.current[v.position]?.current);

      streams[v.id] = player;
    });
  }, []);

  // UnMount
  useEffect(() => {
    return () => {
      Object.keys(streams).forEach((v) => {
        console.log("unmount key:", v);
        if (streams[v] !== null) {
          streams[v].destroy();
          streams[v] = null;
        }
      });
    };
  }, []);



... 

https://github.com/phoboslab/jsmpeg

above library `jsmpeg.min.js` is set by global ( in public directory and set in my html )

actually my code are so many antipattern in contrast react style, To make an excuse, It is my limits of one's ability