Ripple not displaying in React Three Fiber, and i’m not sure why

I am trying to create a ripple, below is my code but yet its not rendering on the screen, yet i seem not to be getting any errors.

import './App.css'; 
import { useMemo } from 'react';
import * as THREE from 'three'; 
import { Canvas, useLoader} from '@react-three/fiber';
import circleImg from './assets/circle.png'; 
import { Suspense } from 'react';

function Points(){
  
  const imgTex = useLoader(THREE.TextureLoader, circleImg); 


  const count = 500; 
  const sep = 3;  

  const positions = useMemo(() => {
     let coords = [];

     for(let i = 0; i < count; i++){
      for(let j = 0; j < count; j++){
        let x = sep * (i - count/2);
        let z = sep * (j - count/2);
        let y = 0;
        coords.push(x,y,z);
      }
     }

     let arr = new Float32Array(coords); 
     console.log(arr); 

     return arr; 

  }, [count, sep]);

  return(
    <points>
      <bufferGeometry attach="geometry">
        <bufferAttribute 
          //attach="attributes.position"
          attachObject={['attributes','position']} 
          array={positions}
          count={positions.length/3}
          itemSize={3}
        />
      </bufferGeometry>
      
      <pointsMaterial 
        attach="material"
        //map={imgTex}
        color={0x00AAFF}
        size={0.5}
        sizeAttenuation
        transparent={false}
        alphaTest={0.5}
        opacity={1.0} 
      />
    </points>


  )
}

function AnimationCanvas(){
  return (
    <Canvas 
        camera={{position: [100, 10, 0], fov: 75}}> 
        <Points />
    </Canvas>
  )
}


function App() { 

  return (
      <div className="anim">

        <Suspense fallback={<div>loading...</div>}>
          <AnimationCanvas />
        </Suspense>
      
       </div>
  )
}

export default App

can someone please help out and tell me what i might be doing wrong.
Thanks in advance.