React displays old text when a opacity animation is applied

This works, when state of playing turns from false to true, the text turns red and says: Spaceships flying.

import styles from './index.module.scss'
const { play, pause, playing } = useSpace()
<span
style={{ color: playing === true ? 'red' : 'blue' }}
className={italic whitespace-nowrap ml-4}
>
{playing === true ? 'Spaceships flying...' : 'Play again:'}
</span>

The below does not, the opacity animation works, but the text says Play again, with Spaceships flying... text fading in and out over the top of the Play again text. I figure it has something to do with the animation? Is there a way to make this work? I should note, that it looks fine in Firefox, but Safari has the display issue.

CSS

.--effect-throb {
    animation: throb 1s ease-in-out infinite;
}
@keyframes throb {
0% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}

TSX

import styles from './index.module.scss'
const { play, pause, playing } = useSpace()
<span className={italic whitespace-nowrap ml-4 ${playing === true ? styles['--effect-throb'] : ''}}>
{playing === true ? 'Spaceships flying...' : 'Play again:'}
</span>