"Attempting to assign to readonly property" when using color interpolation

[mrousavy]

My animated color hook:

export function useAnimatedColor(
  color: Reanimated.SharedValue<string>,
): Readonly<Reanimated.SharedValue<string | number>> {
  const animation = useSharedValue(0);
  const colorFrom = useSharedValue(DEFAULT_COLOR);
  const colorTo = useSharedValue(color.value);

  useAnimatedReaction(
    () => color.value,
    (newColor, prevColor) => {
      animation.value = 0;
      colorFrom.value = prevColor ?? DEFAULT_COLOR;
      colorTo.value = newColor;
      animation.value = withTiming(1, {
        duration: 150,
        easing: Easing.linear,
      });
      console.log(`Animating from ${prevColor} -> ${newColor}`);
    },
  );

  // TODO: Using colorFrom and colorTo in here raises "Attempting to assign to readonly property" error...
  return useDerivedValue(() =>
    interpolateColor(animation.value, [0, 1], [colorFrom.value, colorTo.value]),
  );
}

is causing this error:

See https://github.com/software-mansion/react-native-reanimated/issues/2329 for more details.

Right now, I've hotfixed this by using a custom patch for react-native-reanimated that completely removes the RGB cache. This now runs correctly, but ideally I want to fix this and make use of the cache for performance reasons.