title: Problem with setState looping inside an array Next.js
body: <p>Can't find a way to solve my problem its looping correctly the first time but after looping twice in the array I got an error &quot;TypeError: props.imgData[index] is undefined&quot;.</p>
  <p>Here is my code :</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  
  import Image from 'next/image';
  
  export default function SimpleSlider(props) {
     
    let matchingIdArray = props.imgData.findIndex(element =&gt; {
      return element.id === props.id 
    })
    
  let [index,setIndex] = React.useState(matchingIdArray )
  console.log(index)
  
    let next = () =&gt; {    
     setIndex(prev =&gt; 
        {
        if(prev &lt;props.imgData.length -1 )       {
         return   prev +1      
          }
          else {
         setIndex(0)
          }
      } )     
    } 
    return (
      &lt;section className=&quot;w-full h-screen mx-auto&quot;&gt;
    
    &lt;div onClick={next}  className=&quot; w-3/4 mx-auto h-screen  &quot;&gt;      
    &lt;Image src={props.imgData[index].urls.raw} width={props.imgData[index].width} height={props.imgData[index].height} quality={100}  /&gt; 
    &lt;/div&gt;
           
      &lt;/section&gt;
    )
  }
  </code></pre>