i am doing this todo list from a youtube channel.below is the code

```
import { useState } from "react";

export default function Todo(){
    const[todo,settodo]=useState("");
    const [todolist,settodolist]=useState([])

    const Handletodo=(event)=>{
        settodo(event.target.value)
    }
    const HandleSubmit=(event)=>{
        event.preventDefault();
        todolist.push(todo);
        console.log(todolist)
        settodo("")
    }
    return(
        <div>
        <form onSubmit={HandleSubmit}>
            <div>
                <input type={"text"}  value={todo} onChange={Handletodo}></input>
                <button type="submit">Add</button>
            </div><br/>
        </form>
        {todolist.map((item)=>{
            <h3>item</h3>
         })}
        </div>
    )
}

```

why i cant iterate the todolist.map() in return

this is the link of that video <https://www.youtube.com/watch?v=eYlC4ReZRCk&list=PLSsAz5wf2lkK_ekd0J__44KG6QoXetZza&index=33>