THREE.WebGLRenderer: Context Lost when loading a 3D object in a Next.js app deployed on Vercel

In my Next.js application I want to load a 3D object. The application works perfectly on my local environment, but when deployed to Vercel, I encounter the following error:

THREE.WebGLRenderer: Context Lost

This error prevents the 3D object from rendering in production. Below is the relevant code snippet:

'use client'

import { Canvas } from '@react-three/fiber'
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'
import { useLoader } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

function Model() {
  const obj = useLoader(
    OBJLoader,
    'https://res.cloudinary.com/restoftheurl.obj'
  )
  return <primitive object={obj} scale={1} />
}

export default function TestUploadComponent() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <Canvas
        camera={{ position: [0, 0, 5] }}
        fallback={<div>Loading...</div>}
      >
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
        <Model />
        <OrbitControls />
      </Canvas>
    </div>
  )
}

Used webglcontextlost and webglcontextrestored events but couldn’t find a solution for the issue.