Animated words are not working.

import './index.scss';

const AnimatedLetters =({ letterClass, strArray, idx}) => {
    return (
        <span>
            {
            strArray.map((char, i) => (
                <span key={char+i} className={`${letterClass}_${i+ idx}`}>
                    {char}
                </span>
            ))
            }
        </span>

    )
}
export default AnimatedLetters

text-animate {
    display: inline-block;
    opacity: 0;
    animation: bounceIn 1s 1s ;
    animation-fill-mode: forwards;
    min-width: 10px;
}

@for $i from 1 through 35 {
    .text-animate._#{$i} {
        animation-delay: #{$i/10}s;
    }
}

import { useState } from 'react';
import { Link } from 'react-router-dom';
import Loader from 'react-loaders';
import LogoTitle from '../../assets/images/logo-s.png';
import AnimatedLetters from '../AnimatedLetters';
import './index.scss';
const Home = () => {
      const [letterClass, setLetterClass] = useState('text-animate')
      const nameArray = ['i','m','a','n','s','h','u']
      const jobArray = ['w','e','b',' ','d','e','v','e','l','o','p','e','r','.']


    return (
        <div className="container home-page">
            <h1>
                <span className={letterClass}>H</span>
                <span className={`${letterClass} _12`}>i,</span>
                <br/>  
                <span className={`${letterClass} _13`}>I</span>
                <span className={`${letterClass} _14`}>'m</span>
            <img src={LogoTitle} alt="developer"/>
            <AnimatedLetters letterClass={letterClass} strArray={nameArray}
            idx={15}/>
            <br/>

            <AnimatedLetters letterClass={letterClass} 
            strArray={jobArray} idx={22}/>
            </h1>
            <h2>Frontend Developer / Javascript Expert / Open-Source COntributor</h2>
            <Link to="/contact" className='flat-button'>CONTACT-ME</Link>
        </div>
    )
}

export default Home