React native clearInterval not working if setInterval called twice

I'm trying to build a stopwatch kind of app with React Native. For simplicity, I have a time display, start button and stop button.

When I press the Start button, time starts to count. When i hit the Stop button, time stops.

The problem is if when i press the start button twice, then the Stop button stops working and time continues to be counted.

I highly doubt it matters, but I'm using Expo on macOS with both Android Studio Emulator and my physical device. The problem is experienced on both of them.

Any help would be appreciated.

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>
    );
  }
}