Não entendo porque não é chama a função

Eu estou adicionando um botão de concluir e deletar com template string e onclick nos botões, mas não sei porque ao clicar no botão aparece que a função não foi definida...

window.addEventListener('load', () => {
  const input = document.querySelector('[data-form-input]');
  const btnNewItem = document.querySelector('[data-form-button]');

  btnNewItem.addEventListener('click', (event) => {
    event.preventDefault(); //Fixa a pagina para nao recarregar
    let ul = document.querySelector('[data-list]'); //Captura a ul
    ul.innerHTML += `<li class="task">
    <p class="content">${input.value}</p>
    <button class="check-button" onclick="taskConcluded()">Feito!</button>
    <button class="check-button" onclick="taskDeleted()">Apagar</button>
    <button onclick="myFunction()">Click me</button>
    </li>`;
    // input.value = '';
  });

  function taskConcluded(event) {
    console.log('taskConcluded chamado!');
    const btnFeito = event.target; //Descobrir qual elemento foi clicado.
    const taskConcluded = btnFeito.parentElement; //Pega quem é o pai desse elemento
    taskConcluded.classList.toggle('done');
  }

  function taskDeleted(event) {
    console.log('taskDeleted chamado!');
    const btnApagar = event.target; //Descobrir qual elemento foi clicado.
    console.log(btnApagar);
  }

  function myFunction() {
    console.log('myFunction chamado!');
  }
});

Pois o template string funciona, porque os botões aparecem... mas ao chamar a função da erro no console: "Uncaught ReferenceError: taskDeleted is not defined at HTMLButtonElement.onclick"