Adding multiple markers with infowindows (Google Maps API) ReactJS

Question

I'm trying to develop something like this,but using ReactJS, I was looking for something related but there is only implementations using vanilla. I check this [Adding multiple markers with infowindows (Google Maps API) [Trying to bind multiple InfoWindows to multiple Markers on a Google Map and failing

This is some of the code that I have developed without success, it's a little bit complex because there's a combination of MarkerCluster,Markers,InfoWindow and Polygons.

render() {
if(this.state.info === false){
  return(
    <Loader/>
  )
}
else{
  var markCluster = null
  var pools = null
  if(this.state.marks){
    var markerStuff = []
   this.state.marks.map(function(v,i){
     var mark =
      <Marker key={i}
        name={v.subtitle}
        icon={v.icon}
        position={{lat: parseFloat(v.latitud), lng: parseFloat(v.longitud)}}
        onClick={() => this.infoPoint(v)}
        >
        {this.state.isOpen && <InfoWindow onCloseClick={() => this.closeMarker()}>
              <div className="scroll">
              <div className="row">
                <label>Nombre:</label> <span>{this.state.infoPoint.nombre}</span>
                </div>
                <br/>
                <div className="row">
                  <label>Expediente:</label> <span>{this.state.infoPoint.expediente}</span>
                </div>
          </div>
        </InfoWindow>}
        </Marker>
      markerStuff.push(mark)
    },this)
    markCluster = <MarkerClusterer
                      averageCenter
                      gridSize={30}
                    >
                {markerStuff}
            </MarkerClusterer>
  }
  if(this.state.pools){
    var polsOptions = {
      fillColor:'#41a0f4',
      strokeWeight: 1,
      fillOpacity:0.4
    }
   pools =  <Polygon
                paths={this.state.pools}
                options={polsOptions}
                />
    }
    const GettingStartedGoogleMap = withGoogleMap(props => (
      <GoogleMap
        defaultZoom={3}
        center={{lat: 19.435031,lng: -99.167357}}
        ref={props.onMapLoad}
      >
      {markCluster}
      {pools}
      </GoogleMap>
    ));
  return (
    <div className="googleMap">
      <GettingStartedGoogleMap
        containerElement={
          <div style={{ height: `100%` }} />
        }
        mapElement={
          <div style={{ height: `100%` }} />
        }
        center={{ lat: -25.363882, lng: 131.044922 }}
        onMapLoad={this.onMapLoad}
      />
    <MapModule queryIt={this.queryRegs}/>
    </div>
  );
  }
 }
 }

When I call my onClick function I change the state and set the information of the InfoWindow, but it happens that all the markers show the same info.

infoPoint(e){
  this.setState({isOpen: true,
    infoPoint: e
 })
}
 closeMarker(){
   this.setState({isOpen: false
   })
 }