Updating Markers to Google Maps in google-map-react

Question

onGoogleApiLoaded not invoked on locations data change, Is there any way to achieve this?

I tried to use useEffect to load markers but then I have to save map and maps objects in useRef as well as markers

Is there any easier way to achieve this?

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