Estoy tratando de hacer una presentación de diapositivas que rota entre imágenes cada 5 segundos, o si se presiona un botón. Si se presiona un botón, la presentación de diapositivas debe detenerse durante unos 30 segundos (para permitir que el usuario se detenga y lea cada diapositiva)

Perdón por las preguntas de novato, soy bastante nuevo en la codificación

Si alguien puede ayudar aquí está mi código,

 import './App.css'; import pic1 from './images/red.jpg' import pic2 from './images/green.jpg' import pic3 from './images/pink.jpg' import pic4 from './images/blue.jpg' import * as FaIcons from "react-icons/fa"; import * as IoIcons from "react-icons/io5"; var i = 0; var images = []; var time = 3000; images[0] = pic1 images [1] = pic2 images[2] = pic3 images [3] = pic4 function App() { const [buttonPressedRecently, setPressedRecently] = React.useState(false); function changeImage() { if (i < images.length - 1){ i++; } else { i = 0; } document.getElementById('sponsorImage').src = images [i]; } function clickedButton() { setPressedRecently(true) setTimeout(() => { setPressedRecently(false) console.log(buttonPressedRecently); }, 30000); changeImage(); console.log('===================================='); console.log(buttonPressedRecently); console.log('===================================='); } if (buttonPressedRecently) { } if (!buttonPressedRecently) { setInterval(() => { changeImage(); }, 5000); } return ( <> <div className='Blackbox'> <p className='sponsoredText'>Sponsored tokens...</p> <button className='nextbtn' onClick={clickedButton}><FaIcons.FaAngleLeft className='arrowicons'/></button> <button className='prevbtn' onClick={clickedButton}><FaIcons.FaAngleRight className='arrowicons'/></button> <button className='qrbtn'> <IoIcons.IoQrCodeOutline className='arrowicons'/></button> <div className='centerline'> <img id="sponsorImage" /> </div> </div> </> ); } export default App;

Estaría encantado si alguien puede ayudar. Soy muy nuevo en la codificación