Animated props do not work on images

[maidul98]

When i updated the shared value holding an URI to an image, the update doesn't change the image.

  const sharedHeaderSize = useSharedValue(185); 
  const img = useSharedValue("https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"); 

  const props = useAnimatedProps(()=>{
    return {
      source: {uri: img.value}
    }
  }, [img])

  return (
    <View style={{marginTop: 100}}>
      <TouchableOpacity onPress={() => img.value = "https://www.pngkit.com/png/full/119-1198978_mono-sound-wave-waveform-track.png"}><Text>Click here</Text></TouchableOpacity>
      <Animated.Image animatedProps={props} style={{height: 120, width: "100%"}}/>
    </View>
  );

When you click the text, it updates the shared value but the prop doesn't update so the image stays the same
Here is a working demo: https://snack.expo.dev/@maidul98/reanimated-2