How to remove markers in react-google-maps - react-google-maps

Question

I create my markers like this, a recurisve function call every 5 seconds to
change layers on the map.
var MeterLocations= Object.keys(dict)
var currloc = 0;
var markers;
function cycleMeteors(callback){
markers = dict[MeterLocations[currloc]].map(function(arr,i){
return(
<Marker
icon={purpleS}
key={i+"marker-num"+MeterLocations[currloc]}
position={{ lat: parseFloat(arr.val[4]),
lng: parseFloat(arr.val[5]) }}
/>)
})
currloc +=1;
setTimeout(function(){
callback(markers);
},5000);
}
I attempt here to remove the markers from the map by popping the entire array into length = 0. but that does not remove the markers from the map. another post mentioned settng the map to null map[map.length-1].setMap(null) but that doesnt work in reactjs
var [map, setMap] = useState([]);
cycleMeteors(function(s){
console.log(s.length);
while(map.length){
console.log(map.length)
map.pop()
}
// s is the new array of markers
setMap(s);
})
idk if you need this but here is my app.js
const MapWithAMarker = withScriptjs(withGoogleMap(props => {
console.log(props.children);
return (
<GoogleMap
defaultZoom={2}
defaultCenter={{ lat: 0, lng: 0 }}
>
{props.children.length ? props.children : []}
</GoogleMap>
)
}));
function App() {
var [map, setMap] = useState({});
cycleMeteors(function(s){
console.log(s.length);
while(map.length){
console.log(map.length)
map[map.length-1].setMap(null)
map.pop()
}
setMap(s);
})
return (
<div className="App">
<article>
<div id="maps-widget">
</div>
</article>
<article>
<h4>Data stuff</h4>
<p> These items amount of </p>
<p> Metory type | number in class </p>
{/*<MClassView data={dict}/>
*/}
<MapWithAMarker
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${apikey}&v=3.exp&libraries=geometry,drawing,places`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `600px`, width: "1000px" }} />}
mapElement={<div style={{ height: `100%` }} />}
>{map}</MapWithAMarker>
</article>
</div>
);
}