I have a div that I want to have cycle through some background images, say images are 1.jpg, 2.jpg, 3.jpg

const [imageIndex, setImageIndex] = useState(1);  

setTimeout(function () {
    var i = imageIndex + 1;
    if (i > 3) {i = 1;}
    setImageIndex(i);
}, 3000);

const imageUrl = `url("${imageIndex}.jpg")`;
  
 some content 

What I have done is have the image in state and then change the background image based on this state, is there a nicer way to do this with maybe some transitions?