import React,{useState,useEffect} from 'react'
        import { sliderData } from './sliderData'
        import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
        import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
        import "./SlideShow.css"
        export default function SlideShow() {

        const [currentImg,setCurrentImg]=useState(0)
        const [hovered,setHovered]=useState(false)

        useEffect(() => {

        if(!hovered ){
           const interval=setTimeout(() => {
           const newSlideIndex= currentImg>=sliderData.length-1 ?0:currentImg+1;
      
          setCurrentImg(newSlideIndex );
       }, 1000);

     return(() => {

     
            })

      }
      }, [currentImg])


     return (
   
            <div >
             <h3>SlideShow</h3>
             <div className="slideshow"  >
                <div  className="slider" onMouseOver={()=>setHovered(true)}  
                 style= 
                    {{backgroundImage:`url(${sliderData[currentImg].image})`}}>
                <div className="left"><ArrowBackIosIcon   onClick={()=> 
                 {currentImg>0 &&  setCurrentImg(currentImg-1)}}/> </div>
                <div className="center"></div>
                <div className="right" ><ArrowForwardIosIcon  onClick={()=>{ 
                  currentImg<sliderData.length-1 && 
                   setCurrentImg(currentImg+1)}}/></div>
              </div>
              </div>
            </div>

          )
        }

This is pausing on hover but didnt continue sliding after hover