MarkerClusterer raise error when adding new marker

Hi all, is there a way to refresh MarkerClusterer when receive new props from my parent component? Now I'm doing this

const MapWithASearchBox = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=hidden&v=3.exp&language=it&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  lifecycle({
    componentDidMount(){
      console.log(this);
      // this.mapInstance = this.mapNode.context[MAP];
    },
    componentDidUpdate(prevProps,prevState){
      console.log(this);
      // console.log("Update");
      // console.log(this.props.selectedServicePoint);
      // console.log("componentDiUpdate called");
    },
    componentWillMount() {
      const refs = {}

      this.setState({
        bounds: null,
        // center: {
        //   // lat: this.props.servicePoints[0].latitude, lng: this.props.servicePoints[0].longitude
        //   lat: this.props.selectedServicePoint.latitude, lng: this.props.selectedServicePoint.longitude
        // },
        markers: [],
        // servicePoints:[],
        onMapMounted: ref => {
          refs.map = ref;
        },
        onBoundsChanged: () => {
          this.setState({
            bounds: refs.map.getBounds(),
            center: refs.map.getCenter(),
          })
        },
        onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        },
        getMarkers:(data)=>{

        },
        onPlacesChanged: () => {
          const places = refs.searchBox.getPlaces();
          const bounds = new google.maps.LatLngBounds();

          places.forEach(place => {
            if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport)
            } else {
              bounds.extend(place.geometry.location)
            }
          });
          const nextMarkers = places.map(place => ({
            position: place.geometry.location,
          }));
          const nextCenter = _.get(nextMarkers, '0.position', this.state.center);

          this.setState({
            center: nextCenter,
            markers: nextMarkers,
          });
          // refs.map.fitBounds(bounds);
        },
      })
    },
  }),
  withHandlers({
    onMarkerClustererClick: () => (markerClusterer) => {
      const clickedMarkers = markerClusterer.getMarkers()
      console.log(`Current clicked markers length: ${clickedMarkers.length}`)
      console.log(clickedMarkers)
    },
  }),
  withStateHandlers(() => ({
    isOpen: {},
  }), {
    onToggleOpen: ({ isOpen }) => (id) => ({
      isOpen: {
        ...isOpen,
        [id]:isOpen[id]==undefined?true:!isOpen[id]
      },
    })
  }),
  withScriptjs,
  withGoogleMap
)(props =>{
  return <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={11}
    center={{
      lat: props.selectedServicePoint.latitude, lng: props.selectedServicePoint.longitude
    }}
    zoom={11}
    options={{
      gestureHandling:'cooperative',
      streetViewControl:false,
      fullscreenControl:false
    }}
  // onBoundsChanged={props.onBoundsChanged}
  >
    <MarkerClusterer
      onClick={props.onMarkerClustererClick}
      averageCenter
      enableRetinaIcons
      gridSize={60}
    >
      {props.servicePoints.map((x) =>
        <Marker
          onClick={()=>{
            props.onToggleOpen(x.id);
          }}
          animation={google.maps.Animation.DROP}
          key={x.id}
          icon={{
            url: 'assets/images/maps/Preferenza'+x.idTipoPreferenza+'.png', // url
            scaledSize: new google.maps.Size(50, 50), // scaled size
            origin: new google.maps.Point(0,0), // origin
            anchor: new google.maps.Point(0, 0) // anchor
          }}
          position={{ lat: x.latitude, lng: x.longitude }}
        >
          {props.isOpen[x.id]===true &&
            <InfoWindow
              key={x.id}
              options={{ closeBoxURL: ``, enableEventPropagation: true }}
              onCloseClick={()=>{
                props.onToggleOpen(x.id);
              }}>
              <div>
                <strong><label>{x.name}</label></strong><br></br>
                <em><label>{x.description}</label></em><br></br>
                <label>{x.address}</label>
              </div>
            </InfoWindow>}
         </Marker>
      )}
    </MarkerClusterer>

  </GoogleMap>
  }
);

But when I get updated values (props.servicePoints) from the server, an error appear to me

I saw that the error seems to be related to MarkerClusterer, because if I comment the MarkerClusterer code, all is working fine. Any ideas? Thank you so much for your help!

tomchentw / react-google-maps

MarkerClusterer raise error when adding new marker #1042