Как возобновить обратный отсчет после сброса интервала в момент реакции?

Question

У меня есть компонент, который начнет отсчет с 5 минут при получении метки времени через реквизит.Когда обратный отсчет становится <= 0, я отображаю «Просрочено».В этот момент, если я не очищаю интервал, то при отрицательном значении минут обратный отсчет отдает 59 минут и начинает обратный отсчет (а это не то, что я хочу).Выполнение четкого интервала решает проблему, но это также означает, что в следующий раз, когда я получу метку времени из реквизита, обратный отсчет не будет работать.</p>

При обратном отсчете <= 0 активируются ранее отключенные кнопки.Когда пользователь нажимает на эту кнопку, компонент получает новую метку времени.Поэтому обратный отсчет начинается снова, и я хотел бы, чтобы мой код делал.</p>

Countdown component

export default class ObservationCountDown extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            obsTimeleft: undefined
        };

        this.countDown = this.countDown.bind(this);
        this.startCounter = this.startCounter.bind(this);
        this.countDownInterval = null;
    }

    countDown() {

        const { obsTakenTime } = this.props; // when last obs was taken by the user in ms timestamp
        const nextDueTimeForObs = moment(obsTakenTime).add(5, 'minutes'); // add 5 mins to the time when last obs was taken 

        const nextObservationTime = nextDueTimeForObs.subtract(moment.now()).format('mm');

        if (obsTakenTime) {
            this.setState({ obsTimeleft: nextObservationTime + ' mins' });
}
        if (Number(nextObservationTime) <= 4) {
            this.props.disableButtons();
        }
        if (Number(nextObservationTime) <= 0) {
            this.setState({ obsTimeleft: 'Overdue' });
            this.props.enableButtons();
            clearInterval(this.countDownInterval)
        }
    }
 componentDidMount() {
        this.startCounter();
    }

    startCounter() {
        this.countDownInterval = setInterval(this.countDown, 1000);
    } 

    render() {
        const { obsTimeleft } = this.state;

        return (
            <>
                {(obsTimeleft && obsTimeleft === 'Overdue') ?
                    <div className="text-danger">
                        <strong>{obsTimeleft}</strong>
                    </div> :
                    <div>
                        <strong>{.obsTimeleft}</strong>
                    </div>} 
            </>
        );

    }
}

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

        this.state = {
            disabled: false,
            showModal: false,
            locationBtn: { 'InBed': 'IB', 'Corridor': 'C', 'TV Lounge': 'TV'}
        };

    }

 locationButton(patient, index) {
        const {locationBtn} = this.state;
        return Object.keys(locationBtn).map((location, i) =>
            <Button
                key={i}
                id={location}
                disabled={this.state.disabled}
                onClick={//creates timestamp} >
                {locationBtn[location]}
            </Button>

        );
    }


    render() {

        const { patient, label, name, timestamp } = this.props;

        return (
            <>
                <td>{label.slice(5)}</td>
                <td>{name}</td>
                <td id="count-down-row" className={`patientNameRow ${this.stylingRows(patient)}`}>
                    {timestamp &&
                        <ObservationCountDown
                            patient={patient}
                            obsDuration={patient.obsTimer}
                            obsTakenTime={patient.timestamp}
                            disableButtons={() => this.setState({ disabled: true })}
                            enableButtons={() => this.setState({ disabled: false })}
                        />}
                </td>
                <td className=’location-btns’>

                    {this.locationButton(patient, index)} </td>

            </>
        );
    }
}

Я пытался, но этот интервал больше не будет очищаться.

countDown() {

        const { obsTakenTime } = this.props; // when last obs was taken by the user in ms
        console.log(obsTakenTime);
        const nextDueTimeForObs = moment(obsTakenTime).add(2, 'minutes'); // add 16 mins to the time when last obs was taken 

        const nextObservationTime = nextDueTimeForObs.subtract(moment.now()).format('mm');

        if (obsTakenTime) {
            this.setState({ obsTimeleft: nextObservationTime + ' mins' });
            this.startCounter();
        }
        if (Number(nextObservationTime) <= 1) {
            this.props.disablePatientUpdate();
        }
        if (Number(nextObservationTime) <= 0) {
            this.setState({ obsTimeleft: 'Overdue' });
            this.props.enablePatientUpdate();
            clearInterval(this.countDownInterval)
        }
    }
 componentDidMount() {
        this.startCounter();
    }

    startCounter() {
        this.countDownInterval = setInterval(this.countDown, 1000);
    } 
``