i am trying to make star canvas and it works fine but this error, shows on console and i don’t know what it means exactly.. I’m new to react-three

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

this is bufferGeometry:
BufferGeometryattributes: {position: BufferAttribute}position: BufferAttribute {isBufferAttribute: true, name: '', array: Float32Array(5000), itemSize: 3, count: 1666.6666666666667, …}array: Float32Array(5000)[0 … 99][100 … 199][200 … 299][300 … 399][400 … 499][500 … 599][600 … 699][700 … 799][800 … 899][900 … 999][1000 … 1099][1100 … 1199][1200 … 1299][1300 … 1399][1400 … 1499][1500 … 1599][1600 … 1699][1700 … 1799][1800 … 1899][1900 … 1999][2000 … 2099][2100 … 2199][2200 … 2299][2300 … 2399][2400 … 2499][2500 … 2599][2600 … 2699][2700 … 2799][2800 … 2899][2900 … 2999][3000 … 3099][3100 … 3199][3200 … 3299][3300 … 3399][3400 … 3499][3500 … 3599][3600 … 3699][3700 … 3799][3800 … 3899][3900 … 3999][4000 … 4099][4100 … 4199][4200 … 4299][4300 … 4399][4400 … 4499][4500 … 4599][4600 … 4699][4700 … 4799][4800 … 4899][4900 … 4999]buffer: ArrayBuffer(20000)byteLength: 20000byteOffset: 0length: 5000Symbol(Symbol.toStringTag): "Float32Array"[[Prototype]]: TypedArraycount: 1666.6666666666667isBufferAttribute: trueitemSize: 3name: ""normalized: falseupdateRange: {offset: 0, count: -1}usage: 35048version: 13226__r3f: {type: 'bufferAttribute', previousAttach: undefined, memoizedProps: {…}, eventCount: 0, root: ƒ, …}[[Prototype]]: Object[[Prototype]]: ObjectboundingBox: nullboundingSphere: Sphere {center: _Vector3, radius: NaN}drawRange: {start: 0, count: Infinity}groups: []index: nullisBufferGeometry: truemorphAttributes: {}morphTargetsRelative: falsename: ""type: "BufferGeometry"userData: {}uuid: "645a7115-f10e-46cc-916d-eb113e800dc2"__r3f: {type: 'bufferGeometry', previousAttach: _BufferGeometry, memoizedProps: {…}, eventCount: 0, root: ƒ, …}_listeners: {dispose: Array(1)}id: 5[[Prototype]]: EventDispatcher console.error @ chunk-MFR6QQH2.js?v=0ff249ed:17939 Show 1 more frame Show less

and here is my code for this

import { useState, useRef, Suspense } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { Points, PointMaterial, Preload } from '@react-three/drei'
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>
  )
}

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>
  )
}

export default StarsCanvas

Thanks!

i did try the docs but they were too much for a beginner. i would be best i there’s any guide or solution.