React Native Circle Countdown Timer Not Working Properly

Question

So I have made this screen

 const [progress, setProgress] = useState(-1);

const [wwh, setWwh] = useState(30);
  const [time, setTime] = useState(interpolate(10));
  const [playing, setPlaying] = useState(false);
  const [seconds, setSeconds] = useState(90);
  const [totalSeconds, setTotalSeconds] = useState(30);
  useEffect(() => {
    
    if (progress < wwh && progress > -1 && playing) {
   
      const timer = setTimeout(() => {
        setProgress(progress + 1);
      }, 1000);
   
      return () => clearTimeout(timer);
    }
  }, [progress, playing]);

  const startTimer = () => {
    if (progress < 0) {
      setProgress(0);
    }
  };

So I am creating a progress state which I will switch to 0 whenever I start the timer, hence the slider will start moving whenever the timer is turned on.

 return (
    <ImageBackground
      source={require('../../assets/purp.png')}
      style={styles.container}>
      <StatusBar translucent backgroundColor="transparent" />
      <TouchableOpacity
        style={styles.countdownContainer}
        onPress={() => {
          setPlaying(!playing);
          startTimer();
        }}>
        <CountdownCircleTimer
          isPlaying={playing}
          strokeWidth={1}
          duration={totalSeconds}
          colors={'rgba(255, 255, 255, 0.63)'}
          colorsTime={[7, 5, 2, 0]}>
          {({remainingTime}) => {
            const minutes = Math.floor(remainingTime / 60);
            const seconds = remainingTime % 60;
            setSeconds(remainingTime);
            //console.log(remainingTime);
            return (
              <Text style={{color: '#fff'}}>
                {minutes} : {seconds}
              </Text>
            );
          }}
        </CountdownCircleTimer>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setPlaying(!playing)}>
        {!playing && (
          <Icon name="play" size={20} color="#FFF" style={{marginTop: 80}} />
        )}
        {playing && (
          <Icon name="pause" size={20} color="#FFF" style={{marginTop: 80}} />
        )}
      </TouchableOpacity>
      <Slider
        style={{width: 300, height: 40, marginTop: 26}}
        value={progress}
        minimumValue={0}
        maximumValue={wwh}
        minimumTrackTintColor="#FFFFFF"
        maximumTrackTintColor="#FFFFFF"
        onValueChange={value => {
          setProgress(value);
          console.log(totalSeconds);
          setTotalSeconds(wwh - value);
        }}
        //onSlidingComplete={value => setTotalSeconds()}
        thumbTintColor="#fff"
      />
    </ImageBackground>
  );

So, here I am just displaying the Countdown timer and whenever the slider value is changed i.e. whenever the user drags the slider with the thumb, the duration changes to wwh - progress which is basically the initial amount of seconds - progress, since progress moves by 1 unit for every 1 second for the whole duration. This works fine if the timer has not been started. If the timer has been started, then the remaining time changes and if you change the duration, the remaining time goes to 0 or some value like 1,2,3 or 4 even though it should be wwh - progress. So, I guess the remaining time does not get updated even though the duration changes. Is there any other implementation of this timer and slider I can approach or what should I change in this code to make it work? Feel free to run this code and test it.