Rect-native Reanimated(v2) interpolate translateY - react-native

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,
},
})