JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<select id="cities">
    <option data-center="[52.969617,36.072952]" data-zoom="12">Орел</option>
    <option data-center="[53.278881,36.576119]" data-zoom="14">Мценск</option>
    <option data-center="[53.370993,36.631085]" data-zoom="15">Спасское-Лутовиново</option>
</select>
<div id="map"/>

CSS

#map {
    width: 600px;
    height: 400px;
}

JavaScript

ymaps.ready(init);

function init() {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    var myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center: [55.76, 37.64], // Москва
        zoom: 10
    });
    
    $('#cities').on('change', function (e) {
        var selected = $("option:selected", this);
        var data = selected.data();
        
        myMap.setCenter(data.center, data.zoom, {
            checkZoomRange: true,
            duration: 2000
        });
    });
}