Установите / снимите флажок «Все» в reactJs

Я пытаюсь реализовать выбор/отмену выбора всех функций в reactJs, но не смог этого сделать.

Я сделал флажок выбора/отмены выбора всех основных заголовков функциональным, и отдельные элементы также могут быть выбраны или отменены.

Моя рабочая ссылка:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Box extends Component{
    constructor(props){
        super(props);
        this.state = {
            allChecked: false,
            list: [
                {id:1, name: "item1", isChecked: false},
                {id:2, name: "item2", isChecked: false},
                {id:3, name: "item3", isChecked: false},
            ],
        };
    }

handleChangeEvent = (e) => {
    let list =  this.state.list;
    let allChecked = this.state.allChecked;
    if (e.target.value === "checkAll"){
        list.forEach(item => {
            item.isChecked = e.target.checked;
            allChecked = e.target.checked;
        });
    }
    else{
        list.find( item => item.name === e.target.name).isChecked = e.target.checked;
    }
    this.setState({list:list, allChecked: allChecked});
}

renderList = () => {
    return this.state.list.map(item =>
        <div>
            <input key = {item.id} type = "checkbox" name = {item.name} value = {item.name} checked = {item.isChecked} onChange = {this.handleChangeEvent} />
            <label>{item.name}</label>
        </div>
    )
}
render(){
    return(
        <div>
            <input type = "checkbox" 
            value = "checkAll" 
            checked = {this.state.allChecked} 
            onChange = {this.handleChangeEvent} />Check all
            <br/>
            {this.renderList()}
        </div>
    );
  }
}

ReactDOM.render(<Box/>, document.getElementById('root'));

Чтобы быть прямолинейным, я хочу, чтобы этот тип функциональности (https://jsfiddle.net/52uny55w/) использовал простой Javascript, но не с jquery по некоторым причинам.