* Ayude a aclarar cómo establecer el estado en la sección actual que se está viendo cuando se hace clic en el botón o se desplaza a la nueva sección

Estoy tratando de crear un botón que se desplace a la siguiente sección de la página, independientemente de la sección actual y de cómo haya llegado el usuario allí. (Actualmente, el botón va a la siguiente sección, pero si el usuario se desplaza a una nueva sección desplazándose y sin hacer clic en el botón, la sección actual no se actualiza y al hacer clic en el botón lo llevará a la sección incorrecta).

¿Cómo puedo rastrear la sección actual que se está viendo cuando un usuario se desplaza para acceder a ella y cuando se hace clic en el botón? Actualmente tengo una aplicación React que procesa varios componentes a la vez. Cada componente es una sección, todos los cuales se encuentran en un contenedor div. Cada sección es 100vh (como una página nueva) y me gustaría ir a una página nueva al hacer clic en el botón o al desplazarme.

el código actual está a continuación:

 const [currentSection, setCurrentSection] = useState(1) const sections = { 1 : '#home', 2 : '#two', 3 : '#three', 4 : '#four', 5 : '#five' };

...dentro del retorno

 {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>