JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>
<div class="hero-unit">
    <div class="container">
        <div id="YMapsID"></div>
    </div>
</div>

CSS

#YMapsID {

text-shadow: 0 0px 0px;

            width: 950px;
            height: 420px;
        };

JavaScript

ymaps.ready(function () {
    
    var myMap = new ymaps.Map('YMapsID', {
        center: [55.751574, 37.573856],
        zoom: 10,
        controls: [
            'fullscreenControl', 
            'zoomControl', 
            'searchControl'
        ]
    }, {
        maxZoom: 15,
        minZoom: 10
    });

    var searchControl = myMap.controls.get('searchControl');
    searchControl.options.set({
        boundedBy: [[55.916046,37.293574], [55.563064,37.912929]],
        strictBounds: true,
        noSelect: true
    });

    searchControl.events.add('load', function (event) {
        // По полю skip определяем, что это не дозагрузка данных. 
        // По getRusultsCount определяем, что есть хотя бы 1 результат.
        if (!event.get('skip') && searchControl.getResultsCount()) {
            searchControl.showResult(0);
        }
    });
});