I'm trying to make a slideshow that rotates between images every 5 seconds, or if a button is pressed. If a button is pressed, the slideshow should stop for about 30 seconds (to allow the user to stop and read each slide)

Sorry for noob questions, I'm pretty new to coding

If anyone can help here is my code,

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;

I would be delighted if anybody can help. I'm very new to coding