Странно работает setInterval()

Имеется компонент в React JS:

import React, {Component} from 'react';
export default class RebootSitePopup extends Component {
constructor(props) {
    super(props);
    this.state = {timer: 0};
}
componentDidMount() {
    this.startTimer();
}
componentWillUnmount() {
    this.deleteTimer();
}
startTimer() {
    if (this.interval) {
        clearInterval(this.interval);
    }
    this.setState({timer: this.props.time_to_reboot});
    this.interval = setInterval(
        () => {
            this.setState({timer: this.state.timer - 1});
            if (this.state.timer === 0) {
                clearInterval(this.interval);
                console.log('clearInterval');
            }
        },
        1000
    )
}
deleteTimer() {
    if (this.interval) {
        clearInterval(this.interval);
    }
    this.setState({timer: 0});
}
render() {
    return (
        <div className="reality-check__overlay">
            <div className="reality-check__modal">
                <div className="reality-check__modal-inner">
                    <div className="reality-check__title">{gettext("common__page_will_be_reloaded")}</div>
                    <div className="reality-check__sub-title">
                        {gettext("common__page_will_be_reloaded_after")}: {this.state.timer} />
                    </div>
                </div>
            </div>
        </div>
    );
}
}

Смысл в том, что компонент должен просто рендерить небольшую форму с таймером. В this.props.time_to_reboot хранится время до выключения таймера (например, число 10). Как работает мой таймер:

• После первой итерации задержка меньше секунды.
• После второй итерации задержка 3 секунды.
• После третьей итерации задержка 2 секунды.
• Далее задержка между итерациями 1 секунда.

Как можно "выровнять" таймер, чтобы между каждой итерацией была задержка 1 секунда?