JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map" style="width:800px; height:600px"></div>

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.0/?load=package.standard,package.geoObjects&lang=ru-RU"></script>
<style>

JavaScript

ymaps.ready(init);
var myMap, myGeoObject, myRectangle;

function init () {
    myMap = new ymaps.Map('map', {
        center: [55.674, 37.601],
        zoom: 9
    });

    // Cоздаем геообъект с типом геометрии "прямоугольник".
    myGeoObject = new ymaps.GeoObject({
        // Геометрия = тип геометрии + координаты геообъекта.
        geometry: {
            // Тип геометрии - прямоугольник.
            type: 'Rectangle',
            // Координаты.
            coordinates: [
                [55.491126, 37.32624],
                [55.957565, 37.967682]
            ]
        },
        // Свойства.
        properties: {
            hintContent: 'Перетащи меня!',
            balloonContent: 'Прямоугольник 2'
        }
    }, {
        // Опции.
        // Объект можно перетаскивать.
        draggable: false,
        // Цвет и прозрачность заливки.
        fillColor: '#ffff0022',
        // Цвет и прозрачность границ.
        strokeColor: '#3caa3c88',
        // Ширина линии.
        strokeWidth: 3
    });

    myMap.geoObjects
        .add(myGeoObject);
}