Tailwind Element animation not showing on website. Only shows after making a change in source code, and stops if page is refreshed

Question

I'm creating my portfolio website using Vite, React, and TailwindCSS. I am using some animations from Tailwind Elements and they seem to work only after I make changes in my code. For example:

I have

data-te-animation-init   data-te-animation-start="onHover"   data-te-animation-reset="true"   data-te-animation-delay="3"   data-te-animation="[fade-in-down_3s_ease-in-out]"

in a div, I open the browser, and nothing shows up, but once I make a change on the source code - for example change "OnHover" to "OnClick", the animation on "onHover" will start working.

Here is a photo of the structure of my project

Here is the code of Intro.jsx:

    `import React from 'react';
    import { Animate, initTE } from "tw-elements";
    initTE({ Animate });

    function Intro() {
    
        return(
            <div  className='flex items-center justify-center flex-col text-center pt-20 pb-6'>
                <h1 data-te-animation-init
                    data-te-animation-start="onLoad"
                    data-te-animation-reset="true"
                    data-te-animation-delay="3"
                    data-te-animation="[fade-in-down_3s_ease-in-out]"
                 className='text-4xl md:text-7xl dark:text-white mb-1 md:mb-3 font-bold'>
                    My Name
                </h1>
                <p   data-te-animation-init
                     data-te-animation-start="onLoad"
                     data-te-animation-delay="4"
                     data-te-animation-reset="true"
                     data-te-animation="[fade-in-left_3s_ease-in-out]"
                className="text-base md:text-xl mb-3 font-medium">
                        Software Engineer & Web Developer
                </p>
                <p  data-te-animation-init
                    data-te-animation-start="onLoad"
                    data-te-animation-reset="true"
                    data-te-animation-delay="5"
                    data-te-animation="[fade-in-right_3s_ease-in-out]"
                className='text-sm max-w-xl mb-6 font-bold'>

                        Welcome to my portfolio website! 
                        I am My Name, a recent computer science graduate
                        from University, 
                        and I'm thrilled to share my passion for learning and exploring
                        various technologies in the field of computer science.

                </p>
            </div>
        );
    }`

I have tried opening my project on different browsers, I have deployed my website to see if it fixed something but nothing has worked. I've also searched online and read the documentation for Tailwind Elements and no luck...

Any help would be appreciated, thank you!