O primeiro todo me retorna normalmente mas os depois só me retorna undefined

let ListElement = document.querySelector('#app ul');
let  inputElement = document.querySelector('#app input');
let  btnElement = document.querySelector('#app Button');

let todos = [
    'Fazer1',
    'Fazer2',
    'Fazer3'
];

function RenderTodos(){
    ListElement.innerHTML = '';

    for(todo of todos){
        
        let todoElement = document.createElement('li');
        let todoText = document.createTextNode(todo);
       
        todoElement.appendChild(todoText);
        ListElement.appendChild(todoElement);

    }
}
RenderTodos();

function addTodo(){
    todoText = inputElement.value;

    todos.push(todoText);
    inputElement = '';
    RenderTodos();
    console.log(todoText)

}
 btnElement.onclick = addTodo;