How to set zoom in react-yandex-map so that all labels fit on the map?

Question

JavaScript

Markers can be in different cities, but when opening the map, you need to set the scale so that all marks fit. I got stuck on this problem with react, I found such a solution, but I can’t rewrite it in React.
/

/ Создаем коллекцию геообъектов.
var myCollection = new ymaps.GeoObjectCollection();

// Добавляем метки в коллекцию.
myCollection.add(new ymaps.Placemark([37.61, 55.75]));
myCollection.add(new ymaps.Placemark([13.38, 52.51]));
myCollection.add(new ymaps.Placemark([30.30, 50.27]));

// При наведении на одну из меток подсвечиваем коллекцию целиком.
myCollection.events
    .add("mouseenter", function () {
        myCollection.options.set("preset", "twirl#redIcon");
})
.add("mouseleave", function () {
    myCollection.options.unset("preset");
});

// Добавляем коллекцию на карту.
myMap.geoObjects.add(myCollection);
// Устанавливаем карте центр и масштаб так, чтобы охватить коллекцию  целиком.
myMap.setBounds(myCollection.getBounds());

I can create a collection, but Ymaps and Map do not have a setBounds method ( outputted to console.log(ymaps) and console.log(map) )

<YMaps onApiAvaliable={(ymaps) => this.handleApiAvaliable(ymaps)} >
      <Map instanceRef={(maps) => this.handleMapAvaliable(maps)}
      </Map>
  </YMaps>

Maybe there is another method? Help me please.

Answer 1

I can create a collection, but Ymaps and Map do not have a setBounds method ( outputted to console.log(ymaps) and console.log(map) )

I cannot believe this. Map still has a setBounds method - it's just that if the method is not its own, but belongs to the prototype, then it is not shown in the console.