React native animation progress bar

I am trying to build a progress bar for my react-native projectIt should be a generic component to be used in many places.Please see my code:

The progress bar tsx:

import React, { useEffect } from 'react'import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'interface Props {  total: number  progress: number  color?: string  backgroundColor?: string  height?: number  style?: StyleProp<ViewStyle>  animDelay?: number  animDuration?: number  testID?: string}const ProgressBar = ({  color,  backgroundColor,  style,  height,  animDelay,  animDuration,  total,  progress,  testID = 'progress-bar',}: Props): JSX.Element => {  const minWidthValue = 5.4  const percentage = total && progress ? Math.min(progress, total) / total : 0  const minDisplayWidth =    percentage > 0 && percentage < minWidthValue ? minWidthValue : percentage  const barWidth = `${Math.max(minDisplayWidth, Math.floor(percentage * 100))}%`  useEffect(() => {    const animationValue = new Animated.Value(0)    Animated.timing(animationValue, {      toValue: progress,      delay: animDelay,      duration: animDuration,      useNativeDriver: true,    }).start();  }, []);  return (<View      testID={testID}      style={[        styles.container,        height ? { height } : undefined,        backgroundColor ? { backgroundColor } : undefined,        style,      ]}><Animated.View        style={[          styles.bar,          {            backgroundColor: color,            width: barWidth,          },        ]}      /></View>  )}export default ProgressBarconst BORDER_RADIUS = 15const styles = StyleSheet.create({  bar: {    borderRadius: BORDER_RADIUS,    height: '100%',  },  container: {    borderRadius: BORDER_RADIUS,    flexDirection: 'row',    height: 30,    overflow: 'hidden',    width: '100%',  },})

And the example of usesage, say on home.tsx:

<ProgressBarWrapper total={100} progress={50} testID='test-id-test-1' />

So what happen is, the total length(100%) , and I wish the animation moving from 0 to 50 in the bar at beginning when this component loaded up

With above code, I only get a static bar , not moving at all..Could someone point me out where I have done wrong?Sample code would be very helpfulCheers