Changing background image setinterval only calling once

This is in REACT.JS. I have combed through the different posts on here trying to find a solution, however I have not been able to get this to run more than once. Any ideas would be greatly appreciated! I have the component code below

import React, { Component } from 'react'
import './Login.css'
import LoginHousing from './LoginHousing'
import bg1 from '../../images/backgrounds/lawn-maintenance.jpg'
import bg2 from '../../images/backgrounds/body-shop.jpg'
import bg3 from '../../images/backgrounds/mechanic.jpg'
import bg4 from '../../images/backgrounds/painting.jpg'
import bg5 from '../../images/backgrounds/hair-stylist.jpg'

export default class Login extends Component {
constructor(){
    super()
    this.state = {loginBg: bg1}
}

// Background slideshow effect on mount, changing every 2 seconds
changingBackground() {
    let i = 0
    const images = [bg1, bg2, bg3, bg4, bg5]

    if (i < images.length - 1) {
        i++;
    } else {
        i = 0;
    }

    this.setState({loginBg: images[i]})
}


componentDidMount() {
    this.timer = setInterval(
        () => this.changingBackground(),
        2000
    );
}

componentWillUnmount(){
    clearInterval(this.timer)
}

render() {
    return (
        <div className='login vw-100 vh-100' style={{backgroundImage: `url(${this.state.loginBg})`}}>
            <LoginHousing />
        </div>
    )
}
}

>Solution :

let i = 0

This variable is local to the function, so each time that function is executed in the interval, you basically start from the beginning.

You could change code to this:

changingBackground() {       
    this.setState((ps) => {
      return {
        index: (ps.index + 1) % this.images.length, // store images in instance field
      };
    });
  }

And then render:

this.images[this.state.index]

PS and constructor:

constructor() {
    super();
    this.state = { index: 0 };
}