React native animation for object moving along circular motion without changing its direction

Question

I want an animation for an image in react native where it moves in a circular path without changing its direction.

Well i achieved the circular motion effect but it doesnt stay upright but changes it direction with respect to the motion. please help me with it. im trying to achieve an animation for hang rolling a ball. here is the code.

    
const { width, height } = Dimensions.get("window");
const radius = 15; // Radius of the circular path

const CircleAnimation = () => {
  const angle = useRef(new Animated.Value(0)).current;

  const calculatePosition = (angle) => {
    const x = width / 2 + radius * Math.cos(angle);
    const y = height / 2 + radius * Math.sin(angle);
    return { x, y };
  };

  const startAnimation = () => {
    Animated.loop(
      Animated.timing(angle, {
        toValue: 2 * Math.PI,
        duration: 5000, // Duration for one complete circle
        useNativeDriver: true,
      }),
    ).start();
  };

  const interpolatedRotateAnimation = angle.interpolate({
    inputRange: [0, 2 * Math.PI],
    outputRange: ["0deg", "2160deg"],
  });

  const handlePress = () => {
    startAnimation();
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handlePress}>
        <Animated.View
          style={[
            styles.circle,
            {
              transform: [
                { translateX: radius },
                { translateY: radius },
                { rotate: interpolatedRotateAnimation },
                { translateX: -radius },
                { translateY: -radius },
              ],
            },
          ]}
        >
          <Image
            source={require("./assets/images/handtest.png")}
            style={styles.image}
          />
        </Animated.View>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  circle: {
    position: "absolute",
  },
  image: {
    width: 50,
    height: 50,
  },
});

export default CircleAnimation;