Реакция привязки тегов / переполнение тела не работает на мобильных устройствах

Question

Я нашел эту трудную для отладки ошибку. Я создал свой сайт портфолио с использованием React и реализую дизайн в стиле «прокрутка до раздела». На настольном компьютере это работает отлично и, как и ожидалось, а при уменьшении размера страницы до размеров мобильных устройств она работает как положено.

При тестировании на мобильном устройстве я получаю различные варианты поведения.

Chrome: блокировка прокрутки работает, а переполнение тела скрыто, но при нажатии на ссылку привязки она плавно прокручивается до нужного раздела, но только один раз. После этого теги привязки не работают или, по крайней мере, не прокручиваются.

Firefox: Переполнение тела не установлено, и страница прокручивается, но теги привязки работают.

Safari: То же, что Firefox.

Я используя npm библиотеку https://github.com/willmcpo/body-scroll-lock, которая говорит, что она работает для всех браузеров.

Я также использую Hashlink, как было предложено для тегов привязки в React.

Я использую поведение прокрутки для анимации прокрутки, я знаю, что это поддерживается не всеми браузерами, но, по крайней мере, должно работать на Chrome мобильных устройствах.

Также я размещаю на страницах Github.

Вот часть исходного кода:

Домашняя страница, где используется плагин прокрутки тела:

import React from 'react'
import Header from './Globals/Header';
import TopSection from './TopSection';
import AboutSection from './AboutSection';
import PortfolioSection from './PortfolioSection';
import Contact from './Contact';
import ThemeProvider from "./ThemeProvider";
import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
import '../styles/PortfolioStyles/PortfolioStyles.scss';

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            navOpacity: 0,
        }
    }

    componentDidMount = () => {
        this.targetElement = document.querySelector('body');
        disableBodyScroll(this.targetElement);

    }

    componentWillUnmount = () => {
        clearAllBodyScrollLocks();
    }

    setOpacity = (opacity) => {
        setTimeout(() => (
            this.setState({ navOpacity: opacity })
        ), 1000);
    }
    render() {
        return (
            <ThemeProvider>
                <div className='homepage' id='homePage'>
                    <Header showNav={this.state.navOpacity} />
                    <TopSection setOpacity={this.setOpacity} />
                    <AboutSection />
                    <PortfolioSection />
                    <Contact />
                </div>
            </ThemeProvider>
        )
    }
};

export default Home;

А вот меню, в котором живут ссылки:

import React from 'react';
import { bubble as Menu } from 'react-burger-menu'
import { HamburgerElastic } from 'react-animated-burgers'
import { NavLink } from 'react-router-dom';
import { HashLink as Link } from 'react-router-hash-link';

const styles = {
  menu: {
    bmMenuWrap: {
      position: 'fixed',
      height: '100%'
    },
    bmMenu: {
      background: '#373a47',
      padding: '2.5em 1.5em 0',
      fontSize: '1.15em',
      width: '100%'
    },
    bmMorphShape: {
      fill: '#373a47'
    },
    bmCrossButton: {
      height: '24px',
      width: '24px'
    },
    bmCross: {
      background: '#bdc3c7'
    },
    bmItemList: {
      color: '#b8b7ad',
      padding: '0.8em',
      width: '100%',
      display: 'flex',
      alignItems: 'center'
    },
    bmItem: {
      display: 'inline-block'
    },
    bmOverlay: {
      background: 'rgba(0, 0, 0, 0.3)'
    }
  }
}

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false,
      menuOpen: false
    }
  }

  toggleButton = () => {
    this.setState({
      isActive: !this.state.isActive
    })
  }

  handleStateChange = (state) => {
    this.setState({ menuOpen: state.isOpen, isActive: state.isOpen })
  }

  toggleMenu = () => {
    this.setState({
      menuOpen: !this.state.menuOpen,
      isActive: !this.state.isActive
    });
  }


  render() {
    return (
      <div>
        <HamburgerElastic
          isActive={this.state.isActive}
          barColor="#d2d2d2"
          style={{
            position: 'fixed',
            top: '1rem',
            right: '1rem',
            zIndex: 999
          }}
          onClick={() => this.toggleMenu()} />
        <Menu
          styles={styles.menu}
          isOpen={this.state.menuOpen}
          customBurgerIcon={false}
          customCrossIcon={false}
          onStateChange={(state) => this.handleStateChange(state)}>
          <header className='nav_list'>
            <h4>Home Page</h4>
            <ul>
              <li>
                <NavLink to="/" color="inherit" exact={true} onClick={() => this.toggleMenu()}>Home</NavLink>
              </li>
              <li>
                <Link to="/#aboutSection" onClick={() => this.toggleMenu()}>About</Link>
              </li>
              <li>
                <Link to="/#portfolioSection" onClick={() => this.toggleMenu()}>Portfolio</Link>
              </li>
              <li>
                <Link to="/#contactSection" onClick={() => this.toggleMenu()}>Contact</Link>
              </li>
            </ul>
            <h4>Apps</h4>
            <ul className="app_list">
              <li>
                <NavLink to="/remotejobapp" onClick={() => this.toggleMenu()} exact={true}>Remote Job Board</NavLink>
              </li>
              <li>
                <NavLink to="/indecisionapp" onClick={() => this.toggleMenu()} exact={true}>Indecision App</NavLink>
              </li>
              <li>
                <NavLink to="/taskcardapp" onClick={() => this.toggleMenu()} exact={true}>Task Card App</NavLink>
              </li>
            </ul>

          </header>
        </Menu>
      </div>
    )
  }
};

export default Header;

Я новичок в React, поэтому любые советы / предложения будут высоко оценены.

Спасибо!