setTimeout stop working after I add the window.addEventListener for the resize method

I am currently making a web page with react. A page contains three components, the Navi Bar, the main page body, and the footer. One of the main page would display a different picture from a set of the pictures for every 5 seconds, so I implement the setTimeout function to change the state for every 5 seconds. Before doing the mobile navi bar, this function was working very well. However, when I tried to the resize EventListener to listen a event when I resize the windows so that it would change the navi bar for a better view, the page that is supposed to display a different picture for every 5 second doesn't work now. It skip some pictures. I also tried the setInterval method, and it worked at the beginning; however, when I resized the screen, the setInterval also didn't work.

This is the code for the addEventListener method, and I added it in the APP.jsx file

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDesktop: false,
    };
    this.updatePredicate = this.updatePredicate.bind(this);
  }
  componentDidMount() {
    this.updatePredicate();
    window.addEventListener('resize', this.updatePredicate);
  }

  componentWillUnmount() {
  window.removeEventListener('resize', this.updatePredicate);
  }

  updatePredicate() {
    this.setState({ isDesktop: window.innerWidth > 1284 });
  }
render()
    {
      const isDesktop = this.state.isDesktop;
      const routes = () => (
          <Route path="/main" component={main}/>
      );
    return (

        <Router>

          {isDesktop?(<div>
          <Top/>

          <div style= >
            {routes()}

          <br/>
          <br/>
          <br/>
          <br/>
          </div>
          <div style=>
        <Footer />
          </div></div>):(
              <div>
                <SmallScreenTop/>

                <div style= >
                  {routes()}

                  <br/>
                  <br/>
                  <br/>
                  <br/>
                </div>
                <div style=>
                  <Footer />
                </div></div>

          )}
        </Router>
    );
  }
}
export default App;

and that is the code for the main page

import React from 'react';
import { Container, Image } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.css';


/** The Footer appears at the bottom of every page. Rendered by the App Layout component. */
class main extends React.Component {
  constructor(props) {
    super(props);
    this.changeImage = this.changeImage.bind(this);
    this.state = {
      ImageIndex: 0,
      ImageSource : '1.jpg'
    }
  }
  changeImage() {
    const ImageSourceList =[{source:'1.jpg'},{source:'2.png'},{source:'3.png'},{source:'4.jpg'}]
    let i = this.state.ImageIndex;
    if(i+1 >3)
      i =0;
    else
      i = i+1;
    this.setState({ ImageIndex: i, ImageSource: ImageSourceList[i].source });
  }

  render() {

    return (
        <div style=>




            <Container >
              {setTimeout(this.changeImage, 5000)}
              <div style= >
                <Image src={this.state.ImageSource} style=/>
              </div>

            </Container>


        </div>
    );
  }
}

export default main;