Infobox duplicated in array.map

[bdegiglioD6]

I am having a weird issue where I am mapping through and array of locations and displaying a map with markers and for each marker there is a child info-box. The issue I am seeing is that for each marker, there are two info-boxes, one is correct and has the title etc and the other is an empty info-box with just a close x and a down error. Please see below.

<GoogleMap
mapContainerStyle={containerStyle}
zoom={zoom}
options={options}
center={center}
>
{locations.map((item: ListItems, index?: number) => (
<Marker
    key={index}
    position={{
    lat: item.address.coordinates.lat,
    lng: item.address.coordinates.lon,
    }}
    icon={pin}
    label={{ text: "$67", className: "marker-label" }}
    onClick={() => {
    handleMarkerClick(item);
    }}
    clickable
>
    <InfoWindow
    key={`testing-${index}`}
    position={{
        lat: item.address.coordinates.lat,
        lng: item.address.coordinates.lon,
    }}
    >
    <div className="test">
        <p>InfoWindow</p>
    </div>
    </InfoWindow>
</Marker>

see screenshot below:
[(https://i.imgur.com/yTrgHCy.jpg)]

[bdegiglioD6]

If anyone comes across this issue: the solution is here

tldr: StrictMode was detecting unexpected side effects on my map component, which was intentionally double-invoking my useState function, making two InfoWindows appear, instead of just one.

Remove strict mode and the issue should go away.