show only minutes in react using react-countdown-circle-timer

I want to create a test page in react with a countdown timer (50 minutes) for that I used the react-countdown-circle-timer module. The problem's the minutes don't change. I want to show only the remaining minutes in the app.

import React from "react";
import { CountdownCircleTimer } from "react-countdown-circle-timer";

import "./styles.css";

export default function App() {
  const minuteSeconds = 60;
  const hourSeconds = 3000;
  const renderTime = (dimension, time) => {
    return (
      <div className="time-wrapper">
        <div className="time">{time}</div>
        <div>{dimension}</div>
      </div>
    );
  };

  const getTimeMinutes = (time) => {
    return ((time % hourSeconds) / minuteSeconds) | 0;
  };

  const timerProps = {
    isPlaying: true,
    size: 120,
    strokeWidth: 6
  };

  return (
    <div className="App">
      <CountdownCircleTimer
        {...timerProps}
        isPlaying
        initialRemainingTime={hourSeconds}
        duration={hourSeconds}
        colors={[["#3f51b5"]]}
        onComplete={() => console.log("times up")}
      >
        {({ elapsedTime }) => {
          //console.log(hourSeconds - elapsedTime / 1000);
          return renderTime(
            "minute",
            getTimeMinutes(hourSeconds - elapsedTime / 1000)
          );
        }}
      </CountdownCircleTimer>
    </div>
  );
}

I added a code sandbox link for the app example. https://codesandbox.io/s/cool-sea-7bh6h?file=/src/App.js:0-1131 how to fix the problem?

Solution

Example of 10 second timer:

Create a state for a minute and decrease it every minute.

Here is how you can do it.

import React, { useState, useEffect, useRef } from "react";
import { CountdownCircleTimer } from "react-countdown-circle-timer";

import "./styles.css";

export default function App() {
  const [minute, setMinuter] = useState(50);
  const funRef = useRef(null);
  const hourSeconds = 3000;
  const renderTime = (dimension, time) => {
    return (
      <div className="time-wrapper">
        <div className="time">{time}</div>
        <div>{dimension}</div>
      </div>
    );
  };

  useEffect(() => {
    if (minute !== 0) {
      funRef.current = setTimeout(() => {
        setMinuter(minute - 1);
      }, 60000);
    } else {
      clearTimeout(funRef.current);
    }
  });

  const timerProps = {
    isPlaying: true,
    size: 120,
    strokeWidth: 6
  };

  return (
    <div className="App">
      <CountdownCircleTimer
        {...timerProps}
        isPlaying
        initialRemainingTime={hourSeconds}
        duration={hourSeconds}
        colors={[["#3f51b5"]]}
        onComplete={() => console.log("times up")}
      >
        {({ elapsedTime }) => {
          //console.log(hourSeconds - elapsedTime / 1000);
          return renderTime("minute", minute);
        }}
      </CountdownCircleTimer>
    </div>
  );
}

Here is the working Codesandbox Link