React map why two infowindows appear after click a marker - reactjs

Question

I really don't understand why two infowindows appear after clicking a marker, the weird thing is sometimes in inspection mode infowindow appear normally. I'm wondering if the callback cause the problem. Code are below:
import { GoogleMap, Marker,withGoogleMap,withScriptjs, InfoWindow } from "react-google-maps";
import { nanoid } from 'nanoid'
import React, { Component } from 'react'
const API_KEY = 'INSERT_API_KEY'
const MyMapComponent = withScriptjs(withGoogleMap((props) =>
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: -33.897, lng: 151.144 }}
>
{props.locs.map((location)=>{
const onMarkerClick = props.onMarkerClick.bind(this,location)
return <Marker
key={nanoid()}
position={location}
onClick={onMarkerClick}>
</Marker>
})}
{props.showingInfoWindow &&
<InfoWindow position={props.activeMarker} onCloseClick={props.markerInfoClose}>
<h1>Details</h1>
</InfoWindow>}
</GoogleMap>
));
export default class Test extends Component {
constructor(props) {
super(props);
this.state = {
locations:[{lat: -33.865143,lng: 151.2},],
showingInfoWindow: false,
activeMarker: {},
};
}
onMarkerClick = (location) =>{
this.setState({
activeMarker: location,
showingInfoWindow: true
});
}
onClose = () => {
if (this.state.showingInfoWindow) {
this.setState({
activeMarker: null,
showingInfoWindow: false
});
}
};
render() {
console.log(this.state.activeMarker)
return (
<div>
<MyMapComponent
locs={this.state.locations}
onMarkerClick={this.onMarkerClick}
showingInfoWindow={this.state.showingInfoWindow}
activeMarker={this.state.activeMarker}
markerInfoClose={this.onClose}
containerElement={ <div style={{ height: `1000px`, width: '1000px' }} /> }
mapElement={ <div style={{ height: `100%` }} /> }
loadingElement={<div style={{ height: `100%` }} />}
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${API_KEY}`}
>
</MyMapComponent>
</div>
)
}
}
ScreenShoot: