Syncing with reanimated 2 using useSharedValueEffect

[gorbypark]

I am attempting to sync an animated 2 shared value with skia. This is my attempt so far. The animated 2 animation (non-skia) works perfectly, but the skia animation does not. If I change c={vec(progress.value, 72)} to c={vec(8 + ((width - 40) / 4) * selectedTabIndex, 72)} it works (albeit without any animation) so I believe my positioning calculations are correct, it's just not animating as I expect it to.

const BottomBarSkia = () => {
  const {width} = useWindowDimensions();
  const canvasRef = useRef();
  const progress = useSharedValue(0);

  const [selectedTabIndex, setSelectedTabIndex] = useState(0);

  useDerivedValue(() => {
    progress.value = withTiming(8 + ((width - 40) / 4) * selectedTabIndex, {
      duration: 1000,
      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
    });
  }, [selectedTabIndex]);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      left: progress.value,
    };
  });

  useSharedValueEffect(canvasRef, progress);

  const TabItem = ({id, iconName, size = 30}) => {
    return (
      <Pressable onPress={() => setSelectedTabIndex(id)} hitSlop={25}>
        <Icon
          name={iconName}
          size={size}
          color={
            id === selectedTabIndex ? 'rgb(108, 228, 186)' : 'rgb(54,100,83)'
          }
        />
      </Pressable>
    );
  };

  return (
    <>
      <Canvas
        ref={canvasRef}
        style={{position: 'absolute', left: 20, width: width - 40, height: 72}}>
        <Paint style="stroke" strokeWidth={2}>
          <RadialGradient
            c={vec(progress.value, 72)}
            r={128}
            colors={['rgb(108,228,186)', 'rgb(54,100,83)']}
          />
        </Paint>
        <RoundedRect rx={20} x={0} y={0} width={width - 40} height={72} />
      </Canvas>
      <View
        style={{
          flex: 1,
          borderRadius: RADIUS,
          overflow: 'hidden',
          margin: 1,
        }}>
        <Animated.View
          style={[
            {
              position: 'absolute',
              bottom: 0,
              backgroundColor: 'rgb(108,228,186)',
              // calculate the width of the bar to glow
              // width minus 40 (20 padding each side)
              // divided by number of tabs
              // minus 15 which is our offset from the left edge
              width: (width - 40) / 4 - 15,
              height: 12,
              borderTopLeftRadius: 15,
              borderTopRightRadius: 15,
            },
            animatedStyle,
          ]}
        />
        <BlurView
          blurType={'dark'}
          blurAmount={50}
          reducedTransparencyFallbackColor="rgba(37,42,54,.25)"
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-around',
            alignItems: 'center',
          }}>
          <TabItem id={0} iconName="ios-bar-chart-outline" />
          <TabItem id={1} iconName="ios-card-outline" />
          <TabItem id={2} iconName="ios-notifications-outline" />
          <TabItem id={3} iconName="ios-apps-outline" />
        </BlurView>
      </View>
    </>
  );
};