React Native Reanimated interpolateColor issue

I have a simple animated circular progress using react-native-svg and react-native-reanimated.

This is the AnimatedCircle

<Svg height={"90%"} width={"90%"} viewBox="0 0 100 100">
    <AnimatedCircle
        animatedProps={animatedCircleProps}
        cx="50"
        cy="50"
        r="45"
        stroke="rgb(247, 30, 43)"
        strokeWidth="10"
        strokeDasharray={`${radius * Math.PI * 2}`}
        strokeLinecap="round"
    />
</Svg>

This is the animatedCircleProps used in the animatedProps

const animatedCircleProps = useAnimatedProps(() => {
    const interpolatedColor = interpolateColor(
        percentage.value,
        [0, 50, 100],
        [
            "rgb(247, 30, 43)",
            "rgb(255, 248, 48)",
            "rgb(32, 250, 45)",
        ],
    );

    return {
        stroke: interpolatedColor,
        strokeDashoffset: (1 - percentage.value / 100) * circumference,
    };
});

Using the value provided by interpolateColor always gives this error:

 ERROR  ReanimatedError: Exception in HostFunction: java.lang.ClassCastException: java.lang.String cannot be cast to com.facebook.react.bridge.ReadableMap, js engine: reanimated

Is there something I’m missing? Isn’t the value over here also a string? stroke="rgb(247, 30, 43)"

Why doesn’t it work with the animatedCircleProps?