#react-google-maps/api / Feature click event resets state - reactjs

Question

I am using #react-google-maps/api and I'm trying to set click event on gmap features which appends its area to React state.
enter image description here
but every time I click the feature, it seems the state has been set to empty array(initial state). and the event append one string to it. so the state doesn't get longer.
in this component i put one button that fires the same click event and that works fine. I don't know why this happens.
const MapComponent = ({area, setArea}) => {
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: "APIKEY"
})
const onClickFeature = e => {
let tgt = e.feature.getProperty("S_NAME")
if(tgt){
addArea(tgt)
}
}
const addArea = tgt => {
let copy = [...area]
copy.push(tgt)
setArea(copy)
}
const renderMap = () => {
const onLoad = async map => {
await getGeoJson().then(res => {
initPolygon(map,res) //draw polygons with feature collection
map.data.addListener("click", e => {
onClickFeature(e)
})
})
}
return <><GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={14}
onLoad={onLoad}
onClick={onClickFeature}
>
</GoogleMap>
<button onClick={() => addArea('someplace')}>CLICK</button> {/* This works fine */}
<div>Selected: {area} </div>
</>}
if (loadError) {
return <div>Map cannot be loaded right now, sorry.</div>
}
return isLoaded ? renderMap() : null
}

Answer 1

I can see that your use case should have an area state which should be an array and everytime the geoJsondata feature is clicked, it will get the value of "S_NAME" property. Then it will add it to the area state array.
As you have not provided your whole code, I created your use case using the Google Maps sample geojson data. Everytime the feature is clicked, it will get the "title" property and add it to the "area" state.
Here's the sample code (Note: please use your API key in the index.js for the code to work) and code snippet below:
import React, { useState } from 'react';
import { GoogleMap } from '#react-google-maps/api';
const defaultLocation = { lat: -28, lng: 137 };
function Map() {
const [area, setArea] = useState([]);
const handleOnLoad = map => {
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json'
);
map.data.addListener('click', onClickFeature);
};
const onClickFeature = event => {
console.log(event.feature.getProperty('letter'));
let letter = event.feature.getProperty('letter');
if (letter) {
addArea(letter);
}
};
const addArea = letter => {
let copy = area;
copy.push(letter);
setArea(copy);
//you will see here that the value of area array is being updated
console.log(area);
};
return (
<GoogleMap
center={defaultLocation}
zoom={5}
onLoad={handleOnLoad}
mapContainerStyle={{ width: '100%', height: '88vh' }}
/>
);
}
export default Map;