*Please help clarify how to set state to the current section being viewed when button clicked or scroll to new section

I am trying to create a button that scrolls to the next section of the page regardless of the current section and how a user has gotten there. (Currently, the button goes to the next section, but if the user scrolls to a new section by scrolling and not clicking the button, the current section is not updated and clicking the button will lead to the wrong section).

How can I track the current section being viewed when a users scrolls to access it and when the button is clicked? I currently have a React app that renders a number of components all at once. Each component is a section, all of which are held in a container div. Each section is 100vh (like a new page) and I would like to go to a new page when clicking the button or scrolling.

the current code is below:

const [currentSection, setCurrentSection] = useState(1)

const sections = {
1 : '#home',
2 : '#two',
3 : '#three',
4 : '#four',
5 : '#five'
};

...inside of the return

    {currentSection <= 5 &&

    <div className='scroll-down'>
        <a href={`${sections[currentSection]}`} onClick={() => setCurrentSection(currentSection + 1)}>
        <button id="btnScroll" >
          <i className='material-icons'>arrow_downward</i>
        </button>
        </a>
    </div>
    }

  <div className='container'>
    <Home/>
    <Philosophy/>
    <Experience/>
    <Projects/>
    <Contact/>
  </div>