JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div class="main-addresses__item" data-coord="[55.141524, 61.392357]"></div>
<div class="main-addresses__item" data-coord="[55.142140, 61.429013]"></div>

<div id="myMap" style="width: 400px; height: 300px">
  <form action="#">
    <select name="" id="mapSelect">
      <option value="1" class="link">Первая точка</option>
      <option value="2" class="link">Вторая точка</option>
    </select>
  </form>
</div>

CSS

#myMap {
  position: relative;
}

form {
  position: absolute;
  z-index: 9999;
  top: 0;
}

JavaScript

var Placemark = {};

ymaps.ready(function() {
  var myMap = new ymaps.Map('myMap', {
    center: [55.034842, 61.368563],
    zoom: 10,
    controls: ['zoomControl']
  }, {
    suppressMapOpenBlock: true,
  });
  myMap.behaviors.disable('scrollZoom');

  $('.main-addresses__item').each(function() {
    var obj = $(this).attr("data-coord");
    obj = JSON.parse(obj);

    myMap.geoObjects
      .add(new ymaps.Placemark(obj, {
        iconCaption: 'test'
      }, {
        preset: 'islands#greenDotIconWithCaption',
        iconColor: '#ed4543'
      }));
			
    $(document).on('change', '#mapSelect', function () {
				myMap.panTo(obj, {
						callback: function() {
							alert("accept!");
						}
				});
		});
  }); //each
});