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>
<script type="text/javascript" src="https://yandex.st/jquery/2.1.0/jquery.min.js"></script>
<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }

JavaScript

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map('map', {
            center: [55.76, 37.64],
            zoom: 12
        }, {
            searchControlProvider: 'yandex#search',
            balloonPanelMaxMapArea: 0
        }),
        objectManager = new ymaps.ObjectManager({
            clusterize: false,
            geoObjectBalloonAutoPan: false
        });

    myMap.geoObjects.add(objectManager);

    $.ajax({
        url: "https://sandbox.api.maps.yandex.net/examples/ru/2.1/object_manager_balloon/data.json"
    }).done(function(data) {
        objectManager.add(data);
    });
    myMap.events.add('click', function () {
        objectManager.objects.balloon.open(1);
        myMap.setCenter(
        	objectManager
          	.objects
        		.getById(1)
            .geometry
            .coordinates
          );
    });
}