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(function () {

     var myMap = new ymaps.Map('map', {
                center: [55.650625, 37.62708],
                zoom: 10,
                controls: []
            });



    var cityList = new ymaps.control.ListBox({
            data: {
                content: "Выбарите тип меток"
            },
            options: {
                minWidth:500,
                position:"right"
            },
            items: [
                new ymaps.control.ListBoxItem({data: {content: 'Москва'}}),
                new ymaps.control.ListBoxItem({data: {content: 'Новосибирск'}}),
                new ymaps.control.ListBoxItem({data: {content: 'Нью-Йорк'}}),
            ]
    });
        
    cityList.get(0).events.add('click', function () {
        myMap.setCenter([55.752736, 37.606815]);
    });
    cityList.get(1).events.add('click', function () {
        myMap.setCenter([55.026366, 82.907803]);
    });
    
    myMap.controls.add(cityList);
});