onGoogleApiLoaded no se invoca en el cambio de datos de ubicaciones, ¿hay alguna forma de lograr esto?

Intenté usar useEffect para cargar marcadores, pero luego tengo que guardar mapas y objetos de mapas en useRef, así como marcadores

¿Hay alguna manera más fácil de lograr esto?

 import { useEffect, useRef } from 'react'; import GoogleMapReact from 'google-map-react'; export type SimpleMapProps = { locations: any[]; }; export default function SimpleMap({ locations }: SimpleMapProps) { const defaultProps = locations.length > 0 ? { center: { lat: locations[0].Lat, lng: locations[0].Lon }, zoom: 11 } : { center: { lat: 0, lng: 0 }, zoom: 11 }; const handleApiLoadData = (map: any, maps: any) => { for (let i = 0; i < locations.length; i++) { const { Lat, Lon, hn, cur, rate } = locations[i]; const marker = new maps.Marker({ animation: maps.Animation.DROP, position: { lat: Lat, lng: Lon }, map }); marker.customInfowindow = new maps.InfoWindow({ content: `<div>${hn} </br> (${cur} ${rate})</div>` }); marker.addListener('click', () => { marker.customInfowindow.open(map, marker); }); } }; return ( // Important! Always set the container height explicitly <div style={{ height: '50vh', width: '100%' }}> <GoogleMapReact bootstrapURLKeys={{ key: 'XXXXXXXXXXXXXXX' }} center={defaultProps.center} zoom={defaultProps.zoom} yesIWantToUseGoogleMapApiInternals onGoogleApiLoaded={({ map, maps }) => handleApiLoadData(map, maps)} /> </div> ); }