Condition if() it's not working in my setInterval

[dark2020light]

Hi, I need your help I’m stuck on setInterval()
I would like that each time sessionLength == 0 the loop if (sessionLength == 0) works each time but mine works only once
here is my source code or the link : https://codepen.io/shikamaru098/pen/bGYVoVr?editors=0010

import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome";
import { faPlay } from "https://cdn.skypack.dev/@fortawesome/free-solid-svg-icons@5.15.3";
import { faPause } from "https://cdn.skypack.dev/@fortawesome/free-solid-svg-icons@5.15.3";
import { faUndo } from "https://cdn.skypack.dev/@fortawesome/free-solid-svg-icons@5.15.3";

class Panel extends React.Component{
  interval;
  constructor(props){
    super(props);
    this.state = {
      sessionLength: 1,
      sessionLengthLabel: 25,
      breakLength: 5,
      second: "00",
      pause: true
    }
    this.handleClickBreak = this.handleClickBreak.bind(this);
    this.handleClickSession = this.handleClickSession.bind(this);
    this.handleClickReset = this.handleClickReset.bind(this);
    this.handleClickPlayPause = this.handleClickPlayPause.bind(this);
  }
  
  handleClickBreak(e){
    const {breakLength} = this.state;
      if(e.target.innerText == "+"){
        this.setState({
          breakLength: breakLength + 1
        });
      }
      else{
        breakLength == 1
        ? this.setState({breakLength: breakLength})
        : this.setState({breakLength: breakLength - 1})
      }
  }
  
  handleClickSession(e){
    const {sessionLength,sessionLengthLabel} = this.state;
    if(e.target.innerText == "+"){
      this.setState({
        sessionLengthLabel: sessionLengthLabel + 1,
        sessionLength: sessionLengthLabel + 1
      });
    }
    else{
      sessionLengthLabel == 1
      ? this.setState({
        sessionLengthLabel: sessionLengthLabel,
        sessionLength: sessionLengthLabel
      })
      : this.setState({
        sessionLengthLabel: sessionLengthLabel - 1,
        sessionLength: sessionLengthLabel - 1
      })
    }
  }
  
  handleClickReset(){
    this.setState({
      sessionLength: 25,
      sessionLengthLabel: 1,
      breakLength: 5,
      second: "00",
      pause: true
    });
    clearInterval(this.interval)
    
  }
  
  handleClickPlayPause(){
    let {sessionLength, pause, breakLength} = this.state;
    this.setState({
      pause: !pause
    });
    
   if(!pause){
     clearInterval(this.interval);
   }
   
   this.interval = setInterval(()=>{
     if(pause){
       if(sessionLength == 0){
             this.setState({
             sessionLength: breakLength--
          })
       }
       else{
         this.setState({
          sessionLength: sessionLength -= 1
        });
       }
     }
   },1000);  
    
     
 }
  render(){
    let {second, sessionLength, breakLength, pause, sessionLengthLabel} = this.state;
    
    return(
      <div id="container">
        <div id="container-panel">
          <div id="break-session">
            <div id="break">
              <p id="break-label">Break label</p>
              <div id="break-increment-decrement">
                <span id="break-decrement"
                  onClick={this.handleClickBreak}>
                  -
                </span>
                <span id="break-length">{breakLength}</span>
                <span id="break-increment"
                  onClick={this.handleClickBreak}>
                  +
                </span>
              </div>
            </div>
            <div id="session">
              <p id="session-label">Session label</p>
              <div id="session-increment-decrement">
                <span 
                  id="session-decrement"
                  onClick={this.handleClickSession}>
                  -
                </span>
                <span id="session-length">{sessionLengthLabel}</span>
                <span id="session-increment"
                  onClick={this.handleClickSession}>
                  +
                </span>
              </div>
            </div>
          </div>
        </div>
        <Screen
          sessionLength={sessionLength}
          second={second}
          reset={this.handleClickReset}
          playPause={this.handleClickPlayPause}
          pause={pause}
          />
      </div>
    )
  }
}

class Screen extends React.Component{
  constructor(props){
    super(props);
  }
  
  handleClickPlayPause(){
    alert("play");
  }
  
  render(){
    const {sessionLength, second} = this.props;
    console.log(this.props);
    return(
    <div id="container-screen">
        <p id="time-left"> <span className="time-left-minute">{sessionLength}</span>
          :<span className="time-left-second">{second}</span>
        </p>
        <p id="timer-label">session</p>
        <div id="icon">
          <div onClick={this.props.playPause}>
            <FontAwesomeIcon id={this.props.pause ? "start_stop" : "reset"} icon={this.props.pause ? faPlay : faPause}/>
          </div>
          <div onClick={this.props.reset}>
            <FontAwesomeIcon id="reset" icon={faUndo} />
          </div>
        </div>
    </div>
    )
  }
}


ReactDOM.render(<Panel />, document.querySelector("#root"));