why TODO list is not working properly in reactjs

import React from 'react'
const Todo = () => {
    const[newitem,setNewitem]=React.useState("");
    const [list,setList]=React.useState([]);
    function addItem(todovalue)
    {
        if(todovalue!=="")
        {
            const newItem={
                id:1 + Math.random(),
                value:todovalue,
                isDone:false
            }
            const list=[...list];
            list.push(newItem);
            setNewitem({list,newItem:""});
        }
    }
    function deleteItem(id)
    {
        const list=[...list];
        const updatedlist=list.filter(item=>item.id!==id);
        setNewitem({updatedlist});
    }
    function update(input)
    {
        setNewitem({newItem:input});
    }
    return (
        <div className="container">
           
            <h1>Add an item...</h1>
            <input type="text" placeholder="add item" required value={newitem} onChange={e=>update(e.target.value)}/>
            <button clasName="add-btn" onClick={()=>addItem(newitem)} disabled={newitem.length}>Add Todo</button>
            <div className="list">
                <ul>
                    {
                        list.map(item=>{
                            return(
                                <li key={item.id}>
                                    <input type="checkbox" checked={item.isDone} onChange={()=>{}}/>
                                    {item.value}
                                    <button className="btn" onClick={()=>{deleteItem(item.id)}}>Delete</button>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>

            
        </div>
    )
}

export default Todo
when we going to write some text in text field it get only [object Object] and when we click on Add Todo button its throws error “Cannot access ‘list’ before initialization” how to resolve that one