有一个错误的地方，但我找不到什么或在哪里。它曾经工作过，但我不知道发生了什么，为什么它不再工作了，因为现在没有任何东西出现在我的屏幕上。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.loop = undefined;
    this.state = {
      breakCount: 5,
      sessionCount: 25,
      clockCount: 25 * 60,
      currentTimer: "Session",
      isPlaying: false,
      loop: undefined
    }
  }
  
 handlePlayPause() {
   const {isPlaying} = this.state;
   
   if (isPlaying){
      clearInterval(this.loop);
   } else {
     this.loop = setInterval(() => {}, 1000);
   }
 }

  componentWillUnmount() {
  clearInterval(this.loop);
  }
  
  convertToTime(count) {
    const minutes = Math.floor(count / 60);
    let seconds = count % 60;
    
    seconds = seconds < 10 ? ('0'+seconds) : seconds;
    
    return `${minutes}:${seconds}`;
  }
  
  render() {
    const {
      breakCount, 
      sessionCount, 
      clockCount, 
      currentTimer
    } = this.state;
     
    const breakProps = {
      title: 'Break Length',
      count: breakCount,
      handleDecrease: this.handleBreakDecrease,
      handleIncrease: this.handleBreakIncrease,
    };
    
    const sessionProps = {
      title: 'Session Length',
      count: sessionCount,
      handleDecrease: this.handleSessionDecrease,
      handleIncrease: this.handleSessionIncrease,
    };
    
    return (
  <div>
    <div className="flex">
      <SetTimer {...breakProps} />
      <SetTimer {...sessionProps} />
    </div>

    <div className="clock-container">
      <h1>{currentTimer}</h1>
      <span>{this.convertToTime(clockCount)}</span>
      <div className="flex">
        <button onClick={this.handlePlayPause}>
          <i className={`fas fa-${isPlaying ? 'pause' : 'play'}`} />
        </button>
        <button onClick={this.handleReset}>
          <i className="fas fa-sync" />
        </button>
      </div>
    </div>
  </div>
  );
}
  
const SetTimer = (props) => (
  <div className="timer-container">
    <h1>{props.title}</h1>
    
      <div className="flex actions-wrapper">
      <button onClick={props.handleDecrease}>
        <i className="fas fa-minus" />            
        </button>
      <span>{props.count}</span>
      <button onClick={props.handleIncrease}>
        <i className="fas fa-plus" /> 
      </button>
      
     </div>
</div>)

ReactDOM.render(<App/>, document.getElementById('app'));

CSS：

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

*{
  box-size: border-box;
}

body{
  
  background-color: #006266;
  color: white;
  font-family: 'Rubik', sans-serif;
  display:flex;
  min-height: 100vh;
  align-items: center;
  justify-content:center;
  text-align: center;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

.timer-container {
  margin: 20px ;
}
.timer-container h2{
  margin: 0;
}

.actions-wrapper button {
  cursor: pointer;
  background-color:transparent;
  padding: 15px;
  margin: 20px;
  color: white;
  font-size: 20px;
}

.actions-wrapper span {
  font-size: 40px;
  margin: 0 10px;
}

.clock-container {
  display: inline-block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 10px solid #fff;
  border-radius: 30px ;
  padding: 10px 50px;
}

.clock-container span{
  font-size: 50px;
}

.clock-container h1{
  margin: 0;
}

.clock-container button{
  cursor: pointer;
  background-color:transparent;
  padding: 15px;
  margin: 20px;
  color: white;
  font-size: 20px;
}

我回头看了看视频[https：//www.youtube.com/watch？v=5rz6XbrCqt0&t=1877s]的Florin Pop的25+5时钟几次，但仍然没有看到错误在哪里。ChatGPT和几个在线JS验证器也没有帮助。