Usestate not updating the state when trying to set state

So I've been trying to build a timer app. When the user clicks on the button, it should update the state so that the countdown function gets triggered. So far it's not working but i notice that when i manually change the state, it works. Please i need help with this

enter image description here

 Countdown component:
 

    import React, { useState, useEffect, useRef } from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    
    
    export const Countdown = ({ minutes = 20, isPaused }) => {
      const interval = useRef(null);
    
     function Minutetomilli(min) {
        return min * 1000 * 60;
      }
    
      const [milli, setMilli] = useState(Minutetomilli(minutes));
      
      function FormatTime(time) {
        return time < 10 ? `0${time}` : time;
      }
      const countdown = () => {
        setMilli((time) => {
          if (time === 0) {
            return time;
          } else {
            const timeleft = time - 1000; 
         
            return timeleft;
          }
        });
      };
    
         useEffect(() => {
        if (isPaused) {
          return;
        } else{
          interval.current = setInterval(countdown, 1000);
          return () => clearInterval(interval.current);
        } 
      }, [isPaused]);
      const minute = Math.floor(milli / 60000) % 60; 
      const seconds = (milli / 1000) % 60; 
    
      return (
        <Text style={Styles.text}>
          {FormatTime(minute)} : {FormatTime(seconds)}
        </Text>
      );
    };
    
    
    const Styles = StyleSheet.create({
      text: {
        fontSize: 70,
        fontWeight: 'bold',
        color: 'white',
        padding: 20,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
      },
    });