Я не могу найти способ приостановить таймер обратного отсчета в React (Очистить интервал не работает)

я пытаюсь испачкать свои руки, создав часы Pomodoro. Сейчас я пытаюсь приостановить таймер, но мне трудно это делать. это конструктор в главном компоненте приложения:

 this.state ={ breakValue: 5, sessionValue: 25, time: 25*60*1000, isRunning: false } 

Теперь время тикает с этой функцией:

 countDown = (timeLeft ) ={amp}gt;{ this.setState({ time : timeLeft-1000, }) 

и я передал эту функцию через реквизиты в компонент управления:

 countDown={this.countDown} 

В компоненте Controls я обработал эту функцию следующим образом:

 handleStart = () ={amp}gt;{ this.props.countDown(this.props.time); } 

И я сделал отдельную функцию для SetInterval:

 interval = () ={amp}gt;{ setInterval(this.handleStart,1000) } 

Наконец, я прикрепил к кнопке onClick последнюю функцию:

 handleSetInterval= () ={amp}gt;{ this.interval(); } 

Теперь таймер тикает и обратный отсчет работает. Но как приостановить этот счетчик в любое время? У меня есть еще одна кнопка с функцией паузы, и я пытался написать функцию с clearInterval, но она не работает. Должен ли я использовать логическую логику для запуска / остановки или, может быть, обработать clearInterval внутри компонента Main App? Я полностью потерян. Спасибо, ребята, за любой ответ.