JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1.26/?lang=ru_RU"></script>
<div id="map"></div>
<button onClick="panTo()">PAN TO</button>

CSS

#map {
    width: 500px;
    height: 500px;
}

JavaScript

var normal = {
    fill: false,
    strokeColor: 'ffffff50',
    strokeWidth: 2
};
var hover = {
    fill: true,
    fillColor: '1999dd40',
    strokeColor: '1999dd'
};
function startListen(regions){
    regions.events.add('mouseenter', function(e){
        var target = e.get('target');
        target.options.set(hover);
    });
    regions.events.add('mouseleave', function(e){
        var target = e.get('target');
        target.options.set(normal);
    });
}
window.panTo = function(){
    map.setBounds([[67.042878,-178.883589],[67.051929,-178.867302]]);
}
ymaps.ready(function(){
    var map = window.map = new ymaps.Map("map", {
        center: [59.1131030,88.655461],
        zoom: 3
    });
    ymaps.regions.load('RU', {
        lang: 'ru',
        quality: 1
    }).then(function(result){
        regions = result.geoObjects;
        regions.options.set(normal);
        map.geoObjects.add(regions);
        startListen(regions);
        
    });
});