JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></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/1.9.1/jquery.min.js"></script>
<style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            font-family: Arial;
            font-size: 14px;
        }
        #container {
            width: 100%;
            height: 100%;
        }

JavaScript

ymaps.load(function () {
var geoMap = new ymaps.Map('container', {
        center: [55.5, 37.6],
        type: "yandex#map",
        zoom: 8
    });

    ymaps.regions.load('RU', {
        lang: 'ru',
        quality: 1
    }).then(function (result) {
        var geometry = ymaps.geoQuery(result.geoObjects)
            .search('properties.name = "Москва"')
            .get(0).geometry.getCoordinates().slice();
        
        geometry.splice(0, 0, [[-89, -180], [89, -180], [89, -60], [89, 60], [89, 180], [-89, 180], [-89, 60], [-89, -60], [-89, -180]]);

        geoMap.geoObjects.add(new ymaps.Polygon(geometry, {}, {
            fillColor: '808080',
            outline: false
        }));
            }, function () {
                //alert('no response');
            });
});