Lista de tarefas não aparece

Estou fazendo todo o código de acordo com o vídeo, porém acontece um bug, pois o programa não reconhece o elemento tarefa quando tento adicionar texto à variável paragrafo dentro da função criarElementoTarefa.

Segue o código completo:

const btnAdicionarTarefa = document.querySelector(".app__button--add-task");
const formAdicionarTarefa = document.querySelector(".app__form-add-task");
const textareaAdicionarTarefa = document.querySelector(".app__form-textarea");
const ulTarefas = document.querySelector(".app__section-task-list");

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

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

    const svg = document.createElement("svg");
    svg.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.textContent = tarefa.descricao;

    const botao = document.createElement("button");
    const imagemBotao = document.createElement("img");
    imagemBotao.setAttribute("src", "./imagens/edit.png");
    botao.append(imagemBotao);

    li.append(svg);
    li.append(paragrafo);
    li.append(botao);

    return li;
}

btnAdicionarTarefa.addEventListener("click", () => {
    formAdicionarTarefa.classList.toggle("hidden");
    textareaAdicionarTarefa.focus();
});

formAdicionarTarefa.addEventListener("submit", (evento) => {
    evento.preventDefault();
    const tarefa = {
        descricao: textareaAdicionarTarefa.value
    }
    tarefas.push(tarefa);
    localStorage.setItem("tarefas", JSON.stringify(tarefas));
});

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

Como o elemento "tarefa" não foi definido dentro do programa principal ele não consegue reconhecer essa parte do código e por isso não mostra a lista de tarefas. Coloquei o parágrafo como comentário pra testar e aí aparece a lista, mas sem o paragráfo com o texto, então o problema está nessa parte, preciso criar uma variável constante com o nome "tarefa" antes?

Edit: Pois é, faltou eu referenciar o elemento tarefa como parâmetro justamente ao criar a função criarElementoTarefa(). Não me atentei a esse detalhe, agora o código está funcional.

Antes:

function criarElementoTarefa() {}

Depois (correto):

function criarElementoTarefa(tarefa) {}