Grid in React-Three-Fiber

grid.tsx

const Grid = ({ number = 10, lineWidth = 0.026, height = 0.1 }) => {
  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  return (
  // Renders a grid and crosses as instances
  <Instances position={[0, -3.02, 0]}>
    <planeGeometry args={[lineWidth, height]} />
    <meshBasicMaterial color="#999" />
    {Array.from({ length: number }, (_, y) =>
      Array.from({ length: number }, (_, x) => (
        <group key={x + ':' + y} position={[x * 2 - Math.floor(number / 2) * 2, -0.01, y * 2 - Math.floor(number / 2) * 2]}>
          <Instance rotation={[-Math.PI / 2, 0, 0]} />
          <Instance rotation={[-Math.PI / 2, 0, Math.PI / 2]} />
        </group>
      ))
    )}
    {isDarkMode && <gridHelper args={[50, 50, '#293D59', '#293D59']} position={[0, 0, 0]} />}
    {!isDarkMode && <gridHelper args={[50, 50, '#bbb', '#bbb']} position={[0, 0, 0]} />}
    
  </Instances>
)}