Looping animations in "React Native Reanimated 2" sync after a while

Question

I was using the reanimated v2 for creating animations for an app. I was creating a splash (loading) screen with three dots that jump up and down. The 3 dots are supposed to have certain constant delay (interval) between them. Like the animation when the other person is typing in facebook's messenger.

The animation looks fine in the beginning but after a while the 2 dots or even 3 dots depending on the delays and duration sync up and I am left with 2 or 3 dots absolutely in sync with each other. Here is the video of the problem animation video

I am very new to react-native and reanimated. So I am assuming the problem is in my code. I have no idea if this is the correct way to do this. The code examples I see in reanimated v1 have "startClock" and custom "runTiming" functions but I couldn't find them in the docs for v2. reanimated docs

import React, { useEffect } from "react";
import { View, StyleSheet } from "react-native";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  withDelay,
} from "react-native-reanimated";
import { themeColor } from "../../assets/ThemeColor";

const Loading = () => {
  const y1 = useSharedValue(0);
  const y2 = useSharedValue(0);
  const y3 = useSharedValue(0);

  const animatedStyles1 = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: withDelay(
            0,
            withRepeat(withTiming(y1.value, { duration: 200 }), -1, true)
          ),
        },
      ],
    };
  });
  const animatedStyles2 = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: withDelay(
            100,
            withRepeat(withTiming(y2.value, { duration: 200 }), -1, true)
          ),
        },
      ],
    };
  });
  const animatedStyles3 = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: withDelay(
            200,
            withRepeat(withTiming(y3.value, { duration: 200 }), -1, true)
          ),
        },
      ],
    };
  });

  /**
   *
   *
   *
   *
   */

  useEffect(() => {
    y1.value = -10;
    y2.value = -10;
    y3.value = -10;
  }, []);

  /**
   *
   *
   *
   *
   *
   */

  return (
    <View style={styles.loadingContainer}>
      <Animated.View
        style={[styles.ballStyle, animatedStyles1]}
      ></Animated.View>
      <Animated.View
        style={[styles.ballStyle, animatedStyles2]}
      ></Animated.View>
      <Animated.View
        style={[styles.ballStyle, animatedStyles3]}
      ></Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },

  ballStyle: {
    width: 13,
    height: 13,
    backgroundColor: themeColor,
    borderRadius: 13,
    margin: 10,
  },
});

export default Loading;

Can someone please tell me why the animations sync up eventually and what is the correct way to animate three elements with the same animation but some constant delay. Thank you.