есть код который рендерит на экран текущее время, но когда часы или минуты ниже 10ти тоесть число однозначное блок сдвигаеться

Есть код который рендерит на экран текущее время, но когда часы или минуты ниже 10ти то есть число однозначное блок сдвигается. Не могу сделать так, чтобы перед число пока оно однозначное стоял 0 а потом пропадал когда число становилось двухзначным.

import React  from 'react';
import './App.css';

      class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          time: this.toOffsetDate(this.props.offset)
        };
    }
    componentDidMount() {
      this.intervalID = setInterval(
        () => this.tick(),
        1000
      );
    }
    componentWillUnmount() {
      clearInterval(this.intervalID);
    }

    toOffsetDate(offset) {
      var d = new Date(new Date().getTime() + (3600 * 1000));
      var hrs = d.getUTCHours();
      var mins = d.getUTCMinutes();
      var secs = d.getUTCSeconds();
      return `${hrs}:${mins}:${secs}`;

  }
    tick() {
      this.setState({
        time: this.toOffsetDate(this.props.offset)
      });
    }
    render() {
        return (
            <p className="App-clock">
                Текущее время: {this.state.time}.
            </p>
        );
    }
}     
export default Clock;