Изменение state из внешней функции

Делаю to do list, и мне нужно изменять количество выполненных задач когда галочка стоит, как мне сделать так что б изменялось количество этих выполненных задач в state?
файл toDoList

import React from 'react';
import Button from './Button'
import Tasks from './Tasks'
export default class ToDoList extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            clicked:false,
            listArr: [{task:'Помыть посуду'}, {task:'сходить в магазин'},{task:'Сходить на работу'},{task:'сходить погулять'}],
        }
    }
 render(){

      return(
              <ol>
                  {this.state.listArr.map((taskE)=><li onChange={()=>{

                  }}><Tasks task={taskE.task}/></li>)}

                    <Button doneTasks={this.state.doneTask}/>

              </ol>

          )
    }
} 

файл tasks

import React from "react";

function Tasks({ task }) {
    return (
            <form>
                <input type="checkbox"  />
                <span>{task}</span>
            </form>
    );
}

export default Tasks;