React Native: Animation plays only on first render - reactjs

Question

I am making an animation. There is a boxes array, that will contain seven boxes of info to render. Each box will appear at different times. Now the problem is that when the first box is being displayed, the animation plays as expected, but never runs again and all upcoming boxes is being displayed without animation. Where could be the problem? Here is my current code:
interface Styles {
wrap: ViewStyle;
front: ViewStyle;
back: ViewStyle;
}
const styles: Styles = {
wrap: {
position: 'relative',
},
front: {
width: '100%',
height: '100%',
position: 'absolute',
},
back: {
width: '100%',
height: '100%',
backfaceVisibility: 'hidden',
},
};
type Props = {
boxes: Box;
}
export const Component: React.FC<Props> = ({ boxes }) => {
const animation = useRef(new Animated.Value(0));
useEffect(() => {
const anim = Animated.timing(animation.current, {
toValue: 180,
duration: 2000,
useNativeDriver: false,
});
if (anim) {
anim.start();
}
return () => {
anim.stop();
};
}, [ animation ]);
return (
<View>
{boxes.map((box) => (
<View key={box}>
<View style={styles.wrap}>
<Animated.View
style={[ styles.front, {
transform: [ { rotateY: animation.current.interpolate({
inputRange: [ 0, 180 ],
outputRange: [ '180deg', '360deg' ],
}) } ],
}]}
>
<FrontBox box={box} />
</Animated.View>
<Animated.View
style={[ styles.back, {
transform: [ { rotateY: animation.current.interpolate({
inputRange: [ 0, 180 ],
outputRange: [ '360deg', '180deg' ],
}) } ],
}]}
>
<BackBox />
</Animated.View>
</View>
</View>
))}
</View>
);
};