To-Do-List на React, помогите

https://github.com/DmitriyKulikovskiy/To-Do-List Кидаю ссылку на гитхаб, что бы проще было смотреть.

При нажатии на кнопку, добавляется почему-то 2 идентичные таски, вместо 1

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      tasks: [
        {id: 0, aim: 'Clean the room', status: false},
        {id: 1, aim: 'Buy foods', status: false},
        {id: 2, aim: 'Turn off water', status: false}
      ]
    }
  }


//refactoring !!!

    doneTask = id => {
      debugger;
      const index = this.state.tasks.map(task => task.id).indexOf(id);
        this.setState(state => {
        let {tasks} = state;
        tasks[index].status = true 
        return tasks;
      })
    }

    returnToUnDoneTask = id => {
      const index = this.state.tasks.map(task => task.id).indexOf(id);
        this.setState(state => {
        let {tasks} = state;
        tasks[index].status = false 
        return tasks;
      })
    }

// !!!


    deleteTask = id => {
        const index = this.state.tasks.map(task => task.id).indexOf(id);
        this.setState(state => {
        let {tasks} = state;
        delete  tasks[index]
        return tasks;
      })
    }

    //add new task

    addTaskA = task => {
      debugger;
      this.setState(state => {    
        let {tasks} = state;
        tasks.push({
          id: tasks.length !== 0 ? tasks.length : 0,
          aim: task,
          status: false
        })
        return tasks;
      })
    }

  render() {
    let {tasks} = this.state;
    let activeTasks = tasks.filter(task => !task.status)

    debugger;
    return (
      <div className={s.container}>
        <SetItem addTaskA={this.addTaskA}/>
        <div className={s.activeTasks}>
          Active tasks: {activeTasks.length}
        </div>
          {tasks.map(task => (<Item doneTask={() => this.doneTask(task.id)} 
                                    returnToUnDoneTask={() => this.returnToUnDoneTask(task.id)}
                                    deleteTask={() => this.deleteTask(task.id)}
                                    tasks={task} key={task.id} />))}

      </div>

    )
  }
}



export default App;


**Таск**

import React from 'react'
import s from './../App.module.css'

const Item = (props) => {

    const TaskStatus = () => <span > {!props.tasks.status
                                    ? <p onClick={props.doneTask}> YES </p> 
                                    : <p onClick={props.returnToUnDoneTask}> NO</p>} </span>

    return (
        <div className={s.item}>
            <span>{props.tasks.aim} </span>
            <TaskStatus />
            <span onClick={props.deleteTask }> ❌</span>
        </div>
    )
}

export default Item;

**Добавление таска**
import React from 'react'
import s from './../App.module.css'



class SetItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            input: ''
        }
    }

    addTask = () => {
        const {input} = this.state;
        if(input) {
            this.props.addTaskA(input);
            this.setState({input: ''})
        }
    }

    inputOnChange = (event) => {
        this.setState({input: event.target.value})
    }

    render() {
        let {input} = this.state;

        return (
            <div>
                <input onChange={this.inputOnChange} value={input} placeholder={'Set your task'} className={s.setTask}></input>
                <button onClick={this.addTask} className={s.add}>Add</button>
            </div>
        )
    }
}

export default SetItem;