[Sugestão] Ordenando sempre o mesmo array

Uma vez que o array "livros" é preenchido somente no carregamento da página (através do fetch), o método de ordenação está sempre ordenando a lista inicial de livros, desconsiderando os filtros desenvolvido para os botões. Com isso, no código abaixo, dentro da função "ordenarLivros", desenvolvi uma lógica em que vejo e monto um novo array apenas com os livros que estão visíveis na tela.

Não sei dizer se essa seria a melhor lógica, caso tenha alguém que fez a mesma coisa, porém de outro jeito e queria compartilhar.

const btnOrdenarPorPreco = document.getElementById('btnOrdenarPorPreco');

btnOrdenarPorPreco.addEventListener('click', () => {
    ordenarLivros();
});

function ordenarLivros() {
    let listaAtual = document.querySelectorAll('.livro');
    let listaTratada = [];    

    listaAtual.forEach(elemento => {
        
        listaTratada.push(
            {
                "titulo": elemento.querySelector('.livro__titulo').outerText,
                "preco": parseFloat(elemento.querySelector('.livro__preco').outerText.substr(3)),
                "autor": elemento.querySelector('.livro__descricao').outerText,
                "imagem": elemento.querySelector('.livro__imagens').src,
                "alt": elemento.querySelector('.livro__imagens').alt,
                "categoria": elemento.querySelector('.tag').outerText
            }
        );
        
    });

    secaoLivros.innerHTML = '';
    const livrosOrdenados = listaTratada.sort((a, b) => a.preco - b.preco);
    exibirOsLivrosNaTela(livrosOrdenados);

}