Animated value never changes

When running this code:

    const fillPercent = new Animated.Value(0.0);
    const fillAnim = () => {
        Animated.timing(fillPercent,{
          toValue: progressPercentage,
          duration: 800,
          easing: EasingNode.inOut(EasingNode.cubic),
        }).start();
      };
    useEffect(() => {
        fillAnim();
      }, [progressPercentage]);

I can see that fillAnim is called and progressPercentage is whatever I set it to, i.e. 0.4.

However, using a setTimeout of 500ms and 1000ms I can see that fillPercent never changes value and the animated shape never changes (it does if I use a hardcoded value).

Is anyone able to help out on this, it's inside of a functional component like the following and progressPercentage is a const taken from props.progressPercentage:

import React, { useEffect, useRef, useState } from "react";
import Animated, { Easing, EasingNode } from "react-native-reanimated";
import GradientPath from 'react-native-svg-path-gradient';
const AnimatedGradientPath = Animated.createAnimatedComponent<GradientPath>(GradientPath);

export default function ProgressCircle(props: ProgressCircleProps) {

Sorry, I've been stuck on this for a while so any help is much appreciated.

​

EDIT: there's no flair for solved but see coocooru's answer for the solution that worked for me