Making a grid with dots on vertices using React three fiber

I am trying to make a grid with dots using React three fiber. I tried using LineDashedMaterial, but it is not perfect. I am new to threejs. Any idea how to make a surface with dots using a grid or a plane?

<Canvas frameloop="demand" camera={{ position: [75, 1, 0.1], zoom: 15 }}>
<mesh>
    <gridHelper
        material={
          new THREE.LineDashedMaterial({
            dashSize: 0.1,
            gapSize: 1,
            vertexColors: true,
          })
        }
        rotation-y={[Math.PI / 2]}
        position={[0, 12.5, 0]}
        onUpdate={(grid) => grid.computeLineDistances()}
      />
</mesh>
</Canvas>

Codesandbox: here

What I am trying to achieve is something like this

Try this

import "./styles.css";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import * as THREE from "three";

export default function App() {
  const pointsGeometry = new THREE.BufferGeometry();
  const sideLength = 10;
  const numPointsPerSide = 20;
  const pointsPositions = [];

  for (let i = 0; i < numPointsPerSide; i++) {
    for (let j = 0; j < numPointsPerSide; j++) {
      const x = (i / (numPointsPerSide - 1)) * sideLength - sideLength / 2;
      const y = 0;
      const z = (j / (numPointsPerSide - 1)) * sideLength - sideLength / 2;
      pointsPositions.push(x, y, z);
    }
  }

  pointsGeometry.setAttribute(
    "position",
    new THREE.BufferAttribute(new Float32Array(pointsPositions), 3)
  );

  return (
    <div className="App">
      <Canvas frameloop="demand" camera={{ position: [75, 1, 0.1], zoom: 4 }}>
        <mesh position={[0, 0, 0]}>
          <cylinderGeometry args={[1, 1, 25, 32, 64, false]} />
          <meshBasicMaterial color={0x00ff00} />
          <meshBasicMaterial color={0xff0000} />
          <points
            geometry={pointsGeometry}
            position={[0, 12.5, 0]}
            rotation-y={-Math.PI / 2}
          >
            <pointsMaterial color={0xff0000} size={0.1} />
          </points>
        </mesh>
        <OrbitControls />
      </Canvas>
    </div>
  );
}

https://codesandbox.io/p/sandbox/grid-test-forked-8dmwy4?file=%2Fsrc%2FApp.tsx%3A6%2C32