Desconto não entra

Olá pessoal! Tudo bem?

Estou com problemas, pois o desconto não está sendo aplicado. Será que poderiam me ajudar?

Seguem os códigos (link github: https://github.com/RodYam/JavaScript_Metodos_de_Arrays/tree/main/app) :

main.js

let livros = [];
const endPointDaAPI = 'https://guilhermeonrails.github.io/casadocodigo/livros.json';
getBuscarLivrosDaAPI();

async function getBuscarLivrosDaAPI() {
    const res = await fetch(endPointDaAPI);
    livros = await res.json();
    let livrosComDesconto = aplicarDesconto(livros);
    exibirOsLivrosNaTela(livrosComDesconto);
}

metodoForEach.js

const elementoParaInserirLivros = document.getElementById('livros');

function exibirOsLivrosNaTela(listaDeLivros) {
    livros.forEach(livro => {
        elementoParaInserirLivros.innerHTML += `
        <div class="livro">
      <img class="livro__imagens" src="${livro.imagem}"
        alt="${livro.alt}" />
      <h2 class="livro__titulo">
        ${livro.titulo}
      </h2>
      <p class="livro__descricao">${livro.autor}</p>
      <p class="livro__preco" id="preco">R$${livro.preco.toFixed(2)}</p>
      <div class="tags">
        <span class="tag">${livro.categoria}</span>
      </div>
    </div>
        `
    })
}

metodoMap.js

function aplicarDesconto(livros) {
    const desconto = 0.3;
    livrosComDesconto = livros.map(livro => {
        return {...livro, preco: livro.preco - (livro.preco * desconto)}
    })
    return livrosComDesconto;
}

Todos os arquivos estão referenciados no html.

<script src="/app/main.js"></script>  
  <script src="/app/metodoForEach.js"></script> 
  <script src="/app/metodoMap.js"></script>

</body>

</html>

Obrigado!!