why do some checkboxes don’t change between checked and unchecked when clicked?

you need to change two things and it will work just fine first: inside todoItem.js

onChange={(e) => props.handleChange(e,props.item.id)}

second: inside the parent file

handleChange(event, id) {
  this.setState((prevState) => {
    const newArray = prevState.todos.map((elem) => {
      if(elem.id === id) {
        elem.completed = event.target.checked
      }
      return elem
    })
    return {
      todos: newArray
    }
  })
}

now everything will work as you expected have a nice day