Обновление состояния пропсов во всех компонентах до рендера Next.js

Сейчас пишу пробное приложение на Next.js и столкнулся с тем, что: Имеются компоненты main contentcontainer mainmenu

у main есть стейт indexpage, он прокинут и в contentcontainer и в mainmenu

Это методы в Main

  chooseIndex(int,godmod){
    if(godmod) {
        this.setState({indexPage: int});
    }
    else {
      if(this.state.indexPage != 1) {
        this.setState({indexPage: int});
      }
    }
  }
  choosePage(stringPage,checkWho = "menu") {
    //console.log(stringPage)

    if(checkWho == "menu") {

      this.setState({pageContent: stringPage})

      switch(this.state.pageContent) {

        case "mainpage":
          this.chooseIndex(0,true);
          break;
        case "сompany":
          this.chooseIndex(1,true);
          break;
        case "service":
          this.chooseIndex(2,true);
          break;
        case "weDrive":
          this.chooseIndex(3,true);
          break;
        case "ourActives":
          this.chooseIndex(4,true);
          break;
        case "contacts":
          this.chooseIndex(5,true);
          break;
      }

    } else {

      this.setState({pageContent: pages[this.state.indexPage]})

    }
    //console.log(this.state.indexPage)
  }

containerContainer.js

export default function СontentContainer({ page , indexPage , chooseIndex , choosePage }) {

  const [indexPageINTO, setIndexPageINTO] = useState(indexPage);
  const [canNext, setCanNext] = useState(1);
  const timer = 2000;
  let dir = '';


  useEffect( () => {

      const handleScroll = (evt) => {
          //console.log(evt);

            if(evt.wheelDeltaY < 0 && indexPageINTO < 6) {
                  chooseIndex(++indexPageINTO,false)
                  choosePage("WHEEL","WHEEL")
            }
            if(evt.wheelDeltaY > 0 && indexPageINTO > 0) {
                  chooseIndex(--indexPageINTO,false)
                  choosePage("WHEEL","WHEEL")
            }


      }

        window.addEventListener("wheel", handleScroll);

        return () => {

            window.removeEventListener("wheel", handleScroll);

        };

  },[indexPageINTO])

menuMain.js

function MenuItem({ width , name , chooseIndex , choosePage }) {

  const clickOnMenu = ( evt ) => {

    evt.preventDefault;

    switch( name ){

      case "Компания":
        chooseIndex(1);
        choosePage("сompany","menu");
        break;

      case "Услуги":
        chooseIndex(2);
        choosePage("service","menu");
        break;

      case "Мы возим":
        chooseIndex(3);
        choosePage("weDrive","menu");
        break;

      case "Активы":
        chooseIndex(4);
        choosePage("ourActives","menu");
        break;

      case "Контакты":
        chooseIndex(5);
        choosePage("contacts","menu");
        break;

    }

  }

ПРОБЛЕМА

Суть проблемы в том, что пока ДВА раза не нажмешь на ссылку в меню. Индекс страницы нормально нигде не поменяется. И при начале прокрутки колесом мышки, индекс слетает на 0. Я вроде интуитивно понимаю, что нужно копать в сторону пре-рендера. Но, решил все таки спросить у более квалифицированных людей, как поступить с данной проблемой.