я не понимаю почему стэйт не тот

К примеру ввожу в <input onChange={ToDoInputNodeChange} className={styles.ToDoInput}/> 1

Нажимаю на <button onClick={AddButtonClick} className={styles.ToDoCreate}><img src={"Add.png"}/></button>

Дальше ввожу в <input onChange={ToDoInputNodeChange} className={styles.ToDoInput}/> 2

Нажимаю на <button onClick={AddButtonClick} className={styles.ToDoCreate}><img src={"Add.png"}/></button>

В стэйтах ToDo везде 1, но в пропсах одного из двух ToDo ToDo: 2

page.js

    "use client"
    import styles from "./page.module.css";
    import {useRef} from "react";
    import ToDoTools from "@/app/components/ToDoTools";
    import ToDoList from "@/app/components/ToDoList";
    
    export default function Home() {
        const ref = useRef(null);
        function AddTodo(ToDo){
            ref.current.AddToDo(ToDo)
        }
    
        return (
            <main className={styles.main}>
                <ToDoTools styles={styles} Add={AddTodo}/>
                <ToDoList styles={styles} ref={ref}/>
            </main>
        );
    }

ToDoList.js

"use client"
import {forwardRef, useImperativeHandle, useState} from "react";
import ToDoNode from "@/app/components/ToDo";

const ToDoList = forwardRef(
    function ToDoList(props, ref) {
        useImperativeHandle(ref, ()=>{
            return {AddToDo}
        })
        const [ToDoList, ChangeToDoList] = useState([])

        function AddToDo(ToDo){
            console.log(ToDo)
            ChangeToDoList([ToDo, ...ToDoList])
        }
        function DeleteToDo(id){
            ToDoList.slice(id - 1, 1)
        }
        function CompleteToDo(id){
            console.log(ToDoList[id] + ": Completed")
        }
        function EditToDo(id){
            console.log(ToDoList[id] + ": Edited")
            //fetch to backend to edit in database
        }

        return (
            <div className={props.styles.ToDoList}>
                {ToDoList.map((e,i)=>{
                    return <ToDoNode id={i} key={i} styles={props.styles} Complete={CompleteToDo} Delete={DeleteToDo} Edit={EditToDo} ToDo={e}/>
                })}
            </div>
        );
    }
)

export default ToDoList

ToDoTools.js

"use client"

import {useState} from "react";

export default function ToDoTools({styles, Add}) {

    const [ToDoInput, ToDoInputChange] = useState('')

    function AddButtonClick(){
        Add(ToDoInput)
    }

    function ToDoInputNodeChange(e){
        ToDoInputChange(e.target.value)
    }

    return (
        <div className={styles.ToDoTools}>
            <input onChange={ToDoInputNodeChange} className={styles.ToDoInput}/>
            <button onClick={AddButtonClick} className={styles.ToDoCreate}><img src={"Add.png"}/></button>
        </div>
    );
}

ToDo.js

"use client"
import {useRef, useState} from "react";

export default function ToDoNode({styles, id, Complete, Edit, Delete, ToDo}) {
    console.log(id + " :a: " + ToDo)
    const [ToDoNote, ToDoNoteChange] = useState(ToDo)
    console.log(id + " :b: " + ToDoNote)
    const [ToDoNoteEditInput, ToDoNoteEditInputChange] = useState(ToDo)
    console.log(id + " :c: " + ToDoNoteEditInput)

    const ToDoNoteEditInputRef = useRef(null)
    const ToDoRef = useRef(null)

    function CompleteToDo(){
        Complete(id)
    }

    function DeleteToDo(){
        Delete(id)
    }

    function EditToDo(){
        ToDoNoteEditInputRef.current.style.display = "flex"
        ToDoNoteEditInputRef.current.focus()
        ToDoRef.current.style.display = "none"
    }
    function ToDoEditInputNodeChange(e){
        ToDoNoteEditInputChange(ToDoNoteEditInputRef.current.value)
    }
    function ToDoEditInputKeyPress(e){
        if(e.key == "Enter"){
            e.target.blur()
        }
    }
    function ToDoEditInputFocus(){
        ToDoNoteEditInputRef.current.style.display = "none"
        ToDoRef.current.style.display = "block"
        ToDoEditInputChange()
    }
    function ToDoEditInputChange(){
        if(ToDoNoteEditInput == ''){
            ToDoNoteEditInputChange(ToDoNote)
            return
        }
        if(ToDoNoteEditInput != ToDoNote){
            ToDoNoteChange(ToDoNoteEditInput)
            Edit(id)
        }
    }
    return (
        <div id={id} className={styles.ToDoContainer}>
            <p ref={ToDoRef} className={styles.ToDo}>{ToDoNote}</p>
            <input ref={ToDoNoteEditInputRef} onChange={ToDoEditInputNodeChange} onKeyDown={ToDoEditInputKeyPress} onBlur={ToDoEditInputFocus} className={styles.ToDoEditInput} value={ToDoNoteEditInput}/>
            <div className={styles.ToDoControls}>
                <button onClick={CompleteToDo} className={styles.ToDoComplete}><img src={"Complete.png"} /></button>
                <button onClick={EditToDo} className={styles.ToDoEdit}><img src={"Edit.png"}/></button>
                <button onClick={DeleteToDo} className={styles.ToDoDelete}><img src={"Delete.png"}/></button>
            </div>
        </div>
    );
}