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: [55.76, 37.64],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        });

    // Создаем круг.
var circle, placemark;

placemark = new ymaps.Placemark([55.76, 37.64], {
  iconContent: 'Центр круга',
}, {
  preset: 'islands#redStretchyIcon',
  draggable: true
});

circle = new ymaps.Circle([placemark.geometry.getCoordinates(), 5000], {}, {
  geodesic: true
});

placemark.events.add('drag', function(e) {
  return circle.geometry.setCoordinates(placemark.geometry.getCoordinates());
});
    
myMap.geoObjects.add(placemark);
myMap.geoObjects.add(circle);
}