RN Animated to RN Reanimated

[jdarshan5]

I am working with Material Top Tab navigator from React navigation where I am creating a Custom Tab bar which give me RN's Animated value as a prop called position and I want to convert this Animated value to reanimated's shared value which I am doing it like this,

 useEffect(() => {
    const id = position.addListener(({value}) => {
      console.log(value);
      runOnUI((_value: number) => (animatedPosition.value = _value))(value);
    });
    return () => {
      position.removeListener(id);
    };
  }, [animatedPosition, position]);

and the value does update when I don't comment the bgColor which I get from the interpolation of the Animated's position from below code but it does not update when I comment it out

//interpolation
const bgColor = position.interpolate({
  inputRange: [0, 1, 2, 3],
  outputRange: ['red', 'blue', 'green', 'purple'],
});

//component
<RNAnimated.View
  style={[
    {
      width: 20,
      aspectRatio: 1,
      position: 'absolute',
      // backgroundColor: 'red',
      // backgroundColor: bgColor,
    },
  ]}>
    <Animated.View style={[{flex: 1}, rAnimatedStyle]} />
</RNAnimated.View>

What I am trying to achieve is that I want to convert this Animated value to shared value for simplicity as I find animations easy with Reanimated, thank you for your help in advance 😁