Animating linear gradient react native reanimated and skia

Can someone point out to me why my animation is not running? I am trying to animate between two colors in a gradient.

I tried to start the transition from a button click as well but nothing happens.

I have a snack here

Versions: "react-native-skia: 1.7.6",

"react-native-reanimated: 3.16.0",

export default function App() {
  const startColor = useSharedValue('rgb(255, 219, 128)');
  const endColor = useSharedValue('rgb(218, 78, 90)');
  const colors = useDerivedValue(() => {
    return [startColor.value, endColor.value];
  });
  const duration = 1000;
  const easing = Easing.bezier(0.25, -0.5, 0.25, 1);

  useEffect(() => {
    startColor.value = withRepeat(
      withTiming('rgb(218, 78, 90)', { duration, easing }),
      -1,
      true
    );
    endColor.value = withRepeat(
      withTiming('rgb(255, 219, 128)', { duration, easing }),
      -1,
      true
    );
  }, []);

  return (
    <View style={{flex: 1}}>
    <Canvas
      style={{
        flex: .6,
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <Rect x={50} y={150} width={300} height={300}>
        <LinearGradient
          start={vec(0, 0)}
          end={vec(300, 0)}
          colors={colors.value}
        />
      </Rect>
    </Canvas>
    </View>
  );
}