Uso de la API de GoogleMap para mostrar ubicaciones personalizadas

Tengo una matriz de objetos json llamados data importados; tiene una propiedad llamada dirección. Google map api busca las coordenadas de la propiedad de la dirección y debería generar marcadores personalizados a partir de una matriz llamada ubicaciones.

Pero el valor de las ubicaciones dentro de fetchLocations() y getCoordinates son diferentes cuando consuelo.log, aunque ambos representan la misma variable.

¿Qué hice mal?

 import React, { useEffect, useState } from 'react' import { GoogleMap, useLoadScript, InfoWindowF, MarkerF } from "@react-google-maps/api" import { data } from './data' const API_KEY = "1234567890" export default function MyComponent() { const { isLoaded }: any = useLoadScript({ googleMapsApiKey: API_KEY, }) const result : any[] = []; const [locations, setLocations] = useState(result); useEffect(() => { const fetchLocations = async () => { const locations = await Promise.all(data.map(getCoordinates)); console.log("Locations in fetchLocations", locations) }; fetchLocations(); }, []); const getCoordinates = async (obj: any) => { const objData = await fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + obj.address + '&key=' + API_KEY) const response = await objData.json() const latitude = response.results[0].geometry.location.lat; const longitude = response.results[0].geometry.location.lng; const position = { 'lat': latitude, 'lng': longitude } locations.push(position) console.log("Locations in get Cooordinate", locations) } if (!isLoaded) return <div>Loading...</div> return ( <div className='flex flex-col'> <GoogleMap zoom={11} center={{ lat: 35.685661305110415, lng: 139.75255896834707 }} mapContainerClassName='w-full h-[32em] m-2 rounded-lg' > <> {locations.map(location=>{ return( <> <MarkerF position={{ lat: location.lat, lng: location.lng }} /> </> ) }) } </> </GoogleMap> <button onClick={() => { setSelected(!selected) }}>Click</button> </div> ) }