How can i get the Id of the Todo

 {todos.map((todo, i) => {
        <div key={i}  className='todolist__details'>
              <h2>{todo}</h2>
              <DeleteIcon onClick={() => handleDelete(i)} />
          </div>
    })}

You can check how list and keys work in react in here

https://reactjs.org/docs/lists-and-keys.html

From the above code, it looks like todos is an array of strings. So when you are assigning key by doing todo.id, you are assigning the key to be undefined since the id property does not exist in the string type. Change you map method like this

{todos.map((todo, i) => (
    <div key={i}  className='todolist__details'>
        <h2>{todo}</h2>
        <DeleteIcon onClick={() => handleDelete(i)} />
    </div>
))}

and then change on your handleDelete like

const handleDelete = id => {
    const newTodos = [...todos];
    newTodos.splice(id, 1);
    console.log(newTodos)
    setTodos(newTodos)
}