I am building react image gallery and am finding it difficult to implement the next functionality. which will allow the user to click on the next button and be shown the image in the gallery.

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;