反应待办事项列表未更新

我目前正在研究 react.js 待办事项列表。下面的代码是我到目前为止所做的与问题相关的代码

Main File (App.js)

import './App.css';

import Navbar from './components/Header'
import Container from './components/Container.js';
import Input from './components/Input';
import { useState } from 'react';
function App() {

  let todo =[
   {id:Math.random()*10000,
    title: "Walk the dog",
    completed:false},

    {id:Math.random()*10000,
      title: "Wash Dishes",
      completed:false},
  ]
  
  const [list,setList] = useState(todo)
  function addTodo(e) {
    let value = e.target.previousElementSibling.value;
    let newtodo = [...todo,{id: Math.random()*10000, title: value, completed:false}]
    setList(newtodo)
    console.log(todo)
  }
 

  return (
    <div className="body">
       <Navbar className="Navbar"/>
       <Input method = {addTodo} />
       <Container list={newtodo}/>
    </div>
   
  );
}

export default App;

Container Component

const Container =({list , method})=> {
   
    return(
        <div className="container">
            {list.map(element => {
                return(
                    <TodoComponent className="todo-list" data={element}/>
                    
                )
        })}

        </div>
    )
}

export default Container

Todo List Component

import React from "react";

const TodoComponent = ({data})=> {

   return(

    <div className="todo-list" >
      <h3 key={data.id} >{data.title}</h3>

      <i className="fas fa-trash"></i>
    </div>
   ) 
}



export default TodoComponent

Form Input

import React from "react"
const Input = ({method}) => {
    return (
        <div className="form">
            <input placeholder="add task.."></input>

            <button onClick= {method}>
                Add 
            </button>
        </div>

    )
}

export default Input

问题是，每当我单击输入字段旁边的按钮时，“待办事项”数组都会更新，但不会在待办事项列表中呈现更新。我该如何解决？提前致谢。如果这太令人困惑，请告诉我。