React. Запрет нажатия кнопки

В приложении есть небольшой баг, хотелось бы его пофиксить. Это todo-list, когда я нажимаю на start и stop - всё работает, но когда я отмечаю задание выполненным (checked), таймер все равно можно активировать нажатием на кнопку start. Необходимо поставить такое условие, чтобы при состоянии Item - CompleteTodo - кнопку Start в таймере невозможно было нажать.

Код компонента ниже:

import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'

let interval;
export default class TodoItem extends Component {
  static propTypes = {
    todo: PropTypes.object.isRequired,
    deleteTodo: PropTypes.func.isRequired,
    completeTodo: PropTypes.func.isRequired
  }
  componentWillUnmount() {
    clearInterval(interval);
  }
  handleDeleteClick = () => {
    this.props.deleteTodo(this.props.todo.id);
  }

  handleStartClick = (checked) => {
    this.props.startTimer(this.props.todo.id);
    interval = setInterval(() => {
      this.props.updateTimer(this.props.todo.id);
    }, 1000);
  }

  handleStopClick = () => {
    this.props.stopTimer(this.props.todo.id);
    clearInterval(interval);
  }
  handleCompleteClick = () => {
    this.props.completeTodo(this.props.todo.id);
    this.props.stopTimer(this.props.todo.id);
    clearInterval(interval);
  }
  formatSeconds = (seconds) => {
        let hours = Math.floor(seconds / 3600);
        seconds = seconds % 3600;
        let minutes = Math.floor(seconds / 60);
        seconds = seconds % 60;
        return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
    }
  render() {
    const { todo, timerActive, timerTodo } = this.props
    return (
      <li className={classnames({
        completed: todo.completed
      })}>
        <div className="view" style={{ display: 'flex', alignItems: 'center' }} onClick={this.handleSelectToDo}>
          <input
            className="toggle"
            type="checkbox"
            checked={todo.completed}
            onChange={this.handleCompleteClick}
          />
          <label style={{ width: '40%' }}>
            {todo.text}
          </label>
          <span style={{ display: 'block', fontSize: 16 }}>Total time is {this.formatSeconds(todo.total)}</span>
          {(!timerActive || timerTodo === todo.id) && (
            <button
              style={{
                background: 'transparent',
                border: 0,
                outline: 0,
                fontSize: 12,
                cursor: 'pointer',
                marginLeft: 30
              }}
              disabled={timerActive && timerTodo !== todo.id}
              onClick={timerActive ? this.handleStopClick : this.handleStartClick}
            >{timerActive ? 'Stop' : 'Start'}</button>
          )}
          <button className="destroy" onClick={this.handleDeleteClick} />
        </div>
      </li>
    )
  }
}