JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&amp;amp;lang=ru-RU&amp;dummy=.js"></script>
<div id="map"></div>

CSS

#map{
    width:500px;
    height:500px;
}

JavaScript

var pData = [{"item_id": 1,"x": "43.581563332849466","y": "39.743484724333014"}, {"item_id": 2, "x": "43.581263330849467", "y": "39.743444724303014"},{"item_id": 3, "x": "43.581563336849468", "y": "39.743484724363014"},{"item_id": 4, "x": "43.581993331849469", "y": "39.744884724313014"}];
var myMap;
var myGeoObjects = [];
var myCluster;
function init(){
    myMap = new ymaps.Map('map', {
            center: [43.581563331849466, 39.743484724313014],
            zoom: 16,
            behaviors: ["default", "scrollZoom"]
        });
    
    myCluster = new ymaps.Clusterer({
            clusterBalloonSidebarWidth: 10,
            clusterBalloonWidth: 290,
            clusterBalloonHeight: 145
    });

    for (n in pData){
        var placeMark = new ymaps.GeoObject({
                    geometry: {type: "Point", coordinates: [pData[n].x, pData[n].y]},
                    properties: {
                        clusterCaption: pData[n].name,
                    }
                });
        placeMark.events.add('click', function (e) {
                    id = e.get('target').properties.get('nbId');
                    e.get('target').properties.set('balloonContentBody', getPlaceMarkHtml(id));
        });


         myGeoObjects.push(placeMark);
    }
        myCluster.add(myGeoObjects);
        myCluster.options.set({groupByCoordinates:true});
        myMap.geoObjects.add(myCluster);


}

function getPlaceMarkHtml(){
    return '<b>1</b>';
}

ymaps.ready(init);