Problem loading large amount of .obj Three Fiber and React

I am trying to create a planet made out of hexagons within Three Fiber and React (@react-three/fiber). I managed to generate N numbers of hexagons, each stored in a separate .obj file (named from 0 to 4001, currently) on a folder inside the react app (in /src folder). I load them like this:

const obj = useLoader(OBJLoader, require('./planetParts/' + fileID + '.obj'));

    const geometry = useMemo(() => {
        let g;
        obj.traverse((c) => {
            if (c.type === "Mesh")
                g = c.geometry;
        });
        return g;
    }, [obj]);

const edges = useMemo(() => new THREE.EdgesGeometry(geometry, 15), [geometry])

    const color = isOwnedByMe ? myLandColor() : isOwnedByOther ? getOwnedColor() : getNotOwnedColor();

    return (
        <group>

            <mesh
                ref={ref}
                geometry={geometry}
                onClick={() => selectPlot(fileID)}
                onPointerOver={() => setIsHovered(true)}
                onPointerOut={() => setIsHovered(false)}
            >
                <meshBasicMaterial
                    color={!isHovered ? color : getHoverColor()}
                    opacity={!isHovered ? 0.05 : 0.3}
                    // opacity={1}
                    transparent={true}
                    toneMapped={false}
                />
            </mesh>

            <lineSegments geometry={edges} renderOrder={1}>
                <lineBasicMaterial
                    color={isOwnedByMe ? myLandColor() : new THREE.Color('rgb(0,0,0)')}
                    opacity={isOwnedByMe ? getOwnOpacityLinesHexagon() : getOpacityLinesHexagons()}
                    transparent={true}
                />
            </lineSegments>
        </group>
    );

I have seen a weird behaviour on the chrome browser. When I am loading the hexagons, sometimes, I get an error about insufficient resources (net::ERR_INSUFFICIENT_RESOURCES) and then about not being possible to load some certain .obj files (from 2700+ to 4000).

I think that it is the large number of files that I load. Therefore, I split them into chunks of 500 like the code below, but still the same error. Can someone help me out with a mechanism or a solution to load that much of files, maybe with something async? On Firefox and Safari, I have not seen the same issue. They load perfectly, as intended.

The code for chunks:

const chunk1 = useRef(<ChunkHexagons startFrom={0} endAt={501} />);
const chunk2 = useRef(<ChunkHexagons startFrom={501} endAt={1001} />);
const chunk3 = useRef(<ChunkHexagons startFrom={1001} endAt={1501} />);
const chunk4 = useRef(<ChunkHexagons startFrom={1501} endAt={2001} />);
const chunk5 = useRef(<ChunkHexagons startFrom={2001} endAt={2501} />);
const chunk6 = useRef(<ChunkHexagons startFrom={2501} endAt={3001} />);
const chunk7 = useRef(<ChunkHexagons startFrom={3001} endAt={3501} />);
const chunk8 = useRef(<ChunkHexagons startFrom={3501} endAt={4001} />);
const chunk9 = useRef(<ChunkHexagons startFrom={4000} endAt={tilesSize()} />);

return (
    <Suspense fallback={null}>
        <group ref={ref}>
            {chunk1.current}
            {chunk2.current}
            {chunk3.current}
            {chunk4.current}
            {chunk5.current}
            {chunk6.current}
            {chunk7.current}
            {chunk8.current}
            {chunk9.current}
        </group>
    </Suspense>
);