[Dúvida] Ordenação em categorias não funciona

Olá, boa noite! Estou com dificuldade para a realização do projeto desta aula. Não consigo compreender o que está errado no meu código para que a ordenação por categorias não funcione.

O código é o seguinte:

let books = [];
const endpointAPI = 'https://guilhermeonrails.github.io/casadocodigo/livros.json';

getSearchBook();

async function getSearchBook() {
    const res = await fetch(endpointAPI);
    books = await res.json();
    discountBooks = addDiscount(books);
    booksOnScreen(discountBooks);
}

// forEach para adicionar os livros registrados na API
const booksInsertElement = document.getElementById('livros');

function booksOnScreen(booksList) {
    booksList.forEach(book => {
        booksInsertElement.innerHTML += `
        <div class="livro">
            <img class="livro__imagens" src="${book.imagem}" alt="${book.alt}" />
            <h2 class="livro__titulo">
                ${book.titulo}
            </h2>
            <p class="livro__descricao">${book.autor}</p>
            <p class="livro__preco" id="preco">${book.preco.toFixed(2)}</p>
                <div class="tags">
                    <span class="tag">${book.categoria}</span>
                </div>
        </div>
        `
    });
}

// Map para aplicar descontos nos livros
function addDiscount(books) {
    const discount = 0.3;
    discountBooks = books.map(book => {
        return {...book, preco: book.preco - (book.preco * discount)}
    });
    return discountBooks;
}

// Filter para filtrar os livros por categoria
const buttons = document.querySelectorAll('.btn');
buttons.forEach(btn => btn.addEventListener('click', filterBooks));

function filterBooks() {
    const elementBtn = document.getElementById(this.id);
    const category = elementBtn.value;
    let filteredBooks = books.filter(livro => livro.categoria === category); 
    booksOnScreen(filteredBooks);
}

Muito obrigada!!