I'm getting maximum update depth exceeded error when i try to start countdown in my React Native app. Initially when i pass a stringed date to the "expirydate" variable, it works fine, and my countdown timer works fine. However, I'm building the app so that it fetches a delivery date and time from firebase and I need to use that to pass that to the "expirydate" variable, so the driver can be in sync with the delivery countdown. When I pass the fetched date, that's when i get the error.

Here's the code when I pass a normal stringed date 👇

const start_timer = () => {
setTimerStarted(true);
var date = moment().format("YYYY-MM-DD hh:mm:ss");
//Getting the current date-time with required formate and UTC

var expirydate =
  '2021-12-04 08:40:45';
//Let suppose we have to show the countdown for above date-time

var diffr = moment.duration(moment(expirydate).diff(moment(date)));
//difference of the expiry date-time given and current date-time
var hours = parseInt(diffr.asHours());
var minutes = parseInt(diffr.minutes());
var seconds = parseInt(diffr.seconds());
var d = hours * 60 * 60 + minutes * 60 + seconds;
//converting in seconds
setTotalDuration(d);
//Settign up the duration of countdown in seconds to re-render

};

And here's my code when i pass the fetched date 👇

const start_timer = () => {
setTimerStarted(true);
var date = moment().format("YYYY-MM-DD hh:mm:ss");
//Getting the current date-time with required formate and UTC

var expirydate = details.date;
//Let suppose we have to show the countdown for above date-time

var diffr = moment.duration(moment(expirydate).diff(moment(date)));
//difference of the expiry date-time given and current date-time
var hours = parseInt(diffr.asHours());
var minutes = parseInt(diffr.minutes());
var seconds = parseInt(diffr.seconds());
var d = hours * 60 * 60 + minutes * 60 + seconds;
//converting in seconds
setTotalDuration(d);
//Settign up the duration of countdown in seconds to re-render

};

And here's how I'm starting the timer 👇

<TouchableOpacity onPress={() => start_timer()}>
        <>
          <LottieView
            style={{ alignSelf: "center", height: 40 }}
            source={require("../../../assets/animations/timer.json")}
            autoPlay={true}
            speed={2}
            loop={true}
          />
          <Text style={{ color: "rgb(124, 90, 15)" }}>Start Timer</Text>
        </>
      </TouchableOpacity>

My gut tells me that it's probably an issue with moment🤔.. I just am not sure.

Just to be sure, when I console.log(details.date), it returns this format of date "December 4th, 2021 19:25PM"... That's why I don't think it's an issue with fetched date, or I'm not sure. Any help please?