I'm making a project where I need to generate pretty huge map. I need to generate a lot of ground blocks with trees or rocks, kinda similar to minecraft (each block must be clickable). But I have a problem with optimization. I tried cutting render distance, adding fog, and playing with three instances (I'm using threejs fiber library for react). Could anyone help me explain how instances work and tell me how to apply them to my project? Hre's the code to generate it in normal way, without instancing.

import React, { Suspense } from "react";
import { useEffect, useState } from "react";
import Box from "./Box";
export default function Ground({
  layout,
  selectBox,
  selectedBox,
  position,
}) {
  const [boxArray, setBoxArray] = useState([]);
  const size = 20;
  let id = 0;
  useEffect(() => {
    const boxArrayCopy = [];
    for (let i = -(size / 2); i < size / 2; i++) {
      let hasTree = Math.random() > 0.99;
      for (let j = -(size / 2); j < size / 2; j++) {
        const layoutObject = layout.filter(
          (layoutObject) => layoutObject.x === i && layoutObject.y === j
        );
        const box = (
          <Box
            key={id}
            coords={{ x: j * 5, y: 0, z: i * 5 }}
            color={layoutObject.length > 0 ? layoutObject[0].color : 0x61892f}
            selectBox={selectBox}
            selectedBox={selectedBox}
            hasTree={hasTree}
            hasStone={Math.random() < 0.2}
            // just a random condition to add tree to box
          />
        );
        boxArrayCopy.push(box);
        id++;
        if (hasTree) hasTree = Math.random() > 0.5;
      }
      setBoxArray([...boxArrayCopy]);
    }
    console.log("GROUND DONE");
  }, []);
  return (
    <group position={position ?? [0, 0, 0]}>
      <Suspense fallback={null}>{boxArray}</Suspense>
    </group>
  );
}