react-google-maps calls empty InfoWindow - reactjs

Question

I have problem with first call InfoWindow, it calling like 2 times and one have not any text/info and the second infoWindow have correct my info (number 2 on-screen). If I will click to another my Markeк this empty InfoWindow will stay in the first place. But if I will try to close the empty window and open any my marker this empty window will shows again in a new place.
my code:
function MapCreator() {
const [selectedPoint, setselectedPoint] = useState(null);
const [data,setData] = useState([]);
useEffect(() => {
axios.get('api/coordinates')
.then(values=>{
console.log(values.data);
setData(values.data);
})
const listener = e => {
if (e.key === "Escape") {
setselectedPoint(null);
}
};
window.addEventListener("keydown", listener);
return () => {
window.removeEventListener("keydown", listener);
};
}, []);
return (
<GoogleMap
defaultZoom={14}
defaultCenter={{ lat: 50.444571, lng: 30.559099 }}
>
{data.map(park => (
<Marker
key={park._id}
position={{
lat: park.coordinates.latitude,
lng: park.coordinates.longitude
}}
onClick={() => {
setselectedPoint(park);
}}
icon={{
url: nfcIcon,
scaledSize: new window.google.maps.Size(60, 60)
}}
/>
))}
{selectedPoint && (
<InfoWindow
onCloseClick={() => {
setselectedPoint(null);
}}
position={{
lat: selectedPoint.coordinates.latitude,
lng: selectedPoint.coordinates.longitude
}}
>
<div>
<h2>Device ID: {selectedPoint.identificatorNFC}</h2>
<p>Date: {new Date(selectedPoint.date) .toUTCString()}</p>
</div>
</InfoWindow>
)}
</GoogleMap>
);
}
const MapWrapped = withScriptjs(withGoogleMap(MapCreator));
export default function App() {
return (
<div style={{ width: `100%`, height: "100vh" }}>
<MapWrapped
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${
keys.googleApi
}`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}

Answer 1

Tbh, I don't see any kind of problem in your code but I suggest try this out:
function MapCreator() {
const [selectedPoint, setselectedPoint] = useState(null);
const [data,setData] = useState([]);
useEffect(() => {
axios.get('api/coordinates')
.then(values=>{
console.log(values.data);
setData(values.data);
})
const listener = e => {
if (e.key === "Escape") {
setselectedPoint(null);
}
};
window.addEventListener("keydown", listener);
return () => {
window.removeEventListener("keydown", listener);
};
}, []);
return (
<GoogleMap
defaultZoom={14}
defaultCenter={{ lat: 50.444571, lng: 30.559099 }}
>
{data.map(park => (
<Marker
key={park._id}
position={{
lat: park.coordinates.latitude,
lng: park.coordinates.longitude
}}
onClick={() => {
setselectedPoint(park);
}}
icon={{
url: nfcIcon,
scaledSize: new window.google.maps.Size(60, 60)
}}
>
{selectedPoint && selectedPoint._id === park._id && (
<InfoWindow onCloseClick={() => setselectedPoint(null)}
>
<div>
<h2>Device ID: {selectedPoint.identificatorNFC}</h2>
<p>Date: {new Date(selectedPoint.date) .toUTCString()}</p>
</div>
</InfoWindow>
)}
</Marker>
))}
</GoogleMap>
);
}
const MapWrapped = withScriptjs(withGoogleMap(MapCreator));
export default function App() {
return (
<div style={{ width: `100%`, height: "100vh" }}>
<MapWrapped
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${
keys.googleApi
}`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}