JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></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.6.4/jquery.min.js"></script>
<style>
        html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%; height: 80%;
        }

JavaScript

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [57.131311, 34.576128],
            zoom: 5
        }, {
            searchControlProvider: 'yandex#search'
        });

    // Построение маршрута от станции метро Смоленская до станции Третьяковская.
    // Маршрут должен проходить через метро "Арбатская".
    ymaps.route([
        'Москва, метро Смоленская',
        {
            // Метро Арбатская - транзитная точка (проезжать через эту точку,
            // но не останавливаться в ней).
            type: 'viaPoint',
            point: 'Москва, метро Арбатская'
        },
        // Метро "Третьяковская".
        [55.74062, 37.62561]
    ], {
        // Автоматически позиционировать карту.
        mapStateAutoApply: true
    }).then(function (route) {
        myMap.geoObjects.add(route);
       
         route.editor.start({
             editWayPoints: true,
             removeWayPoints:true
         });
    }, function (error) {
        alert("Возникла ошибка: " + error.message);
    });
}