Threejs could not show more than 8 object

Questions
,
1

in my site i must render 10 object, in desktop everything is okay, but in some mobile phone (android), cannot show over 8 object

import { Canvas } from "@react-three/fiber";
import { useLoader } from "@react-three/fiber";
import { Environment, OrbitControls } from "@react-three/drei";
import type { OrbitControls as OrbitControlsProps } from "three-stdlib";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import { Suspense, useCallback, useRef } from "react";

type ModelProps = {
  path: string;
};

const Model = ({ path }: ModelProps) => {
  const gltf = useLoader(GLTFLoader, path, loader => {
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath('/draco-gltf/');
    loader.setDRACOLoader(dracoLoader);
   });
  return (
    <>
      <primitive object={gltf.scene} scale={1} />
    </>
  );
};

type IconLoaderProps = {
  size: string;
  path: string;
  height?: string;
};

const IconLoader = ({ size, path, height }: IconLoaderProps) => {
  const OrbitRef = useRef<OrbitControlsProps>(null);
  const onMouseEneterHandler = useCallback(() => {
    if (OrbitRef && OrbitRef.current) {
      OrbitRef.current.autoRotate = true;
    }
  }, [OrbitRef]);
  const onMouseLeaveHandler = useCallback(() => {
    if (OrbitRef && OrbitRef.current) {
      OrbitRef.current.autoRotate = false;
    }
  }, [])
  return (
    <Canvas
      onMouseEnter={onMouseEneterHandler}
      onMouseLeave={onMouseLeaveHandler}
      style={{ width: size, height: height ?? size }}
    >
      <Suspense fallback={null}>
        <Model path={path} />
        <OrbitControls ref={OrbitRef} enableZoom={false} />
        <Environment preset="sunset" background={false} />
      </Suspense>
    </Canvas>
  );
};

export default IconLoader;

i pass the object with path to IconLoader and it render Model inside itself
my demo
you can check my demo here