Как инициализировать yandex map в react компоненте вместе с загрузкой страницы?

Добрый день, натолкните пожалуйста на истину. есть главная компонента и есть компонента с картой

class MainComponent extends React.Component {

}

class MapComponent extends React.Component {
handleScriptLoad = () => {
    const {ymaps} = window;
    ymaps.ready(this.init);
  }

  init = () => {
    const {ymaps} = window;
    const myMap = new ymaps.Map('map', {
      center: [55.76, 37.64],
      zoom: 5,
      controls: []
    });
    return myMap;
  }

render() {
    const instanceMap = this.init();
    return (
      <div>
        <Script
          url="https://api-maps.yandex.ru/2.1/?&lang=ru_RU"
          onLoad={this.handleScriptLoad}
        />
        <button onClick={() => какая-то функция(instanceMap)}>Add</button>
        <div id='map' className={styles.containerMap}></div>
      </div>
    )
  }

}

мне нужно инициализировать карту при загрузке страницы сразу. Так как мне нужен доступ к экземпляру моей карты, я его хочу получить в render-методе и потом использовать его в приложении. То есть добавлять Placemark и и.т.д. Но в момент отрисовке render метода у меня еще нет доступа к ymaps поэтому он ругается... подскажите как исправить (вынести загрузку в компонент MainComponent или может жизненный цикл какой-то использовать ??? )