JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.0/?lang=ru_RU&amp;load=package.full"></script>
<script src="http://dimik.github.io/ymaps/examples/piechart-clusterer/piechart-clusterer.js"></script>
<div id="map"/>

CSS

#map {
    width: 600px;
    height: 480px;
}

JavaScript

ymaps.ready(init);
    var myMap;
 
    function init() {
        var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 8,
            controls: ['zoomControl']
        });
 
        placemarks = [];
        placemarks[0] = new ymaps.Placemark([55.914287, 36.860284], {
                clusterCaption: 'Истра',
                balloonContentBody: 'Содержимое балуна геообъекта №2.'
            }, {
                preset: 'twirl#blueIcon'
            }
        );
        placemarks[1] = new ymaps.Placemark([55.914287, 36.860284], {
                clusterCaption: 'Истра',
                balloonContentBody: 'Содержимое балуна геообъекта №2.'
            }, {
                preset: 'twirl#pinkIcon'
            }
        );
        placemarks[2] = new ymaps.Placemark([55.912329, 36.805621], {
                clusterCaption: 'Слабошеино',
                balloonContentBody: 'Содержимое балуна геообъекта №2.'
            }, {
                preset: 'twirl#blueIcon'
            }
        );
        placemarks[3] = new ymaps.Placemark([55.912329, 36.805621], {
                clusterCaption: 'Слабошеино',
                balloonContentBody: 'Содержимое балуна геообъекта №2.'
            }, {
                preset: 'twirl#pinkIcon'
            }
        );
 
        clusterer = new PieChartClusterer(); 
 
        clusterer.add(placemarks);
        myMap.geoObjects.add(clusterer);
 
    };