How to remove all markers without any side effect in react-google-map?

Question

I am working with react-google-maps component.

Since I have a lot of markers to be shown on the google map, I used MarkerClusterer.

I can select or deselect rows in the ag-grid table to make the marker shown on react-google-map.

If I select all, all markers are included in checkedIPs and if I deselect all, all markers are removed from checkedIPs.

MapWithMarkers component only shows markers in checkedIPs.

Now, adding markers works fine but removing markers(deselecting from the ag-grid table) doesn't work as I expected.

It takes a long time.

https://i.stack.imgur.com/kmoRn.jpg

Please help me with this problem. Code is below.

const MapWithMarkers = compose(
  withStateHandlers(
    () => ({
      isOpen: -1
    }),
    {
      onToggleOpen: ({ isOpen }) => index => {
        return {
          isOpen: isOpen === index ? -1 : index
        };
      },
      handleMapClick: () => () => {
        return {
          isOpen: -1
        };
      },
      onMarkerClustererClick: () => markerClusterer => {}
    }
  ),
  withScriptjs,
  withGoogleMap
)(props => {
  return (
    <GoogleMap
      defaultZoom={props.zoomLevel}
      defaultCenter={props.center}
      onClick={props.handleMapClick}
    >
      {props.checkedIPs.length !== 0 ? (
        <MarkerClusterer
          onClick={props.onMarkerClustererClick}
          enableRetinaIcons
          gridSize={50}
        >
          {props.cache.map((location, index) => {
            if (props.checkedIPs.includes(location.ipAddress)) {
              return (
                <Marker
                  key={index}
                  position={{ lat: location.latitude, lng: location.longitude }}
                  onClick={() => props.onToggleOpen(index)}
                >
                  {props.isOpen === index && (
                    <InfoWindow
                      position={{
                        lat: location.latitude,
                        lng: location.longitude
                      }}
                      onCloseClick={() => props.onToggleOpen(index)}
                    >
                      <div>
                        <h6>IP Address: {location.ipAddress}</h6>
                      </div>
                    </InfoWindow>
                  )}
                </Marker>
              );
            }
          })}
        </MarkerClusterer>
      ) : (
        <MarkerClusterer />
      )}
    </GoogleMap>
  );
});

export default class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zoomLevel: 2,
      center: { lat: 14.397, lng: 160.644 },
      markers: [],
      checkedIPs: [],
      isOpen: -1
    };
  }

  componentWillReceiveProps(nextProps) {
    const { cache, checkedIPs } = nextProps;
    this.setState({
      markers: cache,
      checkedIPs: checkedIPs
    });
  }

  render() {
    return (
      <MapWithMarkers
        googleMapURL="..."
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%`, width: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        cache={this.state.markers}
        checkedIPs={this.state.checkedIPs}
        zoomLevel={this.state.zoomLevel}
        center={this.state.center}
      />
    );
  }
}
`````````



All markers should be removed very fast without any effect, 
but currently, as I navigate all markers and check if it is contained in checkedIPs, it stops for a while and then disappear.