Jump to sequential tags by one button

I have the following source code(React.js, React-scroll, React-bootstrap). Click the div, Jump to specific image tag.(In this example, jump to first image.)

render(){
  return(
    <React.Fragment>
      <Modal>
        <Modal.Header>
          <div className="jump-to-image">
            <Link to="page-image-1" containerId="containerElement"></Link>
          </div>
        </Modal.Header>
        <Modal.Body>
          <Element name="scroll-area" className="document-content-page-images" id="containerElement">
            {this.renderPageImages()}
          </Element>
        <Modal.Body>
        ...
  )
}
renderPageImages(){
  return _.map(page_images, (page_image, i) => (
    <Element key={i} name={"page-image-" + (i + 1)}>
      <img className="document-content-page-image" src={`/thumbnail?path=...}`}/>
    </Element>
  ))
}

But I want (single) button jumping to image tags sequentially.

1st click: Jumping to first image tag(page-image-1)
2nd click: Jumping to next image tag(page-image-2)
3rd click: Jumping to next image tag(page-image-3)
...
Image that what I want.

Please tell me how to realize.

Here you go

There is no need of <Link> you can use simple button an on that click increment the count right after scroll, so on next click you can scroll to next element

scroller.scrollTo("page-image-" + scrollTo, {

WORKING DEMO

Code:

import React, { useState } from "react";
import "./styles.css";
import { Element, scroller } from 'react-scroll'

// fake data to loop through
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

export default function App() {
  // use state to maintain the last/next to scroll index
  const [scrollTo, setScrollTo] = useState(1);

  const scrollToElement = () => {

    // You can scroll to element by it's name
    scroller.scrollTo("page-image-" + scrollTo, {
      duration: 1500,
      delay: 100,
      smooth: true,
      offset: 0 // Scrolls to element + 50 pixels down the page
    });

    // increment the state, so on next click you can scroll to next element
    setScrollTo(scrollTo => scrollTo + 1);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={scrollToElement}>Scroll to {scrollTo}</button>
      {data.map(d => (
        <Element name={`page-image-${d}`} className="block"> // <--- Element
          Scroll to : {d}
        </Element>
      ))}
    </div>
  );
}