JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://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(init);
function init () {
    var map = new ymaps.Map('map', {
            center: [55.93772, 38.313622],
            zoom: 10,
            controls: []
        }),
        firstButton = new ymaps.control.Button({
         data: {
             // Текст на кнопке.
             content: 'Контур',
             // Текст всплывающей подсказки.
             title: 'Нажмите для обведения контура'
         }
        }
                                              );
    	map.controls.add(firstButton, {float: 'right'});

}

function MyPolygon()
{
    
    // Создаем многоугольник без вершин.
    var myPolygon = new ymaps.Polygon([], {}, {
        // Курсор в режиме добавления новых вершин.
        editorDrawingCursor: "crosshair",
        // Максимально допустимое количество вершин.
        editorMaxPoints: 5,
        // Цвет заливки.
        fillColor: '#00FF00',
        // Цвет обводки.
        strokeColor: '#0FF0FF',
        // Ширина обводки.
        strokeWidth: 5
    });
    // Добавляем многоугольник на карту.
    myMap.geoObjects.add(myPolygon);

    // В режиме добавления новых вершин меняем цвет обводки многоугольника.
    var stateMonitor = new ymaps.Monitor(myPolygon.editor.state);
    stateMonitor.add("drawing", function (newValue) {
        myPolygon.options.set("strokeColor", newValue ? '#FF0000' : '#0000FF');
    });

    // Включаем режим редактирования с возможностью добавления новых вершин.
    myPolygon.editor.startDrawing();
    
}