Событие плохо срабатывает

import React from 'react';
 
import './todo-list-item.css';
 
export default class TodoListItem extends React.Component {
 
        state = {
            'done': false,
            'important': false
        }
 
        onState = () => {
            if (this.state.done === false) {
                this.setState({ 'done': true })
            } else {
                this.setState({ 'done': false })
            }
        }
 
        onImportant = () => {
            this.setState((state) => { 
                return {
                    'important': !state.important 
                };
            });
        };
 
    render () {
        const { item } = this.props;
        const { done, important } = this.state;
        
        let classNames = 'todo-list-item';
        if(done) {
            classNames += ' done'
        } 
 
        if(important) {
            classNames += ' important';
        }
 
        return (
        <span className={classNames}>
            <span
                className="todo-list-item-label"
                onClick={this.onState}>
                {item}
            </span>   
                
            <button type="button"
                className="btn btn-outline-success btn-sm float-end">
                <i className="fa fa-exclamation" onClick={this.onImportant}/>
            </button>
 
            <button type="button"
                className="btn btn-outline-danger btn-sm float-end">
                <i className="fa fa-trash-o" />
            </button>           
        </span>    
        );       
    }
}