Dúvida sobre código

Olá, boa noite.

Estou refazendo essa aula, e no meu código não funciona de jeito nenhum. Depois que o tempo acaba, a tarefa dá como "undefined" quando dou refresh na página.

Segue o código:

 const btnAdicionarTarefa = document.querySelector('.app__button--add-task')
const formAdicionarTarefa = document.querySelector('.app__form-add-task')

const textarea = document.querySelector('.app__form-textarea') 

const ulTarefas = document.querySelector('.app__section-task-list') 

const tarefas = JSON.parse(localStorage.getItem('tarefas')) || [] 

const btnCancelar = document.querySelector('.app__form-footer__button--cancel'); 
const paragrafoTarefasAndamento = document.querySelector('.app__section-active-task-description'); 

let tarefaSelecionada = null; 
let liTarefaSelecionada = null; 

const limparFormulario = () => { 
    textarea.value = '';
    formAdicionarTarefa.classList.add('hidden');

}

function atualizarTarefas () {
    localStorage.setItem('tarefas', JSON.stringify(tarefas))  
}

function criarElementoTarefa(tarefa) {
    const li = document.createElement('li') 
    li.classList.add('app__section-task-list-item') 

    const sgv = document.createElement('svg') 
    sgv.innerHTML = `
            <svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="12" fill="#FFF"></circle>
            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z"
                fill="#01080E"></path>
        </svg>
        ` 

    const paragrafo = document.createElement('p') 
    paragrafo.classList.add('app__section-task-list-item-description') 
    paragrafo.textContent = tarefa.descricao 

    const botao = document.createElement('button') 
    const imagemBotao = document.createElement('img') 
    botao.classList.add('app_button-edit') 
    imagemBotao.setAttribute('src', '/imagens/edit.png') 
    botao.append(imagemBotao) 

    botao.onclick = () => {
        const novaDescrição = prompt('Qual o nome da nova tarefa?'); 
        if (novaDescrição) { 
            paragrafo.textContent = novaDescrição; 
            tarefa.descricao = novaDescrição; 
            atualizarTarefas(); 
        }
        
    }

    li.append(sgv)
    li.append(paragrafo) 
    li.append(botao) 

    if (tarefa.completa) {
        li.classList.add('app__section-task-list-item-complete') 
        botao.setAttribute('disabled', 'disabled') 
    } else {
        li.onclick = () => {
            document.querySelectorAll('.app__section-task-list-item-active') 
            .forEach(elemento => {
                elemento.classList.remove('app__section-task-list-item-active');
            })
            if (tarefaSelecionada == tarefa) {
                paragrafoTarefasAndamento.textContent = '';
                tarefaSelecionada = null
                liTarefaSelecionada = null 
                return
            }
            tarefaSelecionada = tarefa; 
            liTarefaSelecionada = li; 
    
            paragrafoTarefasAndamento.textContent = tarefa.descricao; 
           
            li.classList.add('app__section-task-list-item-active');
        }
        
        
    return li 
    }

}

btnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden')

})


formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault() 
    const tarefa = {
        descricao: textarea.value 
    }

    tarefas.push(tarefa) 
    const elementoTarefa = criarElementoTarefa(tarefa) 
    ulTarefas.append(elementoTarefa) 
    textarea.value = '' 
    formAdicionarTarefa.classList.add('hidden') 
})

tarefas.forEach(tarefa => { 
    const elementoTarefa = criarElementoTarefa(tarefa) 
    ulTarefas.append(elementoTarefa) 
})


btnCancelar.addEventListener('click', limparFormulario)


    document.addEventListener('FocoFinalizado', () => {
        if (tarefaSelecionada && liTarefaSelecionada) {
            liTarefaSelecionada.classList.remove('app__section-task-list-item-active'); 
            liTarefaSelecionada.classList.add('app__section-task-list-item-complete'); 
            liTarefaSelecionada.querySelector('button').setAttribute('disabled', 'disabled'); 
            tarefaSelecionada.completa = true 
            atualizarTarefas()
        }

    })