Please help! why two infowindow appear after click a marker

[frozen-giraffe]

Two infowindows appear after clicking a marker, the weird thing is sometimes in inspection mode infowindow appear normally.

import { DirectionsRenderer,GoogleMap, Marker,withGoogleMap,withScriptjs, InfoWindow } from "react-google-maps";
import PlacesAutocomplete,{ geocodeByAddress, getLatLng } from 'react-places-autocomplete';
import { nanoid } from 'nanoid'
import React, { Component } from 'react'

const API_KEY = 'AIzaSyCItFAnykxtWLwWWcg4-WPlto-SwSFWui8'

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}, {lat: -33.865143,lng: 151},],
            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>
        )
    }
}

[frozen-giraffe]

Here's the screenshoot of two infowindows on one marker

[zharikovartem]

As far as I understand, this is due to strict mode

[Belalm]

it is because of the strict mode. thanks for the comment @zharikovartem

const nextConfig = { reactStrictMode: true, //set to false };