React ThreeJs render problem – Computed radius is NaN – Reactjs

I am new to threejs and I have a problem with a stars models that I am trying to show on my screen.
The points works, but I am getting this message:

THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.

after looking at my code and after seeing that the part that doing the problem was the stars canvas.
StarsCanvas:

const StarsCanvas = () => {
  return (
    <div className="w-full h-auto absolute inset-0 z-[-1]">
      <Canvas camera={{ position: [0, 0, 1] }}>
        <Suspense fallback={null}>
          <Stars />
        </Suspense>
        <Preload all />
      </Canvas>
    </div>
  );
};

this is the Canvas that I am using and below is the Stars component:

Stars:

import * as random from "maath/random/dist/maath-random.esm";
...
const Stars = (props) => {

  const ref = useRef();
  const [sphere] = useState(() =>
    random.inSphere(new Float32Array(5000), { radius: 1.2 })
  );

  useFrame((state, delta) => {
    ref.current.rotation.x -= delta / 10;
    ref.current.rotation.y -= delta / 15;
  });

  return (
    <group rotation={[0, 0, Math.PI / 4]}>
      <Points ref={ref} positions={sphere} stride={3} frustumCulled {...props}>
        <PointMaterial
          transparent
          color="#f272c8"
          size={0.002}
          sizeAttenuation={true}
          depthWrite={false}
        />
      </Points>
    </group>
  );
};

the useFrames is making the stars move and it is working.

the part that doing the problem is most likely the
random.inSphere(new Float32Array(5000), { radius: 1.2 })
it is apparently gives values that make the radius NaN (maybe after the loading?).
I am using "@react-three/fiber" and "@react-three/drei libraries

I read the docs but didn’t found any solution to my problem, would like to have some help
Thanks!

Rewriting the random position and it still doesn’t work.
writing a different way to showing stars