JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/6.4.3/ol.min.css">
<div id="map"></div>

CSS

html,body,#map { width:100%; height:100%; margin:0; }
#map {
    position: absolute;
    z-index: 5;
}

JavaScript

var suburbs = { "1": 6, "2": 8, "3": 4, "4": 3 };


var outerCircleFill = new ol.style.Fill({
    color: 'rgba(255, 153, 102, 0.3)',
});
var innerCircleFill = new ol.style.Fill({
    color: 'rgba(255, 165, 0, 0.7)',
});
var textFill = new ol.style.Fill({
    color: '#fff',
});
var textStroke = new ol.style.Stroke({
    color: 'rgba(0, 0, 0, 0.6)',
    width: 3,
});
var innerCircle = new ol.style.Circle({
    radius: 14,
    fill: innerCircleFill,
});
var outerCircle = new ol.style.Circle({
    radius: 20,
    fill: outerCircleFill,
});

function clusterMemberStyle(clusterMember) {
    var counter = suburbs[clusterMember.getId()] + "";
    return [
        new ol.style.Style({
            text: new ol.style.Text({
                text: counter,
                fill: textFill,
                stroke: textStroke
            })
        }),
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(0,0,0,0.6)',
                width: 1.5
            }),
            fill: new ol.style.Fill({
                color: 'rgba(0,0,255,0.2)'
            }),
            geometry: clusterMember.getGeometry()
        }),
    ];
}

function clusterStyle(feature) {
    var size = feature.get('features').length;
    if (size > 1) {
        var sizes = 0;
        for (i = 0; i < size; i++) {
            var counter = suburbs[feature.get('features')[i].getId()];
            sizes = sizes + counter;
        }
        return [
            new ol.style.Style({
                image: outerCircle
            }),
            new ol.style.Style({
                image: innerCircle,
                text: new ol.style.Text({
                    text: sizes.toString(),
                    fill: textFill,
                    stroke: textStroke
                })
            })
        ];
    } else {
        var originalFeature = feature.get('features')[0];
        return clusterMemberStyle(originalFeature);
    }
}

function loader(extent, resolution,...