how to make a single div from an array of divs appear to a component every 24 hours?

Question

I think I'm on the right track, but basically, I have a file with 3 divs in an array that I want to display one every 24 hours.

I found a wordle clone on Github that essentially does this with a "getWordOfTheDay" function but I'm confused where I would put these random divs so that they render in the main component.

i feel like the solution would be finding a different way to render DisplayComponent as a JSX element instead of doing this: < DisplayComponent >< /DisplayComponent >

here is my 'app' component where I want to display a certain div at a time on the home screen. these divs are colored differently with CSS so I can distinguish which one is which.

    import React, { Component } from 'react';
    import './App.css';
    import Layout from './components/Layout'
    
    
    function daysSinceStart() {
      const start = (new Date(2022, 2, 1)).getTime();
      const now = (new Date()).getTime();
      return Math.floor( (now - start) / (1000 * 60 * 60 * 24));
    }
    
    export class App extends Component {
        render() {
        const componentsArray = [<div className="a"></div>, <div className="b"></div>, <div className="c"></div>]
        const DisplayComponent = componentsArray[daysSinceStart % componentsArray.length];
            return (
        <Layout>
           <div className='title'>welcome</div>
            <div className="page">
                 <div className="container">
                 <DisplayComponent>
                      <img 
                         src=""
                         alt="" id="img"
                         className="img" draggable= {false}/>
                      </DisplayComponent>
                </div>
              </div>
           
           </Layout>
            

            );
        }
    }
    
    export default App;

thank you very much in advance.