I am not getting my checkboxes checked and no console error

I can display the check boxes but not getting my check boxes checked .. Not getting any console error. The handle change function is not working properly for me it seems . I need to delete the checked check boxes . i have added value and Id property to each of the json objects before starting the class.

import React,{Component} from 'react';
import './UserList.css';
import jsonData from '../../people_(5).json';

const list = jsonData.People

const list2 = list.map(v => {
  return {
    ...v,
    value: false
  }
})
list2.forEach((obj,index)=>obj.id=index)


class UserList extends Component{
    state={
        userList: list2
    };

  handleChange = e => {
    console.log(this.state.userList)

    const id = e.target.id;

    this.setState(prevState => {
      return {
        list: prevState.userList.map(
          li => (li.id === +id ? {...li,
            value: !li.value
            } : li)

        )
      };
    });
  };
  handleClick = () => {
    console.log(this.state.userList)

    this.setState(prevState => {
      return {
        list: prevState.userList.filter(li => !li.value)
      };
    });
  };
render(){
    return(
            <form className="pa4">
              <fieldset id="people" className="del bn">
                <legend className="fw7 mb2">People<button onClick={this.handleClick}>Delete</button></legend>
                {this.state.userList.map(e => (
                      <div key={e.id}>
                        <input
                          type="checkbox"
                          id={e.id}
                          checked={e.value}
                          onChange={this.handleChange}
                        />
                        <label htmlFor={e.name}>{e.name}</label>
                      </div>
                    ))}

               </fieldset>
            </form>


            );
    }
}

export default UserList