How to animate many elements React-Native Reanimated 2?

Question

I'm trying to just make 20 - 50 stars "twinkle" (opacity change with random interval), but it's slowing the app to a crawl.

I'm using reanimated 2.2.0.

I tried sharing the opacity value but only 1 element had the styles applied, which I think may be because of this: "Animated styles cannot be shared between views."

This is my entire component

function TwinklingStar({ position, size }) {
    const starOpacity = useSharedValue(1);

    useEffect(() => {
        setInterval(() => {
            starOpacity.value = withSpring(starOpacity.value ? 0 : 1)
        }, getRandomInt(500, 1000))
    }, []);

    const twinkling = useAnimatedStyle(() => ({
        opacity: starOpacity.value
    }));

    return (
        <Animated.Image 
            source={sparkleImage}
            resizeMode="cover" 
            style={[{
                width: size,
                height: size,
                position: 'absolute',
                top: position.y,
                left: position.x
            }, twinkling]} 
        />
    )
}

There are perhaps 5 of them per card, and a random amount of cards, 5-20 lets say.

I've read over the docs but don't think I'm understanding them properly cause I cant figure out why app is crawling/freezing/crashing. It's like all the animations are blocking the js thread, but they should be running on ui thread since the opacity changes are "captured" by the useAnimatedStyle hook which is a "worklet"?

Confused...