Using MarkerF component is not working with 'ts-overlapping-marker-spiderfier'

Question

Using MarkerF component from @react-google-maps/api as the react version is >18.0.0. This does not gives me the flexibility with the package 'ts-overlapping-marker-spiderfier' to spiderfy the markers in the same location.

<GoogleMap onLoad={onLoad} mapContainerStyle={mapContainerStyle}>
      {markerDetails.map(
        ({
          name,
          lat,
          lng,
          id,
        }: {
          name?: string
          lat: number
          lng: number
          id: string
        }) => (
          <MarkerF
            key={id}
            position={{ lat, lng }}
            onLoad={marker => {
              oms?.addMarker(marker);
              window.google.maps.event.addListener(
                marker,
                "spider_click",
                (e: any) => {
                  handleMarkerClick({ id, lat, lng, name, marker });
                }
              );
            }}
          // onClick={() => {
          //   handleMarkerClick({ id, lat, lng, name })
          // }}
          >
            {isOpen && selectedMarker && infoWindowData?.id === id && (
              <InfoWindow
                anchor={selectedMarker}
                onCloseClick={() => {
                  setIsOpen(false)
                }}
              >
                <Center>
                  <Text fontWeight={'bold'}>{infoWindowData?.name}</Text>
                </Center>
              </InfoWindow>
            )}
          </MarkerF>
        ),
      )}
    </GoogleMap>

As expected Marker component is working properly with spiderfy after manually re-rendering the component in local.