ForEach

Eu só gostaria de entender melhor como o forEach trabalha nesse trecho do código:

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

    tarefasCadastradas.forEach((tarefa) => {
        lista.appendChild(Tarefa(tarefa))
    })

no Local Storage temos 2 campos para cada índice, os campos: valor e dataFormatada, mas no forEach é passado apenas "tarefa", queria entender quando é feita a separação desses 2 campos para o componente Tarefa logo abaixo:

export const Tarefa = ({ valor, dataFormatada }) =>{

    const tarefa = document.createElement('li');

    tarefa.classList.add('task');

    const conteudo = `<p class="content">${dataFormatada} * ${valor}</p>`;

    tarefa.innerHTML = conteudo;
    tarefa.appendChild(BotaoConclui());
    tarefa.appendChild(BotaoDeleta());

    return tarefa;
}