Циклическая анимация в «React Native Reanimated 2» синхронизируется через некоторое время

Question

Я использовал реанимированную версию 2 для создания анимации для приложения. Я создавал заставку (загрузку) с тремя точками, которые прыгают вверх и вниз. Предполагается, что между тремя точками будет определенная постоянная задержка ( интервал ). Как анимация, когда другой человек печатает в мессенджере facebook.

Вначале анимация выглядит нормально, но через некоторое время 2 или даже 3 точки в зависимости от задержек и продолжительности синхронизируются , и у меня остаются 2 или 3 точки, абсолютно синхронизированные друг с другом. Вот видео с проблемой анимационного видео

Я очень новичок в реактивном и реанимированном. Итак, я предполагаю, что проблема в моем коде. Я понятия не имею, правильный ли это способ сделать это. Примеры кода, которые я вижу в реанимированной версии 1, содержат функции startClock и пользовательские функции runTiming, но я не смог найти их в документации для версии 2. реанимированные документы

      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;

Может ли кто-нибудь сказать мне, почему анимации в конечном итоге синхронизируются и как правильно анимировать три элемента с одной и той же анимацией, но с некоторой постоянной задержкой . Спасибо.