Rect-native Reanimated(v2) interpolate translateY

Question

I am trying to create an animation where the red bar will move along y-axis in an infinite & reverse animation. For some reason, I can not figure out and not able to achieve the desired behavior. Any assistance will be greatly appreciated.

import Animated, {
  useAnimatedStyle,
  useSharedValue,
  interpolate,
  withTiming,
  withRepeat,
  Extrapolate,
} from 'react-native-reanimated';

export default CustomMarker = () => {

  const bar = useSharedValue(0);
  const barStyle = useAnimatedStyle(() => {
    const yValue = interpolate(bar.value, [0, 1], [0, 225]);
    return {
      transform: [{ translateY: yValue }],
    };
  });

  useEffect(() => {
    bar.value = withRepeat(withTiming(1, { duration: 800 }), -1, true);
  });

    return (
        <View
        style={{
          backgroundColor: COLORS.darkOverlay,
          height: 540,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <View style={styles.rectangleStyle}>
            <Animated.View style={[styles.redBarStyle, barStyle]} />
          </View>
        </View>
    );
  };

const styles = Stylesheet.create({
  rectangleStyle: {
    height: 230,
    width: 400,
    alignItems: 'center',
    justifyContent: 'center',
  },
   redBarStyle: {
     position: 'absolute',
     top: 0,
     height: 10,
     width: 225,
     backgroundColor: 'red',
     borderRadius: 5,
   },
})