Estoy codificando usando react + firestore 9 en una aplicación que tiene que representar un mapa de Google y luego, según la consulta, muestra algunos marcadores.

He estado tratando de hacer que la aplicación dibuje algunos marcadores básicos con algunos datos que obtengo de la base de datos, la consulta se ejecuta lo más rápido posible, probé muchas soluciones pero el mapa no muestra el marcadores para mí. El siguiente es el código que estoy usando en el componente:

 function fetchMarkers(){ var markerData = []; getDocs(query(collection(db, "places"))) .then((foo) => { foo.forEach((doc) => { markerData.push(doc.data()) }) }) return markerData; } var arrayData = []; export default function Map() { fetchMarkers().then((value) => { arrayData = value; console.log(arrayData) }) return ( <div id="map"> <LoadScript googleMapsApiKey={apiKey}> <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={13} options={{ fullscreenControl: false, mapTypeControl: false, streetViewControl: false, styles: [{ elementType: "labels", featureType: "poi", stylers: [{ visibility: "off", }], }], }}> {arrayData.map((marker) => <Marker key={marker.id} position={{ lat: marker.latitud, lng: marker.longitud }} />) } </GoogleMap> </LoadScript> </div> )

Lo que sucede aquí es que la página se carga antes de que arrayData se llene con el contenido del documento relacionado con él, y aún no coloca los marcadores después.

Agradecería mucho sus sugerencias, gracias de antemano.