JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

var myMap;
	var clusterer;
	var PointArray = [];

	ymaps.ready(init);

	function init(){  
		myMap = new ymaps.Map ("map", {
			center: [47.096022, 37.548734],
			zoom: 12
		},{ 	minZoom:8,
		  	maxZoom:18
		});

		myMap.controls.add('zoomControl', { left: 5, top: 5 });
		myMap.behaviors.enable('scrollZoom');
		myMap.behaviors.disable('dblClickZoom');

		clusterer = new ymaps.Clusterer({clusterDisableClickZoom: true, synchAdd: true});

		clusterer.events.add('dblclick', function (e) {
            console.log('dblclick');
		   e.preventDefault();
		});

		clusterer.events.add('click', function (e) {
            console.log('click');
		   //e.preventDefault();	
		});

        addToPointArray(47.091, 37.541, 'twirl#redIcon', 'id1', 'text1');
		addToPointArray(47.093, 37.543, 'twirl#redIcon', 'id2', 'text2');
		addToPointArray(47.095, 37.545, 'twirl#redIcon', 'id2', 'text2');

drawCluster('twirl#blueIcon');
        
   }

	function addToPointArray(CoordX, CoordY, IStyle, ID, Text){
		point = new ymaps.GeoObject({
		    geometry: {type: "Point", coordinates: [CoordX, CoordY]},
		    properties: {
		        clusterCaption: ID,
		        balloonContentBody: Text,
			balloonContentHeader: ID,
		        //balloonContentFooter: "Подвал",
		        hintContent: ID
		    }
		},{
			preset: IStyle
			
		});

		PointArray.push(point);
	}

	function drawCluster(CStyle){
		clusterer.options.set('preset',CStyle);
		clusterer.add(PointArray);

		myMap.geoObjects.add(clusterer);
	}