I am using Google maps with marker clusters to display some points on a map and everything works fine until I switch from browser to vscode or any other window, or when I change tabs in the browser. When I go back to the map, I see markers duplicated like they have been rendered once again.

This is how I render the map

<Wrapper apiKey={process.env.REACT_APP_GOOGLE_KEY} version='beta' libraries={['marker']}>
        <GlobalViewMap
          usersCluster={usersCluster}
          machinesCluster={machinesCluster}
          loadedPolygons={loadedPolygons}
          filters={filters}
          map={map}
          setMap={setMap}
          select={select}
          handleGetInfo={handleGetInfo}
        />
      </Wrapper>

Wrapper is imported from @googlemaps/react-wrapper. <GlobalViewMap />is just a div that has initialized map as a ref.

And this is how I create clusters

 usersCluster.current = new MarkerClusterer({
                markers,
                map,
                algorithm: new SuperClusterAlgorithm({ radius: 200 }),
                renderer: ({
                    render: ({ count, position }) => markerStyle({ count, position }, '#00A368')
                })
            })

No additional GET requests are being made, it’s something about google maps that is causing markers to rerender in the same spot when the current browser tab loses focus