JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>
<input type="button" id="zoomFreeze" value="Заморозить zoom">
<input type="button" id="updateBounds" value="updateBounds">
<input type="button" id="zoomRelease" value="Отпустить">

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 90%;
        }

JavaScript

var myMap;

// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);

function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center: [55.76, 37.64], // Москва
        zoom: 12
    }, {
        searchControlProvider: 'yandex#search'
    });
    var zoomBefore;
    document.getElementById('zoomFreeze').onclick = function () {
        var zoomBefore = myMap.options.get('maxZoom');
        myMap.options.set('maxZoom', myMap.getZoom());
    };
    document.getElementById('updateBounds').onclick = function() {
        myMap.setBounds(myMap.getBounds());
    };
    document.getElementById('zoomRelease').onclick = function () {
        myMap.options.set('maxZoom', zoomBefore);
    };

}