Reactjs setState on onChange

//App.js

import React from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
import ‘bootstrap/dist/css/bootstrap.css’
import Todo from ‘./components/Todo’
import data from ‘./components/Data’

class App extends React.Component{
constructor(){
super()
this.state = {
todos : data
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(id){
console.log(‘Working’, id)
this.setState(prevState => {
const updateTodo = prevState.todos.map(todo => {
if (todo.id === id){
todo.completed = !todo.completed
}
return todo
})
return { todos : updateTodo }
})
}
render(){
return (


{this.state.todos.map(item => {
return(

)
})}

)
}

}

export default App;

//Todo.js

import React from ‘react’

function Todo(props){
return (



<input type=‘checkbox’
checked={props.item.completed}
onChange={() => props.handleChange(props.item.id)}
/>

{props.item.name}



)

}

export default Todo;

//And this is the data

const data = [
{
id : 1,
name : ‘Go to the Bar’,
completed : true

},
{
id : 2,
name : ‘Go to the Club’,
completed : false
},
{
id : 3,
name : ‘Go Watch Football’,
completed : false
},
]

export default data;

The problem i’m facing is that the handleChange function isn’t making the checkbox change state when clicked