Unhandled Runtime Error TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'

Question

I'm encountering an issue while implementing react-three/drei and react-three/fiber in my Next.js project. The application works fine on Firefox but throws errors on Chrome. Specifically, I'm seeing the following error in the console:

Unhandled Runtime Error
TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'.

Additionally, Chrome logs a message stating "Too many active WebGL contexts. Oldest context will be lost." This seems to result in the first canvas being removed after the page is fully loaded, leaving only the last canvas visible.

• Operating System: [e.g., Windows 11]
• Browser: [e.g., Chrome version 122.0.6261.95]

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import {
  Decal,
  Float,
  OrbitControls,
  Preload,
  useTexture,
} from "@react-three/drei";

import CanvasLoader from "../Loader";

const Ball = (props) => {
  const {imgUrl} = props;
  const [decal] = useTexture([imgUrl]);

  return (
    <>
    <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
      <ambientLight intensity={0.25} />
      <directionalLight position={[0, 0, 0.05]} />
      <mesh castShadow receiveShadow scale={2.75}>
        <icosahedronGeometry args={[1, 1]} />
        <meshStandardMaterial
          color='#fff8eb'
          polygonOffset
          polygonOffsetFactor={-5}
          flatShading
        />

        <Decal
          position={[0, 0, 1]}
          rotation={[2 * Math.PI, 0, 6.25]}
          scale={1}
          map={decal}
          flatShading
        />
      </mesh>
    </Float>
    </>
    
  );
};

const BallCanvas = ({ icon }) => {
  return (
    <Canvas
      frameloop='demand'
      dpr={[1, 2]}
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls enableZoom={false} />
        <Ball imgUrl={icon} />
      </Suspense>

      <Preload all />
    </Canvas>
  );
};

export default BallCanvas;

I've tried searching for similar issues but haven't found a solution yet. Any insights or suggestions on how to resolve this problem would be greatly appreciated. Thanks in advance!