How to start/stop React Native Moti animation on state change? My way seems to break the animation for some reason

Question

I am trying the following Moti animation which works fine until I add the playbackState === State.Playing. Once I add it, it only loops once and then gets stuck/stops repeating. I'm wondering if anyone has any clue why this might be happening.

{playbackState === State.Playing &&
[...Array(3).keys()].map((index) => {
    return (
        <SoundWave
            top={height * 0.365}
            from={{ opacity: 1, scale: 1 }}
            animate={{ opacity: 0, scale: 2 }}
            transition={{
                type: 'timing',
                duration: 4400,
                easing: Easing.out(Easing.ease),
                delay: index * 1400,
                repeatReverse: false,
                loop: true,
            }}
            key={index}
        />
    );
})}