JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<div id="map" style="width:100%;height:414px;z-index:1;"></div>
<ul id="menu"></ul>

JavaScript

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
        center: [55.73, 37.75],
        zoom: 8
    });
    
    // Создадим объекты на основе JSON-описания геометрий.
    var objects = ymaps.geoQuery({
        type: 'FeatureCollection',
        features: [{
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [55.73, 37.75]
        },
        properties: {
            id: '0'
        }
    }, {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [55.10, 37.45]
        },
        properties: {
            id: '1'
        }
    }, {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [55.25, 37.35]
        }, 
        properties: {
            id: '2'
        }
    }, {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [55.25, 67.35]
        },
        properties: {
            id: '3'
        }
    }]});
    
    var menu = $('#menu');
    
    objects
        .addToMap(myMap);
    
    function renderDomView() {
        menu.empty();
        var visible = objects.searchInside(myMap)
        .setOptions('visible', true)
        .each(function (obj) {
            menu.append('<li>' + obj.properties.get('id') + '</li>');            
        });
        var hidden = objects.remove(visible).setOptions('visible', false);
    }
    
    renderDomView();
    myMap.events.add('boundschange', renderDomView);
}