JS Google Maps API marker zoom-in same color in cluster

There are multiple clusters on the map, and multiple markers within the clusters.

When zoomed in far away, the markers appear in different colors, but when zoomed in closer, all markers, including those in other clusters, change to the same color.

zoom-out
enter image description here

zoom-in
enter image description here

async function addMarkerCluster(json) {
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

    const item = JSON.parse(json);
    
    const hexColor = "#" + item.Color;
    
    const clusterMarkers = [];

    item.Items.map(data => {
        const style = new PinElement({
            background: hexColor,
            borderColor: hexColor,
            glyph: data.glyph,
            glyphColor: "white"
        });

        const marker = new AdvancedMarkerElement({
            map: map,
            position: parseCoordinateObj(data.Location),
            content: style.element,
            gmpClickable: true
        });

        const contentString =
            '<div id = "info-header">' +
            '<h4>' + data.Title + '</h4>' +
            '</div>' +
            '<div id = "info-body">' +
            '<p>' + data.Description + '</p>' +
            '</div>';

        marker.addListener("gmp-click", () => {
            infowindow.close();
            infowindow.setContent(contentString);
            infowindow.open({
                anchor: marker,
                map
            });
        });

        clusterMarkers.push(marker);
    })

    let algorithm = new markerClusterer.SuperClusterAlgorithm({
        maxZoom: 15
    });

    const cluster = new markerClusterer.MarkerClusterer({
        map: map,
        markers: clusterMarkers,
        algorithm, algorithm,
        renderer: {
            render: ({
                count,
                position
            }, stats, map) => {
                const style = new PinElement({
                    background: hexColor,
                    borderColor: hexColor,
                });

                return new AdvancedMarkerElement({
                    map: map,
                    position: position,
                    content: style.element
                })
            }
        }
    });
}

I wanted the same color to remain the same even when zooming in.