'how to fix increments fn timer app in react

hello dev's iam tring to build timer pomodoro react app my problem is when i start call function that increments timer with setInterval its returns 0 and 1 and repeat 0 and 1 No more than 0 and 1

my code is :

import React, { useRef, useState } from "react";
import Timer from "./Timer";
import styles from "../css/pomodoro.module.css";

const Pomodoro = () => {
  const [start, setStart] = useState(false);
  const [intervalRef, setIntervalRef] = useState(0);
  const [cycles, setCycles] = useState(0);
  const [seconds, setSeconds] = useState(0);
  const [minutes, setMinutes] = useState(0);

  const startTimer = () => {
    return setInterval(() => {
      seconds <= 59 ? setSeconds(seconds + 1) : setSeconds(0);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(intervalRef);
  };

  function handleStartPomodoro() {
    setStart(!start);
    if (start === false) {
      setIntervalRef(startTimer());
      startTimer();
      console.log("start");
    }
    if (start === true) {
      stopTimer();
      console.log("stop");
    }
  }

  return (
    <div className={styles["app-wrapper"]}>
      <Timer seconds={seconds} minutes={minutes} />
      <div className={styles["buttons-wrapper"]}>
        <button type="button" onClick={() => handleStartPomodoro()}>
          Start
        </button>
        <button type="button"> reset</button>
      </div>
    </div>
  );
};

export default Pomodoro;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source