react-native: how to add animation to progress bar using reanimated library

Question

I tried to create a progress bar in react-native and I want to add animation to it to look relatively smooth.

the problem is the value of the progress bar changed based on the parent and I don't know how to integrate reanimated library with it

progress bar component:

import { FC, ReactElement, useEffect, useState } from "react";
import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";

type Props = {
  maxValue: number;
  currentValue: number;
  barStyle?: StyleProp<ViewStyle>;
  color?: StyleProp<ViewStyle>;
};

const ProgressBar: FC<Props> = ({
  maxValue,
  currentValue,
  barStyle,
  color,
}: Props): ReactElement => {
  const [value, setValue] = useState<number>(0);

  useEffect(() => {
    const convirtToPercentage = () => {
      setValue(currentValue * (100 / maxValue));
    };

    convirtToPercentage();
  });

  return (
    <View style={[styles.container, barStyle]}>
      <View
        style={[
          {
            width: `${value}%`,
            height: "100%",
            backgroundColor: "red",
            position: "absolute",
            right: 0,
          },
          color,
        ]}
      ></View>
    </View>
  );
};

export default ProgressBar;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 15,
  },
});