Как в реакте изменить элемент массива в state

Пытаюсь изменить элемент массива по методу handleToggle, но возникает ошибка, что я делаю не так, и почему в реакте я все время должен возвращать новый массив?

Дочерний компонент TodoList:

function Todolist(props) {
  const todoItem = props.todos.map((todo, index) =>
    <ListItem key={todo.id} dense button>
      <ListItemIcon>
        <Checkbox checked={todo.completed} onChange={props.onChange(todo.id)} edge="start"/>
      </ListItemIcon>
      <ListItemText primary={todo.title} />
      <ListItemSecondaryAction>
        <IconButton edge="end" aria-label="comments"></IconButton>
      </ListItemSecondaryAction>
    </ListItem>
  )
  return (
    <div>
      {todoItem}
    </div>
  )
}

Дочерний компонент FormBox:

function FormBox(props) {
  return (
    <form onSubmit={props.onSubmit}>
      <TextField type="text" variant="filled" className="TextField" fullWidth label="Enter new task" value={props.value} onChange={props.onChange} />
      <Button type="submit" size="large" variant="contained">Add</Button>
    </form>
  )
}

Родительский:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      todos: [
        {
          title: 'Learn React',
          id: Math.random(),
          completed: true
        }
      ]
    }
  };
  handleChange = (evt) => {
    this.setState({
      value: evt.target.value
    })
  };
  handleSubmit = (evt) => {
    evt.preventDefault();
    const todos = [...this.state.todos];
    todos.push({
      title: this.state.value,
      id: Math.random(),
      completed: false
    });
    this.setState(state => ({
      todos,
      value: ''
    }))
  };
  handleToggle = (id) => {
    const todos = [...this.state.todos];
    todos.map(todo => {
      if (todo.id === id) {
        return todo.completed = !todo.completed
      } else {
        return todo
      }
    });
    this.setState(state => ({
      todos
    }))
  };
  render() {
    return (
      <div className="App">
        <Grid className="Header" justify="center" container>
          <Grid item xs={11}>
            <h1 className="Title">My to-do react app</h1>
            <FormBox value={this.state.value} onSubmit={this.handleSubmit} onChange={this.handleChange}/>
          </Grid>
        </Grid>
        <TodoList todos={this.state.todos} onChange={this.handleToggle} />
      </div>
    );
  }
}

Текст ошибки:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.