Im getting an error, THREE.WebGLRenderer: Context Lost, on the Android version of chrome

Question

I have made a personal website following a tutorial on YouTube, this is my GitHub repo https://github.com/tmich1997/resume

It is a Vite+React project and it has a bunch of 3D models. I deployed the website using Firebase and Chrome on a desktop, and it works exactly as intended however when I go to my mobile device (using an s23+ and on Chrome) some of the 3D models are not rendering. Looking into the error it gave me:

• WARNING: Too many active WebGL contexts. The oldest context will be lost.
• THREE.WebGLRenderer: Context Lost.

Some BallCanvas elements won't render and the Computer from Computer.jsx won't render either. What can I do? I am really lost and a lot of the info out there seems to be purely JS rather than JSX solution.

I tried to follow this answer: Allowing more WebGL contexts

In the Ball.jsx file I tried changing the scale:

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 [decal] = useTexture([props.imgURL])

  return (
    <Float speed={1.75} rorationIntensity={1} floatIntensity={2}>
      <ambientLight intensity={1}/>
      <directionalLight position={[0, 0, 0.05]}/>
      <mesh castShadow receiveShadow scale={2}>
        <icosahedronGeometry args={[1,1]} />
        <meshStandardMaterial
          color='#fff8eb'
          polygonOffset
          polygonOffsetFactor={-5}
          flatShading 
        />
        <Decal
          position={[0,0,1]}
          rotation={[2* Math.PI, 0, 6.25]}
          map={decal}
          flatShading
        />
      </mesh>
    </Float>
  )
}

const BallCanvas = ({icon}) => {
  return(
    <Canvas
      frameloop='demand'
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls 
          enableZoom={false}
        />
        <Ball imgURL={icon}/>
      </Suspense>
      <Preload all />
    </Canvas>
  )
}

export default BallCanvas