How to properly update Markers on an existing Google Map with react-google-maps/api

Question

I am creating markers on a map, based on a list of places passed in the state of a component using https://www.npmjs.com/package/@react-google-maps/api. When the places are updated, I want to update the markers shown on the map but I'm hitting issues around marker loading times. It seems like Marker onLoad function is triggered way too late to properly display them on the map.

Here's what I have to load the map and the markers:

render() {
 return <LoadScript googleMapsApiKey=<api_key>>
  <div className="map">
    <GoogleMap
      mapContainerClassName="map-container"
      center={this.cityCoord}
      defaultZoom={10}
      onLoad={this.onLoad}>
      {this.renderPlacesMarkers()}
    </GoogleMap>
  </div>
</LoadScript>
}

renderPlacesMarkers=() => {
    return this.state.places?.map((el, ind) => {
      let pd = el.place_data;
      if (pd.coordinates) {
        var onMarkerClickEvent = ((index, pd) => {
          return event => {
            this.handleMarkerClick(index, pd);
          };
        })(ind, pd);
        return (
            <MarkerF
              key= {ind}
              position={ pd.coordinates }
              animation={ 2 /*window.google.maps.Animation.DROP*/ }
              onClick={onMarkerClickEvent }
              onLoad= {m => {
                this.markers.splice(ind, 0, {id: pd.name, marker: m});
              }}
            />
        );
      }
    })
  }

The issues is that markers don't show up properly on the map, because it seems like onLoad for the marker is actually getting triggered a bit too late. So I'm wondering if there is there a better way to handle the marker reloading/updates?