here i am using reverse geocoding i am trying to render map of user location by sending latitude and logitude to reverse geocoding api but it is not rendring only starting coordinates used as center is rendered

import ReactDOM from "react-dom";
import React, { useRef, useEffect, useState } from "react";
import mapboxgl from "mapbox-gl";



import "./map.css";

mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;

function Map() {
  const [mapData, setMapdata] = useState(null);
  const mapContainerRef = useRef(null);
  const popUpRef = useRef(new mapboxgl.Popup({ offset: 15 }));

 // initialize map when component mounts
  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      // See style options here: https://docs.mapbox.com/api/maps/#styles
      style: "mapbox://styles/mapbox/streets-v11",
      center: [85, 27], // starting position
      zoom: 12.5,
});

    if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function (position) {
        map.on("load", function () {
     
          map.addSource("myLocation", {
            type: "geojson",
            // Use a URL for the value for the `data` property.
            data:`https://api.mapbox.com/geocoding/v5/mapbox.places/${position.coords.latitude},
                  ${position.coords.longitude}.json? 
                  access_token=${process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}`
          });
        });
    });
}




    // clean up on unmount
    return () => map.remove();
  }, []); 

  return <div className="map-container" ref={mapContainerRef} />;
}

export default Map;