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>
<style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 90%;
        }

JavaScript

var myMap;

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

function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center: [55.76, 37.64], // Москва
        zoom: 10,
        controls: []
    }, {
        searchControlProvider: 'yandex#search'
    });
    var cityList = new ymaps.control.ListBox({
        data: {
            content: 'Выбрать город'
        },
        options: {
            itemSelectOnClick: false
        },
        items: [
            new ymaps.control.ListBoxItem({ data: { content: 'Москва', center: [55.752736, 37.606815] }}),
            new ymaps.control.ListBoxItem({ data: { content: 'Новосибирск', center: [55.026366, 82.907803] }}),
            new ymaps.control.ListBoxItem({options: {type: 'separator'}}),
            new ymaps.control.ListBoxItem({ data: { content: 'Нью-Йорк', center: [40.695537, -73.97552] }})
        ]
    });
    
    myMap.controls.add(cityList);
    
    cityList.events.add('click', function (e) {
        var target = e.get('target');
        
        if(target != cityList) {
            console.log('click');
            myMap.setCenter(target.data.get('center'));
            cityList.collapse();
        }
    });
}