JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https:///api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script src="//yandex.st/jquery/2.2.3/jquery.min.js"></script>

<div id="map"></div>

CSS

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

JavaScript

var myMap;
var points = [
                {
                    center: [61.658086, 50.830665],
                    name: "Сыктывкар"
                },
                {
                    center: [61.004156, 69.077552],
                    name: "Ханты-Мансийск"
                },
                {
                    center: [51.649765, 39.216712],
                    name: "Воронеж"
                }
            ];

// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);

function init () {
    myMap = new ymaps.Map('map', {
        center: [55.76, 37.64], // Москва
        zoom: 10
    }, {
        searchControlProvider: 'yandex#search'
    });
    var menu = $('<ul class="menu"></ul>');
    var collection = new ymaps.GeoObjectCollection(null, { preset: 'islands#redIcon' });
    
    for (var i = 0, l = points.length; i < l; i++) {
        create_point(points[i]);
    }
    
    function create_point(point){
    		var submenuItem = $('<li><a href="#">' + point.name + '</a></li>');
        var placemark = new ymaps.Placemark(point.center, { balloonContent: point.name });
        collection.add(placemark);
        
         submenuItem
        		.appendTo(menu)
        		.find('a')
            .bind('click', function () {
                if (!placemark.balloon.isOpen()) {
                    //placemark.balloon.open();
                    myMap.setCenter(placemark.geometry.getCoordinates());
                } else {
                    placemark.balloon.close();
                }
                return false;
            });
    }
    
    myMap.geoObjects.add(collection);
    menu.appendTo($('body'));

        


}