hello everyone iam creating app in which user enter counrty name and it will show country data(data fetching from API rescountriesApi) and iam also fetching the latitude and longitude from API and passing to Map component the problem iam getting first time iam entering country name the map showing correct location of the country in map after iam entering the other country it showing still previous country on map and after refreshing the whole page it showing correct in map.

1)Data from Api stored in state countries

{
            countries.map(({ latlng }) => {
              const [lat, lang] = latlng;
              {/* console.log(lat, lang); */ }
              return <Maphook lat={lat} lang={lang} />
            })

          }

2)Maphook code

const Maphook = ({ lat, lang }) => {
    const { ref, map, google } = useGoogleMaps(
        // Use your own API key, you can get one from Google (https://console.cloud.google.com/google/maps-apis/overview)
        "",
        // NOTE: even if you change options later
        {
            center: { lat: lat, lng: lang },
            zoom: 3,
        },
    );
    // console.log(map); // instance of created Map object (https://developers.google.com/maps/documentation/javascript/reference/map)
    console.log(google); // google API object (easily get google.maps.LatLng or google.maps.Marker or any other Google Maps class)
    return <div ref={ref} style={{ width: 400, height: 300 }} />;
};