Google Maps markerClusterer: how to combine Interface Renderer and GridOptions gridSize in configuration object?

I'm currently trying to implement Google Maps JavaScript MarkerClusterer on a website.

I'm using Interface Renderer to override a couple of default configuration parameters.

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
};

let config = { map, markers, renderer };
let cluster = new markerClusterer.MarkerClusterer(config);

Please note that I'm adding markerClusterer plugin via unpkg. So I must declare the cluster this way: let cluster = new markerClusterer.MarkerClusterer(config); (as stated in the "Install" section of the official documentation) (see last line of my above code bit).

This code works great, but I'd also like to override gridSize property from Interface GridOptions in order (well, I hope... I'm not even sure this option will give me what I expect; I'm not english native and given description is not totally clear to me...) to get bigger clusters and less individual markers on my map.

I'm struggling for a couple of reasons:

• I'm not familiar with they way the code has to be set up,
• the documentation is EMPTY and there's NO supplied example code on how to achieve what I want,
• can't find any help on stack overflow, tutorials (blogs, social networks, ...). Really, all I could find were 100k of obsolete ways to do it but that doesn't work when you use Interface Renderer. Here's an example:

var markerClusterer = new MarkerClusterer(map, markers, {
    gridSize: 10,
    maxZoom: 9, // maxZoom set when clustering will stop
    imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
});

So I tried several things but nothing is working:

let config = { map, markers, renderer, GridOptions: { gridSize: 10 } };

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
            gridSize: 10,
        }),
};

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
    
    GridOptions: ({ gridSize = 10 }),
    // gridSize: 10,
};

Can anyone help me? Thanks!

Finally:

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
};
let algorithm = new markerClusterer.GridAlgorithm({gridSize: 60});

let config = { map, markers, renderer, algorithm };
let cluster = new markerClusterer.MarkerClusterer(config);

And also, Yes, gridSize property does generate bigger clusters and less individual markers on map if you increase its value (default: 40).