How to implement next functionality in react. am building react image gallery, and I am finding it difficult to implement the next button functionality where

import React from 'react';
import  { useState } from 'react';
import images from './GalleryData';
function App({imgages}) {

  const [currentIndex, setCurrentIndex] = useState(0);
  const imageStyle = {
    height: '200px',
    width: '200px',
    margin: '10px'
  }

  function goToNextImage() {
    if(currentIndex < images.length - 1) {
      setCurrentIndex(currentIndex + 1);
    }
  }


  return (
    <>
    <div>
      {
       images.map((image)=>(
        <img style={imageStyle}key={image.id} src={image.imgURL} />
       
       
        ))}
    </div>  
    <button onClick={goToNextImage}>Next</button>
    </>
  
  );
};

export default App;

Please create a legible post where you ask clear questions.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').