Реагировать на родной clearInterval не работает, если setInterval вызывается дважды

Question

Я пытаюсь создать приложение типа секундомера с помощью React Native.Для простоты у меня есть дисплей времени, кнопка запуска и кнопка остановки.

Когда я нажимаю кнопку «Пуск», время начинает отсчитываться.Когда я нажимаю кнопку Стоп, время останавливается.

Проблема в том, что если я дважды нажимаю кнопку пуска, кнопка Стоп перестает работать, и время продолжает отсчитываться.

Я очень сомневаюсь, что это имеет значение, но я использую Expo на macOS с эмулятором Android Studio и своим физическим устройством.Проблема возникает на обоих из них.

Любая помощь будет оценена.

import React from 'react';
import { Text, View, TouchableOpacity} from 'react-native';
import moment from 'moment';

function Timer ({interval}) {
  const duration = moment.duration(interval);
  const pad = (n) => {
    return n < 10 ? '0' + n : n;
  };

  return <Text>
    {pad(duration.hours())}:{pad(duration.minutes())}:{pad(duration.seconds())}
  </Text>
}

function Button({title, onPress}) {
  return <TouchableOpacity onPress={onPress}>
    <View>
      <Text>{title}</Text>
    </View>
  </TouchableOpacity>
}

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      now: 0,
      start: 0,
    }
  }

  start = () => {
    const now = new Date().getTime();
    this.setState({
      start: now,
      now: now,
    });

    this.timer = setInterval(() => {
      this.setState({
        now: new Date().getTime(),
      })
    }, 1000)
  };

  stop = () => {
    clearInterval(this.timer);
  };

  render() {
    const { now, start } = this.state;
    const timer = now - start;

    return (
      <View>
        <Timer interval={ timer }/>
        <Button
          title={'START'}
          onPress={this.start}
        />
        <Button
          title={'STOP'}
          onPress={this.stop}
        />
      </View>
    );
  }
}