I am new to programming and react three fiber and I can't figure out why the marker I place on to the globe using geolocation data will not "stick" to the globe. I have played around with conversion from lat to long => Cartesian Coords but nothing will work. The sphereGeometry is set to 1 so I left out the radius in the equations. I might be simple error. If some could point that out for me that would be awesome. Otherwise, I am stuck on this one issue. I have some sample code here.

function Sphere() {

  const globeRad = 1;
  const xpos = 30;
  const ypos =30;

  function convertLatLongToCartesian(p){
    let lat =  p.lat * ( Math.PI/180);
    let lng = p.lng * ( Math.PI/180)
  
    let x= Math.cos(lat) * Math.sin(lng)
    let y=   Math.sin(lat)* Math.sin(lng) 
    let z=  Math.cos(lat) 

    return{x,y,z}
  }

  let point1 = {
    lat: 38.9513216,
    lng: -104.7986176
  }

  let point2 = {
    lat: -23.6345,
    lng: 102.5528
  }

 let pos = convertLatLongToCartesian(point2)
 console.log(pos)

 const [colorMap, normalMap,specularMap, cloudsMap] = useLoader(TextureLoader, [greyEarth,normMap, specMap, clouds]);

 const earthRef = useRef();
 const cloudsRef = useRef();
 const coordRef = useRef();

 useFrame(({clock}) => {

  const elaspsedTime = clock.getElapsedTime();
   earthRef.current.rotation.y= elaspsedTime /20;
   cloudsRef.current.rotation.y= elaspsedTime /15;
   coordRef.current.rotation.y= elaspsedTime /20;
 })
 
 return (
      <>
              <pointLight color="#f6f3ea" position={[2,0,5]} intensity={1.2}/>
        <Stars radius={300} depth={60} count={20000} factor={7} saturation={0} fade={true}/>
        <mesh ref={cloudsRef} >
        <sphereGeometry args={[1.005,30,30]}/>
        <meshPhongMaterial 
        map={cloudsMap} 
        opacity={0.4} 
        depthWrite={true} 
        transparent={true} 
        side={THREE.DoubleSide}/>
      </mesh>
        <mesh ref={earthRef}>
          <sphereGeometry args={[1,30,30]}/>
          <meshPhongMaterial specularMap={specularMap}/>
          <meshStandardMaterial map={colorMap} normalMap={normalMap} metalness={0.4} roughness={0.7}/>
          <mesh ref={coordRef} position={pos.x,pos.z,pos.y}>
          <sphereBufferGeometry args={[0.1,20,20]}/>
          <meshBasicMaterial color="red"/>
        </mesh>
        </mesh>
        </>
    )
}

export default Sphere```

Please let me know what I am doing wrong. Thanks!