I have a React component where elements change color every 5 seconds based on a countdown timer. I want the color changes to happen smoothly, but my current approach doesn’t work.

Here’s the code for my component:

  const [colour2,setColour2] = React.useState("from-white to-white");
  const [colour3,setColour3] = React.useState("from-white to-white");
  const [counter, setCounter] = React.useState(15);


  
  React.useEffect(() => {
    counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
    if(counter == 0){
      setCounter(15)
    }
    if([11,12,13,14,15].includes(counter)){
      setColour1("from-sky-600 to-cyan-300")
      setColour2("from-white to-white")
      setColour3("from-white to-white")

    }
    if([6,7,8,9,10].includes(counter)){
      setColour2("from-orange-600 to-amber-300 ")
      setColour1("from-white to-white")
      setColour3("from-white to-white")
    }
    if([5,4,3,2,1].includes(counter)){
      setColour3("from-purple-600 to-pink-600")
      setColour2("from-white to-white")
      setColour1("from-white to-white")
    }
  }, [counter]);

  return (
    <div className='absolute top-[80px] h-[600px] w-[150vh] ml-[200px] '>
      <div className='text-white'>{counter}</div>
      <span class={'absolute mx-auto py-4 flex border w-fit bg-gradient-to-r blur-3xl ' + (colour1) + ' bg-clip-text text-6xl box-content font-extrabold text-transparent text-center select-none transition-colors ease-out duration-500'}>
        Contact.
      </span>
      <h1
        class={"relative top-0 w-fit h-auto py-4 justify-center flex bg-gradient-to-r items-center " + (colour1) + " bg-clip-text text-6xl font-extrabold text-transparent text-center select-auto transition-colors ease-out duration-500"}>
        Contact.
      </h1>
      <span class={"absolute mx-auto py-4 flex border w-fit bg-gradient-to-r blur-3xl " + (colour2) + " bg-clip-text text-6xl box-content font-extrabold text-transparent text-center select-none transition-colors ease-out duration-500"}>
        Dev.
      </span>
      <h1
        class={"relative top-0 w-fit h-auto py-4 justify-center flex bg-gradient-to-r items-center " + (colour2) + " bg-clip-text text-6xl font-extrabold text-transparent text-center select-auto transition-colors ease-out duration-500"}>
        Dev.
      </h1>
      <span class={"absolute mx-auto py-4 flex border w-fit bg-gradient-to-r blur-3xl " + (colour3) + " bg-clip-text text-6xl box-content font-extrabold text-transparent text-center select-none transition-colors ease-out duration-500"}>
        Build.
      </span>
      <h1
        class={"relative top-0 w-fit h-auto py-4 justify-center flex bg-gradient-to-r items-center " + (colour3) + " bg-clip-text text-6xl font-extrabold text-transparent text-center select-auto transition-colors ease-out duration-500"}>
        Build.
      </h1>
    </div>
  )

I have tried using transition-colors ease-out duration-500, but it doesn’t make the transition smooth. How can I achieve smooth colour transitions for my elements?