JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 100%;
        }

JavaScript

var myMap;

// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);

function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center: [55.76, 37.64], // Москва
        zoom: 10
    });

    var pm1 = new ymaps.Placemark([55.715, 37.64], {
        iconContent: '5'
    });
    var pm2 = new ymaps.Placemark([55.71, 37.64], {
        iconContent: '6'
    });
    var myLayout = ymaps.templateLayoutFactory.createClass(
        '{{ properties.iconContent }}', {
            build: function () {
                var number = 0,
                    geoObjects = this.getData().properties
                        .get('geoObjects');
                for (var i = 0; i < geoObjects.length; i++) {
                    number += parseInt(
                        geoObjects[i].properties
                            .get('iconContent')
                              );
                }
                this.getData().properties.set('iconContent', number.toString());
                myLayout.superclass.build.call(this);
            }
        }
    );
    var clusterer = new ymaps.Clusterer({
        clusterIconContentLayout: myLayout
    });
    clusterer.add([pm1, pm2]);
    myMap.geoObjects.add(clusterer);
}