threejs models are not rendering or loading in my mobile browser chrome

Question

I am trying to display 3d models in my website using three.js library. It works on desktop Mac and windows as well as on iOS in safari and Firefox. But it does not work on Android's chrome? It works on Desktop chrome as well.it workin in different andorid browser like firefox but not in chorme what is the reason and how to fix that

this is the code for my 3d model

import * as THREE from "three";
import { Suspense, useRef, useState } from "react";
import { Canvas, useFrame } 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]);
  const meshRef = useRef();
  const [isHovered, setIsHovered] = useState(false);
  const [initialRotation, setInitialRotation] = useState(new THREE.Euler());
  const [initialScale, setInitialScale] = useState(new THREE.Vector3());

  // useFrame(() => {
  //   if (meshRef.current && isHovered) {
  //     // Rotate the object on every frame if the mouse is hovering over it
  //     meshRef.current.rotation.y += 0.05;
  //   }
  // });

  return (
    <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
      <ambientLight intensity={0.25} />
      <directionalLight position={[0, 0, 0.05]} />
      <mesh
        ref={meshRef}
        castShadow
        receiveShadow
        scale={2.75}
        onPointerOver={() => {
          setIsHovered(true);
          setInitialScale(meshRef.current.scale.clone());
          meshRef.current.scale.set(3, 3, 3);
        }}
        onPointerOut={() => {
          setIsHovered(false);
          meshRef.current.scale.copy(initialScale);
        }}
      >
        {!isNaN(1) && <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} enabled={false} />
        <Ball imgUrl={icon} />
      </Suspense>

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

export default BallCanvas;