Rotation Animation Issue in React Native SVG Pie Chart After Reloading App

Question

I am working on a dynamic pie chart using react-native-svg where the stroke width varies based on the data value. The chart includes two animations: stroke width and rotation. While both animations initially work as expected, the rotation animation behaves incorrectly after reloading the app. Instead of rotating around the circle's center, it starts rotating around the top-left corner of the SVG.

Before Reloading App: The chart rotates around its center.

After Reloading App: The rotation axis changes, causing the chart to rotate around the top-left corner.

I tried adjusting the viewBox dimensions and the center axis of rotation, but these didn't resolve the issue. Here's the relevant part of my StyledPieChart.tsx:

// Imports ...

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const ChartSegment: FC<{
  // Chart props
}> = ({
  // Chart Props
}) => {
    const animatedProps = useAnimatedProps(() => {
    const strokeDashoffset = interpolate(
      progress.value,
      [0, 1],
      [circumference, circumference * percent]
    );
    const deg = interpolate(progress.value, [0, 1], [0, angle]);
    return {
      transform: [
        { translateX: center },
        { translateY: center },
        { rotate: `${deg}deg` },
        { translateX: -center },
        { translateY: -center },
      ],
      strokeDashoffset,
    };
  });
  return (
      <AnimatedCircle
        originX={center}
        originY={center}
        cx={center}
        cy={center}
        r={radius}
        strokeWidth={strokeWidth}
        stroke={colorMapHEX(value)}
        strokeDasharray={circumference}
        fill="transparent"
        animatedProps={animatedProps}
        // rotation={angle}
      />
  );
};

export default function StyledPieChart({
  // Props
}) => {
  // Component logic ...
};

StyledPieChart Implementation:

<SafeAreaView className="mx-auto w-[400px] my-32 items-center">
  <View className="items-center justify-center flex-1 h-96 w-96">
    <StyledPieChart data={data.questions} />
  </View>
  // Other components
</SafeAreaView>