Problem with setTimeout and setInterval whenever the time shows always clash

Question

I have confused with setTimeout and setInterval. Every time I change the time, it wouldn't pass the period that I want. I mean to show the first Array with a fade when the page is loaded for the first time, after 3 seconds followed by a second Array, after 3 seconds followed by a third Array, and this cycle repeats with fade on each array that is displayed.

Please help, here's the code I have:

<section class="flexcontainer">
        <div class="greeting scale-up-center">
            <ul>
                <li id="today"></li>
                <li id="yours"></li>
            </ul>
        </div>
    </section>

section.flexcontainer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100vh;
    overflow: auto;
    flex-direction: row;
}

section.flexcontainer div {
    width: 100%;
    height: auto;
    margin: 0;
}

.greeting {
    text-align: center;
    color: #fff;
    /* color: #9E439D; */
    text-shadow: 2px 3px 13px rgb(171, 79, 232);
}

.greeting ul {
    position: relative;
    display: inline-flex;
    list-style: none;
    font-size: 5rem;
    font-weight: 700;
}

.greeting ul li:first-child {
    margin-right: 1rem;
    font-size: 5rem;
    font-weight: 300;
    color: rgb(214, 172, 242);
}

/* Scale Up Animation for div */

.scale-up-center {
    -webkit-animation: scale-up-center 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
            animation: scale-up-center 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-4-25 20:53:35
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
 @-webkit-keyframes scale-up-center {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
              opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @keyframes scale-up-center {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
              opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }

/* Fade Animation */
.fade {
    animation: myanimation 1.5s;
}
@keyframes myanimation {
    from {opacity: 0;}
    to {opacity: 1;}
}

// Function for greeting
const isYours = () => {
    const greeting = 'Boss'; //You Name It
    document.getElementById('yours').innerHTML = `${greeting}`;

}

// Function for date
const isHours = () => {
  
        const now = new Date();
        let hours = now.getHours();
        let isToday;

    // An Array to called up
    const thisDay = [
        ['Selamat Pagi', 'Good Morning', 'おはようございます'],
        ['Selamat Siang', 'Good Afternoon', 'こんにちは'],
        ['Selamat Sore', 'Good Evening', 'こんにちは'],
        ['Selamat Malam', 'Good Night', 'おやすみなさい'],
    ]

    const welcomeTitle = document.getElementById('today');

    let languageIndex;

    
    const changeToday = () => {

        let language = thisDay[languageIndex];

        // SetTimeout to call each Array
        let setToTimeout = () => {
            welcomeTitle.textContent = language[0];
            setTimeout(() => welcomeTitle.textContent = language[1], 3000);
            setTimeout(() => welcomeTitle.textContent = language[2], 6000);
        }

        // If statement to call thisDay Array
        if (hours >= 5 && hours < 11) {
            languageIndex = 0;
            setToTimeout();
        } else if (hours >= 11 && hours < 15) {
            languageIndex = 1;
            setToTimeout();
        } else if (hours >= 15 && hours < 19) {
            languageIndex = 2;
            setToTimeout();
        } else if (hours >= 19 && hours < 24 || hours >= 0 && hours < 5) {
            languageIndex = 3;
            setToTimeout();
        } else {
            welcomeTitle.textContent = 'Welcome';
        }
    }

    // SetTimout to fade each Array when it called
    const fadeAnimation = () => {
        const welcomeTitle = document.getElementById('today');

        welcomeTitle.className = '';

        setTimeout(() => welcomeTitle.className = 'fade', 0);
        setTimeout(() => welcomeTitle.className = 'fade', 3000);
        setTimeout(() => welcomeTitle.className = 'fade', 6000);
    }
    
    // the interval time zzzzzz
    setInterval(changeToday, 3000);
    setInterval(fadeAnimation, 3000);
}

isYours();
isHours();