Застрял на тестовом уроке?

Сейчас смотрю видео уроки по реакту, разбор состояний state, setStete.
В коде ниже работает только одна функция меняющая состояние, а именно onLabelClick. Функция onMarkClick либо не работает, либо срабатывает так же как и onLabelClick, хотя и вызывается на другом объекте - на кнопке.

Ниже код React и Css:

import React from 'react';
import './todo-list-item.css';

class TodoListItem extends React.Component {
    state = {
        done: false,
        important: false
    };

    onLabelClick = () => {
        this.setState({
            done: true
        });
    };
    onMarkClick = () => {
        this.setState({
            important: true
        });
    }
    render () {
       const { label } = this.props;
       const { done, important } = this.state;
       let classNames = "todo-list-item";
       if (done) {
        classNames +=  " done"
       };
       if (important) {
           classNames += " important"
       };
        return (
         <span>
           <span className= {classNames} 
              onClick= {this.onLabelClick} >{ label }
              <button type="button"  onClick= {this.onMarkClick } ><i className="fa fa-exclamation"/></button>
            </span>
        </span> 
        )
    }
}
export default TodoListItem ;

.todo-list-item.done  {
 text-decoration: line-through;
};

.todo-list-item.important  {
    font-weight: bold;
    color: blue;
}
.fa {
    color: green;
}