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 (
        <img style={imageStyle}key={} src={image.imgURL} />
    <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 (').