Marker Cluster :options property not working

[theDevJudge]

I cant figure out a way to implement custom marker clusters or somehow design these marker clusters. I have tried to pass the styles through the :options like the code below but to no success. Is there a way to tackle this?

<Script setup>

import { SuperClusterAlgorithm } from "@googlemaps/markerclusterer";

const algorithm = new SuperClusterAlgorithm({
  radius: 120,
  maxZoom: 14,
  log: true,
  generateId: false,
  minPoints: 20,
});

const renderer = ref({
  render: ({ count, position, bounds }, stats, map) => {
    return new google.maps.Marker({
      position,
      icon: {
        url: `https://cdn-icons-png.flaticon.com/512/10875/10875954.png`,
        scaledSize: new google.maps.Size(53, 53),
      },
      label: {
        text: String(count),
        color: "red",

        fontSize: "14px",
      },
      zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
    });
  },
});

<script>

<MarkerCluster  :options="{renderer, algorithm}">
      <Marker
        v-for="(markerItem, markerIndex) in mapObj.markers"
        :options="markerItem?.options"
        :key="`mapMarkerId-${markerItem.id}.${markerIndex}`"
        @click="showUnitDetails(markerItem, markerIndex)"
        ref="markerRefArr"
      >
</MarkerCluster>

[theDevJudge]

Hey guys i got it to work was using the wrong minPoints since it was set to 20 there had to be 20 markers for it to become a cluster change that to minPoints : 2, and the above code should work perfectly fine.