how to implement a react countdown using a single useState hook?

i am trying to make a countdown in the format 00:00.
i am able to implement it with using two useState , however i want to make it using a single useState

const [counter, setCounter] = React.useState([12, 0]);

React.useEffect(() => {
  const timer =
    counter > 0 &&
    setInterval(() => {
      setCounter([counter[0] - 1,Math.floor((counter[1] % 3600) / 60)]);
    }, 1000);
  return () => clearInterval(timer);
}, [counter]);

Answer

You should store your counter just as seconds/minutes. When you render it you can convert it to, for example, MM:SS format using something like this:

function secondsToMMSS(seconds) {
    var m = Math.floor(seconds / 60);
    var s = seconds % 60;

    return (m < 10 ? '0' : '') + m + ":" + ('0' + s).slice(-2);
}