JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Примеры. Размещение карты на странице.</title>
    <!--
        Подключаем API карт
        Параметры:
          - load=package.full - основные компоненты;
	      - lang=ru-RU - язык русский.
	    Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)
    -->
    <script src="//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
</head>

<body>
    <div id="map" style="width:400px; height:300px"></div>
    <input type="button" id="destroyButton" value="Удалить карту"/>
</body>

</html>

JavaScript

ymaps.ready(function() {
        var map = new ymaps.Map("map", {
            center: [59.216479755719156, 39.887253417968715],
            zoom: 12,
            behaviors: ['default', 'scrollZoom']
        });
                
        var polygon = new ymaps.Polygon([
            [[59.2192164008285, 39.823476483932176], [59.21618014179259, 39.823776891341836], [59.21674121004697, 39.83463447343408], [59.2172197609596, 39.844901969543045], [59.22076467853722, 39.844231417289336], [59.22011842556126, 39.82901256333891], [59.2192164008285, 39.823476483932176]]
        ],
        {hintContent: "Полигон-1"},
        {fillColor: '#1d74cf40'});
        map.geoObjects.add(polygon);
       var pixelBounds = polygon.geometry.getPixelGeometry().getBounds();
   var pixelCenter = [pixelBounds[0][0] + (pixelBounds[1][0] - pixelBounds[0][0]) / 2, (pixelBounds[1][1] - pixelBounds[0][1]) / 2 + pixelBounds[0][1]];
   var geoCenter = map.options.get('projection').fromGlobalPixels(pixelCenter, map.getZoom());
    
    
    var placemark = new ymaps.Placemark(geoCenter, {
           name: 'Москва',
           description: 'Столица. Много людей.',
    },{balloonContentLayout: MyBalloonContentLayoutClass});
    
    var MyBalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass(
          '<h3>$[properties.name]</h3>' +
          '<p>Описание: $[properties.description]</p>'
    );
       
    map.geoObjects.add(placemark);
    });