Animation with styled-components in react

Question

I want to run the animation in the last ten seconds of a timer.First, I tried with keyframes and it was how I wanted but this time if I do not refresh the page animation did not work. I commented it and tried another way which is below:

useEffect(() => {
if (time <= 30 && disabled === false && time !== 0) {
  setTimeout(() => setTime(time - 1), 1000);
} else if (disabled) {
  setTime(30);
  setAnimated(null);
} else if (time === 0) {
  setDisabled(!disabled);
  setInputValue("Time is over");
}
if (time <= 10 && animated !== null && disabled === false && time !== 0) {
  setAnimated("animation 1s infinite");
}
}, [time, disabled]);

Countdown component:

const CountDown = () => {
const { time, animated } = useContext(WordContext);
return (
<Time>
  <Counting style={{ animation: animated !== null ? animated : "" }}>
    00:00:{time}
  </Counting>
</Time>
  );
};

Css:

export const Counting = styled.p`
margin: auto;
font-size: 40px;
line-height: 1;
animation: ${animation};
// animation-fill-mode: backwards;
// animation-delay: 23s;
// animation-iteration-count: 10;
`;

Do you have any suggestions or corrections?. Thanks in advance.