изменение state

Реализую todolist. Вопрос с функциями line и bold. State изменять нельзя, для этого делаю его копию и работаю с ней. Вопрос: Почему данные функции нормально отрабатывают на элементах массива task, но не отрабатывают (ошибка Cannot read property) после добавления новых элементов после функции addTask

import React, { Component } from 'react';
import './App.css';
import Header from './components/Header'
import Buttons from './components/Buttons'
import TaskList from './components/TaskList'
class App extends Component {
  idTask = 8;
  state = {
    task : [
            {"name" : "Create app react" , "done" : 'false' , "id" : 0 , "imports" : 'false'},
            {"name" : "Create todo lost" , "done" : 'false' , "id" : 1 , "imports" : 'false'}
    ]
  }
  addTask = (text) => {
    const newTask = {
      name : text,
      done : false,
      id : this.idTask++,
      import : false
    }
    this.setState(({task}) => {
      const newArray = [
        ...task,
        newTask
      ]
      return {
        task : newArray
      }
    });
  }
  delTask = (id) => {
    console.log('id',id)
    this.setState(({task}) => {
      const newTask = task.filter(el => el.id !== id);
      return {
        task : newTask
      }
    } )
  }
  line = (id) => {
    console.log('line',id);
    this.setState(({task}) => {
      const newTask = task;
      newTask[id].done = !newTask[id].done
    return {
        task: newTask
    }
    } )
  }
  bold = (id) => {
    console.log('bold',id);
            this.setState( ({task}) => {
              const newTask = [...task];
              newTask[id].imports = !newTask[id].imports
            return {
                task: newTask
            }
        })
  }
  render() {
    return (
      <div>
        <Header />
        <Buttons addTask={this.addTask}/>
        <TaskList 
          task={this.state.task} 
          delTask={this.delTask}
          line={this.line}
          bold={this.bold}/>
      </div>
    );
  }
}
export default App;

и

import React,{Component} from 'react';
export default class Tasks extends Component {
    render() {
        const {delTask,bold,line} = this.props;
        const {id,name,done,imports} = this.props.item;
        return (
            <div>
                <span className={
                    (done) && (imports) ? 'underline import' :
                    (done) ? 'underline' :
                    (imports) ? 'import':
                    ''} 
                    onClick={() => line(id)}>{name}</span> 
                <button onClick={() => delTask(id)}>Delete</button>
                <button onClick={() => bold(id)}>Important</button>
            </div>
        )
    }
}