remove circles from google map react

I am using <GoogleMapReact> project, among the things I am rendering on the map, are circles called geoFences.

The problem is that I want to change the circles sometimes, but instead of chaning them, the map is rendering them on top of eachother.

    function renderGeoFences(map, maps) {
        const geoFencesSites = settings.geoFenceSites.filter((site) => !site.deleted);
        _.map(geoFencesSites, (site) => {
            let circle = new maps.Circle({
                strokeColor: tag.id!=='all-jobs' ? "orange":'#1aba8b26',
                strokeOpacity: 1,
                strokeWeight: 4,
                fillColor: '#1aba8b1f',
                fillOpacity: 1,
                map,
                center: { lat: Number(site.location.latitude), lng: Number(site.location.longitude) },
                radius: site.fenceSize,
            });
        });
    }

This function is called every time I change the value of tag (a state). Instead of just changing the stroke color like the function shows, they render on top of eachother, and you can tell by the fill color which should have opacity but it's getting darker and darker.

I tried removing it using the instructions here https://developers.google.com/maps/documentation/javascript/shapes#maps_circle_simple-typescript but it didn't work.

In this try, I created a list instead of just pushing them one at a time, and at the end, by the state called showJobsLocations. It seems that at first run, when the state is true, the circles won't render, which is good, but at the second run, they do, and then keep getting darker and darker, which means they won't render if I don't want them to, but once they are, they won't get deleted.

    function renderGeoFences(map, maps) {
    const geoFencesSites = punchClockStore.settings.geoFenceSites.filter((site) => !site.deleted);
    const circles = []
      _.map(geoFencesSites, (site) => {
        circles.push(new maps.Circle({
          strokeColor: '#1aba8b26',
          strokeOpacity: 1,
          strokeWeight: 4,
          fillColor: '#1aba8b1f',
          fillOpacity: 1,
          map,
          center: {lat: Number(site.location.latitude), lng: Number(site.location.longitude)},
          radius: site.fenceSize,
        }));
        if (showJobsLocations){
          // circle.setMap(null)
          if (circles.length) circles.map((circle) => circle.setMap(null));
        }
      });
  }

Anyone knows how to remove Circles from <GoogleMapReact> ?

from remove circles from google map react