JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>

<div id="map"></div>
<button id="del">Добавить метки на карту</button>
<div id="info"></div>

CSS

#map {
            width: 950px;
            height: 420px;
        };

JavaScript

ymaps.ready(function () {
    
    var myMap = new ymaps.Map('map', {
        center: [55.751574, 37.573856],
        zoom: 10,
        controls: [
            'fullscreenControl', 
            'zoomControl', 
            'searchControl'
        ]
    }, {
        maxZoom: 15,
        minZoom: 10
    });        

    
       document.getElementById('del').onclick = function () 
        {            
            var clusterer =  new ymaps.geoQuery(json_data).clusterize();
            clusterer.events.add('balloonopen', function () {alert('event')});
            myMap.geoObjects.add (clusterer);
        }

   var json_data =...