I am trying to modify this button menu:

(please click link to see the fiddle )

codepen.io/andytran/pen/YGyQRY

I want to create an onclick event or scroll to section property, on the individual buttons. This is the array:

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

And this is the location of the buttons:

<ButtonGroup>
  <StaggeredMotion
    defaultStyles={[
      { x: -45, o: 0 },
      { x: -45, o: 0 },
      { x: -45, o: 0 },
    ]}

As you can see the buttons are listed in an array, I need to identify each index of the array and create an onclick event or even better, use Reacts: to=section property, So each button scroll to a different section: 1 scrolls to section1, 2 scrolls to section2, 3 scrolls to section3...

For demo purpose here are the section component:

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>
  );
}

This is the property I would like to use

to="section1"

But how to do that in an array?

<ButtonGroup>
  <StaggeredMotion
    defaultStyles={[
      { x: -45, o: 0 },
      { x: -45, o: 0 },
      { x: -45, o: 0 },
    ]}