Как реализовать ссылку на раздел в меню переключения React

Question

Я создаю одностраничное веб-приложение, начиная с шаблона React Starter Kit. Я пытаюсь реализовать Toggle Menu, где каждая кнопка должна прокручиваться до раздела: https://reactjsexample.com/check-out-the-magic-behind-out-toggle-menu/

Я не знаю, как реализовать:

<Link
                activeClass="active"
                to="section1"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
              >
                Section 1
</Link>

В массиве, который труднозакодированный числами, этот массив не принимает объекты:

const iconArrayOne = [1, 2, 3];
const iconArrayTwo = [1, 2, 3].reverse();

Поэтому при нажатии на каждую переменную массива (1 должна быть ссылка или отображение переменной через раздел Link to =) ссылка будет прокручиваться до разделаid, который указан в App.js

      <Section
        title="Section 1"
        subtitle={dummyText}
        dark={true}
        id="section1"
      />

Компонент section.js:

import React from "react";


export default function Section({ title, subtitle, dark, id }) {
  return (
    <div className={"section" + (dark ? " section-dark" : "")}>
      <div className="section-content" id={id}>
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
    </div>
  );
}

Ссылка на раздел, в настоящее время работающая с navmenu:

import React, { Component } from "react";
import logo from "../hamburger.svg";
import { Link, animateScroll as scroll } from "react-scroll";

export default class Navbar extends Component {
  scrollToTop = () => {
    scroll.scrollToTop();
  };

  render() {
    return (
          <nav className="nav Toggle Collapse" id="basic-navbar-nav" expand="" aria-controls="basic-navbar-nav">
            <div className="nav-content">
              <img
                src={logo}
                className="nav-logo"
                alt="Logo"
                onClick={this.scrollToTop}
              />
              <ul className="nav-items">
                <li className="nav-item">
                  <Link
                    activeClass="active"
                    to="section1"
                    spy={true}
                    smooth={true}
                    offset={-70}
                    duration={500}
                  >
                    Section 1
              </Link>
                </li>
                <li className="nav-item">
                  <Link
                    activeClass="active"
                    to="section2"
                    spy={true}
                    smooth={true}
                    offset={-70}
                    duration={500}
                  >
                    Section 2
              </Link>
                </li>
                <li className="nav-item">
                  <Link
                    activeClass="active"
                    to="section3"
                    spy={true}
                    smooth={true}
                    offset={-70}
                    duration={500}
                  >
                    Section 3
              </Link>
                </li>
                <li className="nav-item">
                  <Link
                    activeClass="active"
                    to="section4"
                    spy={true}
                    smooth={true}
                    offset={-70}
                    duration={500}
                  >
                    Section 4
              </Link>
                </li>
                <li className="nav-item">
                  <Link
                    activeClass="active"
                    to="section5"
                    spy={true}
                    smooth={true}
                    offset={-70}
                    duration={500}
                  >
                    Section 5
              </Link>
                </li>
              </ul>
            </div>
          </nav>
 );  
}
}

Buttonmenu.js

import React, { Component } from 'react';
import {Motion, StaggeredMotion, spring} from 'react-motion';
import noop from 'react-props-noop';
import classNames from 'classnames';
import Link from "react-scroll";

/**
 * <Btn />
 */
class Btn extends Component {
  constructor() {
    super();

    this.state = {
      active: false,
    }

    this._onClick = this._onClick.bind(this);
  }

  _onClick() {
    this.setState({ 
      active: !this.state.active 
    });
  }

