Generating a less resource demanding three js plane wireframe

Question

i have been able to generate this type of grid with react + threejs. But it is very resource heavy when i add more models, and i suspect it is due to the way i have generated this grid. The wanted grid

This is the following code. Any ideas?

import { Plane } from "@react-three/drei";

const XZPlane = ({ width, height, size, position }) => (
  <Plane
    args={[width, height, size, size]}
    rotation={[1.5 * Math.PI, 0, 0]}
    position={position ? position : [0, 0, 0]}
  >
    <meshStandardMaterial attach="material" color="#8eefe6" wireframe />
  </Plane>
);

export default function Grid({ size }) {

  const points = []
  const generatePlaneMarkers = (numberOfPoints) => {
    for (let i = numberOfPoints; i < 15; i++) {
      for (let x = numberOfPoints; x < 15; x++) {
        if (x !== 0 && i !== 0) {

          points.push(
          <>
            <XZPlane width={0.2} height={0} size={size} position={[i, 0, x]} />
            <XZPlane width={0} height={0.2} size={size} position={[i, 0, x]}/>
          </>)
        }
      }
    }
    return points;
  }
  return (
    <group>
      <XZPlane width={size} height={0} size={size} />
      <XZPlane width={0} height={size} size={size} />

      {
        generatePlaneMarkers(-15)
      }
    </group>
  );
}

I have tried my code above, but its very resource demanding.