Использование анимации ScaleRotate в реагирующем бургер-меню

Question

Я хочу создать эффект, как на demo , для анимации scaleRotate. Выше вы можете увидеть, что я пытался. Кажется, это работает, пока пользователь не откроет меню гамбургеров, а затем его прокрутят вверх (что нежелательно, что если пользователь читает что-то, он неправильно щелкает по гамбургеру и прокручивается до верха). Есть и другие вещи, например, я могу прокручивать содержимое страницы, когда меню открыто. Как вы думаете, это какая-то ошибка в моем коде или актуальная ошибка? Вы также можете посетить выпуск на github.

Вот код:

<div id="outer-container">

         <Menu pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" }>
              // Those spans are scrolling to specific parts of conent
              <span className="first-option option"
                onClick={() => goToAnchor('welcome') }>
                Welcome!
              </span>

              <span href="/about" className="option"
                onClick={() => goToAnchor('about') }>
                Tech details!
              </span>

              <span href="/projects" className="option"
                onClick={() => goToAnchor('projects') }>
                My projects!
              </span>

              <span href="/contact" className="option"
                onClick={() => goToAnchor('contact') }>
                Contact me!
              </span>
          </Menu>

          <main id="page-wrap">
                  CONTENT CONTENT CONTENT
          </main>
</div>