React / Checkboxにチェックをしてフォームをsubmitしたら、あるメッセージを表示させたい

Reactで、ToDoアプリを作成しています。

Appコンポーネント、Formコンポーネント、Listコンポーネント、Itemコンポーネントに分けているのですが、

Formコンポーネントの中にあるチェックボックスにチェックを入れてsubmitしたら、
↓
ItemコンポーネントによってrenderされたToDoのタスクに「Important」と表示させたいと思っています。

FormコンポーネントはItemコンポーネントとはつながっていないため、上記のような処理をするのであればAppコンポーネントからpropsなりをItemコンポーネントに通して、Itemコンポーネント内で条件分岐などをしてメッセージを表示させたらいいのではないかと思うのですが、うまく出来ずにいます。どなたかやり方をご教授いただけないでしょうか。

class App extends React.Component {

    constructor(props){
        super(props)
        this.state =  { defaultList: todo, checked: false }
    }

    onSubmit = (task) => {
        this.state.defaultList.unshift({task});
        this.setState(todo);
    }

    deleteTask = (i) => {
        this.state.defaultList.splice(i, 1);
        this.setState({defaultList: todo})
    }

    handleCheckBox = () => {
        this.setState({ checked: !this.state.checked });
        console.log("App.js", this.state.checked);       
    }

    render() {
        return (
            <div>
                <Form 
                    onSubmit = {this.onSubmit}
                    checkCheckBox = {this.handleCheckBox}
                />
                <List 
                    lists = {this.state.defaultList}
                    deleteTask = {this.deleteTask}
                    checked={this.state.checked}
                />
            </div>
        );
    }
}

class Form extends React.Component {

    onFormSubmit = (event) => {
        event.preventDefault();

        if(this.refs.userInput.value === "") {
            this.refs.warning.innerHTML = "Please enter a task";
        } else {
            this.refs.warning.innerHTML = "";
            this.props.onSubmit(this.refs.userInput.value);
            this.refs.userInput.value = "";
        }
    }

    handleCheckClick = () => {
        this.props.checkCheckBox();
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onFormSubmit}>
                    <div>
                        <label>Task</label>
                        <input ref="userInput" />
                        <p ref="warning" className="warning"></p>
                    </div>
                    <div className="ui checkbox block">
                        <input
                            type="checkbox"                      
                            onChange={this.handleCheckClick} 
                        />
                        <label>Important</label>
                    </div>
                        <button className="ui button" type="submit">ADD</button>
                </form>
            </div>
        );
    }
}

const Item = ({task, priority, deleteItem}) => {
    return (
        <ul>
            <li><b>{task}</b></li>
            <li>{priority && <span>{priority}</span>}</li>
            <li onClick={deleteItem}>Delete</li>
        </ul>
    );
}

const List = ({deleteTask, lists, checked}) => {
    const renderedList = lists.map((list, i) => {

        return (
            <Item 
                key={i}
                task = {list.task}
                priority = {list.priority}
                deleteItem = {deleteTask}
                checkPriority = {checked}
            />
        );
    });
    return <div>{renderedList}</div>
}