Working on a simple React project for learning purposes. I've been able to get everything functioning so far except for the checked box is not updating when it is clicked. The state of the app doesn't seem to update. Any help is appreciated!Thank you!

 import React from 'react';
let id = 0
const Todo = props => ( 
  <li>
    <input type="checkbox" checked={props.todo.checked} onChange={props.onToggle} />
    <button onClick = {props.onDelete}> delete</button>
    <span>{props.todo.text}</span> 
  </li>
)

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      todos: [],
    }
  }
    addTodo() {
      const text = prompt("TODO TEXT PLEASE!")
      this.setState({
        todos: [...this.state.todos, {id: id++, text: text, checked: false},
        ]
      })
    }

    toggleTodo(id) {
      this.setstate({
        todos: this.state.todos.map(todo => {
          if (todo.id !== id) return todo
          return {
            id: todo.id,
            text: todo.text,
            checked: !todo.checked,
          }
        })

      })
    }

  render() {
    return (
      <div>
       <div> Todo Count: {this.state.todos.length}</div>
      <div> Unchecked Count: {this.state.todos.filter(todo => !todo.checked).length} </div>
     
      <button onClick={() => this.addTodo()}> Add TODO </button>
        <ul>
          {this.state.todos.map(todo => (
             <Todo
             onToggle={() => this.toggleTodo(todo.id)}
              onDelete={() => this.removeTodo(todo.id)}
              todo={todo}    
              />
              ))}
        </ul>
      </div>
    )
  }     
   
}

export default App;