JSFiddle - React, Tailwind, and code Playground

HTML

<a href='javascript:a()'>PRESS A</a> <a href='javascript:b()'>PRESS B</a>
<div id="map"></div>

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=en_US"></script>
<script src="http://yastatic.net/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://kashey.ru/maps/regions.js?1"></script>
<style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 90%;
        }

JavaScript

var myMap;

ymaps.ready(init);

var countryColorsA={
    'RU':"F00",
    'US':"0F0",
};

var countryColorsB={
    'CA':"F00",
    'IN':"0F0",
};

/**********************/

var collection=0;

function setColors(countryColors){
     collection.setStyles(function (object, yobject) {
        var iso = object.properties.properties.iso3166.toUpperCase(),
            color=countryColors[iso];
        return ({
            strokeWidth: 1,
            strokeColor: color?'#000':"666",
            fillColor: color || 'EEE',
          //visible: !!color
        });
    });
}

function a(){
    setColors(countryColorsA);
}

function b(){
    setColors(countryColorsB);
}

function init () {

    myMap = new ymaps.Map('map', {
        center: [55.76, 37.64], // Москва
        zoom: 10
    });
    var geoMap=myMap;
        
        osmeRegions.geoJSON('bigMoscow', {
            lang: 'ru', 
            quality:-1
        }, function (data, pure) {
        collection = osmeRegions.toYandex(data, ymaps);
        collection.add(geoMap);
    
        geoMap.setBounds(collection.collection.getBounds(), {duration: 300});
        setColors(countryColorsA);
    });
}