Cannot Change backgound image using javascript though the image change is shown in console?

hello people i am trying to change background images on a interval of 3 seconds using javascript the code seem to be correct because the images can be seen changed in the console but not on the screen i see blank screen after 3 seconds.

here is my react code

import React, { useEffect, useState } from "react";

function Home() {
  let i = 0; // Start index from 0

  useEffect(() => {
    const interval = setInterval(backgroundImages, 3000);
    return () => {
      clearInterval(interval); // Clean up the interval when the component unmounts
    };
  }, []);

  function backgroundImages() {
    const imagearr = [
      "rajwada.jpeg",
      "indore.jpeg",
      "females.jpeg",
      "mayor.jpg"

    ]


    console.log("Changing background image");
    document.getElementById("main").style.backgroundImage = `url(${imagearr[i]})`;
    i++;
    if (i === imagearr.length) {
      i = 0;
    }
  }


  return (
    <div className="PARENTHERO">

      <div className="Hero" id="main" >
        {/* <div className="WELCOME">
        <h1 className="Heading2">LUCKY DRAW</h1>
        <h1 className="Heading2"> NAGAR PALIKA NIGAM INDORE</h1>
        </div> */}
      </div>
    </div>
  );
}

export default Home;

here are my css classes

.Hero {
    background-image: url(mayor.jpg);
    height: 60vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}

.PARENTHERO {
    height: 100%;
}

by default i am using an image in the background also consider the names of the images to be correct and no path issues

Via Active questions tagged javascript - Stack Overflow https://ift.tt/pvfoRPB