hola a todos, estoy creando una aplicación en la que el usuario ingresa el nombre del país y mostrará los datos del país (obtención de datos de API rescountriesApi) y también estoy obteniendo la latitud y longitud de la API y pasando al componente de mapa. El problema es la primera vez que ingreso el nombre del país. mapa que muestra la ubicación correcta del país en el mapa después de ingresar al otro país, muestra el país anterior en el mapa y después de actualizar toda la página muestra la ubicación correcta en el mapa.

1) Datos de Api almacenados en países estatales

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

2) código Maphook

 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 }} />; };