Estoy construyendo un control deslizante de imagen, que cambia de imagen si el usuario después de 5 segundos no lo usa. Y cuando pasan los 5 segundos, se muestra el error. Gracias por tu ayuda

importar Reaccionar, {useRef, useState} desde 'reaccionar'

importar BeforeIcon desde "../assests/before.svg" importar NextIcon desde "../assests/next.svg"

importar Banner1 desde "../assests/banner1.jpg" importar Banner2 desde "../assests/banner2.jpg"

importar "../estilos/banner.css"

Exportar función predeterminada Banner () {

 const ImgContainer = useRef() const [position, setposition] = useState(0) const w = window.innerWidth const handleNext = () => { let newposition = position+1 let move = w*newposition setposition(newposition) return( ImgContainer.current.style.transform = "translateX(-" + move + "px)", ImgContainer.current.style.transition = "transform, 1s", console.log(move), setposition(position+1) ) } const handleBefore = () => { let newposition = position-1 let move = w*newposition setposition(newposition) return( ImgContainer.current.style.transform = "translateX(-" + move + "px)", ImgContainer.current.style.transition = "transform, 1s", console.log(ImgContainer.current.style) ) } setTimeout(() => { if (position===0){ handleNext() } else { return( console.log("slide") ) } }, 5000); return ( <section> <button onClick={handleBefore}><img src={BeforeIcon} alt="" className="button rigth"/></button> <div ref={ImgContainer} className="imgcontainer"> <img src={Banner2} alt="" className="bannerimg"/> <img src={Banner2} alt="" className="bannerimg"/> <img src={Banner2} alt="" className="bannerimg"/> <img src={Banner2} alt="" className="bannerimg"/> <img src={Banner1} alt="" className="bannerimg"/> <img src={Banner1} alt="" className="bannerimg"/> <img src={Banner1} alt="" className="bannerimg"/> </div> <button onClick={handleNext}><img src={NextIcon} alt="" className="button left"/></button> </section> )

}