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>
<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }

JavaScript

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", {
            center: [54.83, 37.11],
            zoom: 5
        }, {
            searchControlProvider: 'yandex#search'
        }),
        // Метка, содержимое балуна которой загружается с помощью AJAX.
        placemark = new ymaps.Placemark([55.8, 37.72], {
            iconContent: "Узнать адрес",
            hintContent: "Перетащите метку и кликните, чтобы узнать адрес"
        }, {
            // Запретим замену обычного балуна на балун-панель.
            balloonPanelMaxMapArea: 0,
            draggable: "true",
            preset: "islands#blueStretchyIcon",
            // Заставляем балун открываться даже если в нем нет содержимого.
            openEmptyBalloon: true,
            balloonContentLayout: ymaps.templateLayoutFactory.createClass('<b>{{properties.balloonContent}}</b>')
        });

    // Обрабатываем событие открытия балуна на геообъекте:
    // начинаем загрузку данных, затем обновляем его содержимое.
    placemark.events.add('balloonopen', function (e) {
        placemark.properties.set('balloonContent', "Идет загрузка данных...");

        // Имитация задержки при загрузке данных (для демонстрации примера).
        setTimeout(function () {
            ymaps.geocode(placemark.geometry.getCoordinates(), {
                results: 1
            }).then(function (res) {
                var newContent = res.geoObjects.get(0) ?
                        res.geoObjects.get(0).properties.get('name') :
                        'Не удалось определить адрес.';

                // Задаем новое содержимое балуна в соответствующее свойство метки.
                placemark.properties.set('balloonContent', newContent);
                placemark.options.set('balloonContentLayout', ymaps.templateLayoutFactory.createClass('<i>{{properties.balloonContent}}</i>'));
            });
        }, 1500);
    });

    myMap.geoObjects.add(placemark);
}