I am changing text between two values using React useState and setInterval and it works fine.

function Home() {
  const [role, setRole] = useState("Text A");
 


    const inter = setInterval(()=>{
      changeHome()
    },5000)


 function changeHome() {
   role ==="Text A"?setRole("Text B"):setRole("Text A");
   
   clearInterval(inter);
 };

 useEffect(()=>{
  //className&&setClassName("fade")
 },[role])

  return (
  
              
  <div id="home" >  
      <div className='text' >
        <span >Hello!</span>
      <h1 >I'm <span>Karim Isaac</span></h1>
       <h2 className="fade">{role}</h2>
       
      <Stack spacing={2} direction={'row'}>
       <StyledButton variant="contained">Hire Me</StyledButton>
       <StyledButton variant="contained">My works</StyledButton>
      </Stack>
         
       </div>


       
       </div>
     

  )
}

export default Home

I am trying to add animation to the text when it changes using css

@keyframes fade-down {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
    
}

.fade{
    animation: fade-down 2.5s infinite alternate;
}

it works but the timing is not perfectly well. I think that’s because there are two timers; setinterval and animation timer