как использовать clearInteval, чтобы таймер сам очищался в ReactJS?

Я новичок в реагировании, я пытаюсь написать компонент реагирования, компонент имеет несколько функций.

1. пользователь может ввести случайное число, тогда число также будет отображаться на странице.
2. реализовать кнопку с текстовым значением «старт», после нажатия кнопки отображаемое числовое значение будет уменьшаться на единицу каждую 1 секунду, а текстовое значение станет «стоп».
3. нажмите кнопку «Продолжить», минус один остановится, а текстовое значение кнопки вернется к «старту».
4. когда число вычитается до 0, автоматически останавливается.

Я реализовал первые три функции. но я не уверен, как мне начать последний. я должен установить другой clearInteval? на основе if statement, когда таймер отсчитывает 0?

код здесь:

    var myTimer;

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          details: [{ id: 1, number: "" }],
          type: false
        };
        this.handleClick = this.handleClick.bind(this);
      }
      changeNumber = (e, target) => {
        this.setState({
          details: this.state.details.map(detail => {
            if (detail.id === target.id) {
              detail.number = e.target.value;
            }
            return detail;
          })
        });
      };

      handleClick = () => {
        this.setState(prevState => ({
          type: !prevState.type
        }));
        if (this.state.type === false) {
          myTimer = setInterval(
            () =>
              this.setState({
                details: this.state.details.map(detail => {
                  if (detail.id) {
                    detail.number = parseInt(detail.number) - 1;
                  }
                  return detail;
                })
              }),
            1000
          );
        }
        if (this.state.type === true) {
          clearInterval(myTimer);
        }
      };

      render() {
        return (
          <div>
            {this.state.details.map(detail => {
              return (
                <div key={detail.id}>
                  Number:{detail.number}
                  <input
                    type="number"
                    onChange={e => this.changeNumber(e, detail)}
                    value={detail.number}
                  />
                  <input
                    type="button"
                    onClick={() => this.handleClick()}
                    value={this.state.type ? "stop" : "start"}
                  />
                </div>
              );
            })}
          </div>
        );
      }
    }

    export default App;