  render() {
    //const sectionone = <Link to="section1"> Section 1</Link> 
    const iconArrayOne = [1, 2, 3];
    const iconArrayTwo = [1, 2, 3].reverse();
    const tooltipArrayOne = ['One', 'Two', 'Three'];
    const tooltipArrayTwo = ['One', 'Two', 'Three'].reverse();

    return (
      <div className="container">
        <ButtonGroup>
          <StaggeredMotion
            defaultStyles={[
              { x: -45, o: 0 },
              { x: -45, o: 0 },
              { x: -45, o: 0 },
            ]}
            styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
              return i === prevInterpolatedStyles.length - 1
                ? {
                  x: spring(this.state.active ? 0 : -45, { stiffness: 330, damping: 20 }),
                  o: spring(this.state.active ? 1 : 0, { stiffness: 330, damping: 20 }),
                } : {
                  x: spring(prevInterpolatedStyles[i + 1].x, { stiffness: 330, damping: 20 }),
                  o: spring(prevInterpolatedStyles[i + 1].o, { stiffness: 330, damping: 20 }),
                };
            })}
          >
            {interpolatingStyles =>
              <ButtonGroup>
                {interpolatingStyles.map((style, i) =>
                  <Button
                    key={i}
                    style={{
                      position: 'relative',
                      right: style.x,
                      opacity: style.o,
                      pointerEvents: this.state.active ? 'auto' : 'none',
                    }}
                  >
                    <Tooltip text={tooltipArrayOne[i]} />
                    {iconArrayOne[i]}
                 </Button>
                )}
              </ButtonGroup>
            }
          </StaggeredMotion>

          <Motion
            defaultStyle={{ s: 0.675 }}
            style={{ s: spring(this.state.active ? 1 : 0.675, { stiffness: 330, damping: 14 }) }}
          >
            {interpolatingStyles =>
              <Button 
                className="button--large" 
                onClick={this._onClick} 
                style={{ 
                  transform: 'scale(' + interpolatingStyles.s + ')',
                }}
              >
                <span className={this.state.active ? 'icon active' : 'icon'} />
              </Button>
            }
          </Motion>

          <StaggeredMotion
            defaultStyles={[
              { x: -45, o: 0 },
              { x: -45, o: 0 },
              { x: -45, o: 0 },
            ]}
            styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
              return i === 0
                ? {
                  x: spring(this.state.active ? 0 : -45, { stiffness: 330, damping: 20 }),
                  o: spring(this.state.active ? 1 : 0, { stiffness: 330, damping: 20 }),
                } : {
                  x: spring(prevInterpolatedStyles[i - 1].x, { stiffness: 330, damping: 20 }),
                  o: spring(prevInterpolatedStyles[i - 1].o, { stiffness: 330, damping: 20 }),
                };
            })}
          >
            {interpolatingStyles =>
              <ButtonGroup>
                {interpolatingStyles.map((style, i) =>
                  <Button
                    key={i}
                    style={{
                      position: 'relative',
                      left: style.x,
                      opacity: style.o,
                      pointerEvents: this.state.active ? 'auto' : 'none',
                    }}
                  >
                    <Tooltip text={tooltipArrayTwo[i]} />
                    {iconArrayTwo[i]}
                  </Button>
                )}
              </ButtonGroup>
            }
          </StaggeredMotion>
        </ButtonGroup>
      </div>
    );
  }
}

/**
 * <Tooltip />
 */
const Tooltip = (props) => <span className="tooltip">{props.text}</span>;

/**
 * <ButtonGroup />
 */
const ButtonGroup = (props) => <div className="button-group" style={props.style}>{props.children}</div>;

/**
 * <Button />
 */
const Button = (props) => <button className={classNames('button', props.className)} style={props.style} onClick={props.onClick || noop}>{props.children}</button>;

export default Btn;

Файл App.js: <Buttonmenu /> - это мое меню переключения

import React, { Component } from 'react';
import logo from "./hamburger.svg";
import "./App.css";
import Customnavbar from "./components/Customnavbar";
import Section from "./components/Section";
import dummyText from "./DummyText";


import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

// components

import Header from './components/headerComponent/header';
import Footer from './components/footerComponent/footer';
import Homepage from './components/pages/homePage';
import Products from './components/pages/products';
import Buttonmenu from "./components/headerComponent/buttonmenu";

// includes

import './Assets/css/default.min.css';

class App extends Component {
  render() {
    return (

      <Router>
        <div className="App">

          <Header />

          <Route exact path='/' component={Homepage} />
          <Route exact path='/Products' component={Products} />
          <Customnavbar />
          <Buttonmenu />
          <Section
            title="Section 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
          />
          <Section
            title="Section 2"
            subtitle={dummyText}
            dark={false}
            id="section2"
          />
          <Section
            title="Section 3"
            subtitle={dummyText}
            dark={true}
            id="section3"
          />
          <Section
            title="Section 4"
            subtitle={dummyText}
            dark={false}
            id="section4"
          />
          <Section
            title="Section 5"
            subtitle={dummyText}
            dark={true}
            id="section5"
          />
          <Footer />
        </div>
      </Router>
    );
  }
}

export default App;