JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

CSS

html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }

JavaScript

ymaps.ready(function () {
    window.myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),

        // Создаём макет содержимого.
        MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
        ),

        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'Собственный значок метки',
            balloonContent: 'Это красивая метка'
        }),

        myPlacemarkWithContent = new ymaps.Placemark([55.661574, 37.573856], {
            hintContent: 'Собственный значок метки с контентом'
        });
        
        console.log('pane', ymaps.pane);
        
        var pane = new ymaps.pane.MovablePane(myMap, {
          zIndex: 600
        });
        myMap.panes.append('myAwesomePane', pane);
        
        var circle = new ymaps.Circle(
        [[55.751574, 37.573856], 10000], 
        {},
        {
					fillColor: 'ff000099',
          pane: 'myAwesomePane'
        })
    myMap.geoObjects
        .add(myPlacemark)
        .add(myPlacemarkWithContent)
        .add(circle);
});