JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&amp;lang=ru-RU"></script>
<script src="http://yandex.st/share/share.js"></script>
<div id="map"/>

CSS

#map {
    width: 600px;
    height: 400px;
}

JavaScript

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
        center: [55.7, 37.5],
        zoom: 9
    });
    var YaShareBalloonContentBodyLayout = ymaps.templateLayoutFactory.createClass('$[properties.balloonContentBody]', {
        build: function () {
            YaShareBalloonContentBodyLayout.superclass.build.apply(this, arguments);
            var yaShareElem = jQuery(this.getElement()).find('#ya_share');
            var YaShareInstance = new Ya.share({
                element: yaShareElem.attr('id'),
                l10n: yaShareElem.data('yasharel10n'),
                theme: yaShareElem.data('yasharetheme'),
                elementStyle: {
                    quickServices: yaShareElem.data('yasharequickservices').split(','),
                }
            });
        }
    });
    
    var myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
        balloonContentBody: '<div id="ya_share" data-yashareL10n="ru" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir" data-yashareTheme="counter"></div>'
    }, {
        balloonContentBodyLayout: YaShareBalloonContentBodyLayout,
        balloonMinWidth: 200
    });
    
    myMap.geoObjects.add(myPlacemark);
});