Best Way To Determine When To Use Break or Work Session

Good morning,

Here is the code:

import React, { useState, useEffect } from "react";

export default function Pomodoro() {
  const [sessionMinutes, setsessionMinutes] = useState(25);
  const [sessionSeconds, setSessionSeconds] = useState(0);

  const [breakMinutes, setBreakMinutes] = useState(5)
  const [breakSeconds,  setBreakSeconds] = useState(0)
  const [breakStarts, setBreakStarts] = useState(false);

  useEffect(() => {
    let interval = setInterval(() => {
      clearInterval(interval);

      if (seconds === 0) { //sessionSeconds / breakSeconds
        if (minutes !== 0) { //sessionMinutes / breakMinutes
          setSeconds(59); // setSessionSeconds / setBreakSeconds 
          setMinutes(minutes - 1); //setSessionMinutes / setBreakMinutes
        } else {
          let minutes = displayMessage ? minutes - 1 : breakMinutes - 1;
          let seconds = 59;

          setSeconds(seconds); // setSessionSeconds / setBreakSeconds 
          setMinutes(minutes); //setSessionMinutes / setBreakMinutes
          setDisplayMessage(!displayMessage);
        }
      } else {
        setSeconds(seconds - 1); // setSessionSeconds / setBreakSeconds 
      }
    }, 1000);
  }, [seconds]);

  const cleanMinutes = minutes < 10 ? `0${minutes}` : minutes;
  const cleanSeconds = seconds < 10 ? `0${seconds}` : seconds;

  return (
    <div>

        {displayMessage && <div>Next session starts in:</div>}
      <div className="timer">
        {cleanMinutes}:{cleanSeconds}
        <button onClick={() => setsessionMinutes(sessionMinutes + 1)}></button>
        <button onClick={() => setsessionMinutes(sessionMinutes - 1)}></button>

        <button onClick={() => setBreakMinutes(breakMinutes + 1)}></button>
        <button onClick={() => setBreakMinutes(breakMinutes - 1)}></button>
    </div>
    </div>
  );
}

I’m curious what the best course of action is to take when it comes to telling the program when show the session minutes or break minutes. I though of maybe using an if statement like this:

  useEffect(() => {
    let interval = setInterval(() => {
      clearInterval(interval);
  if (!breakStarts) {// a session is ongoing
      if (sessionSeconds === 0) { 
        if (sessionMinutes !== 0) { 
          setSessionSeconds(59); 
          setSessionMinutes(minutes - 1); 
        }
      } else {
        setSessionSeconds(seconds - 1); 
      }
  } else if (breakStarts) { //a break starts
          if (breakSeconds === 0) { 
        if (breakMinutes !== 0) { 
          setBreakSeconds(59); 
          setBreakMinutes(minutes - 1); 
        }
      } else {
        setBreakSeconds(seconds - 1); 
      }
    
  }//a break is ongoing
    }, 1000);
  }, [seconds]);


But this feels too messy, is there a better way?

if you have multiple conditions that need to be true you can use &&

Example: (breakSeconds === 0 && breakMinutes !== 0)
Both need to return true otherwise it is false