[Bug] Quando clico em livros disponiveis não carrega nenhum livro

O código estava igual o do professor mas mesmo assim não está funcionando antes quando coloquei o console para tentar vizualizar o erro aparecia empty string em categoria, depois fui no html e adicionei o value="disponivel" em livros diponiveis pois antes nao tinha mas começou a aparecer varios erros no console com se quantidade não fosse definido.

const botoes = document.querySelectorAll('.btn');
botoes.forEach(btn => btn.addEventListener('click', filtrarLivros));
function filtrarLivros() {
    const elementoBtn = document.getElementById(this.id);
    const categoria = elementoBtn.value;

    let livrosFiltrados = categoria == 'disponivel' ? filtrarPorDisponibilidade() 
    : filtrarPorCategoria(categoria);

     exibirOsLivrosNaTela(livrosFiltrados);
    if (categoria == 'disponivel') {
        exibirValorTotaDosLivrosDisponiveisNaTela();
    }
};

function filtrarPorCategoria(categoria) {
    console.table(categoria);
    return livros.filter(livro => livro.categoria == categoria);
}

function filtrarPorDisponibilidade() {
    console.table(quantidade);
    return livros.filter(livro => livro.quantidade > 0);
}

function exibirValorTotaDosLivrosDisponiveisNaTela() {
    elementoComValorTotalDeLivrosDisponiveis.innerHTML = `
    <div class="livros__disponiveis">
      <p>Todos os livros disponíveis por R$ <span id="valor">299,00</span></p>
    </div>
    `
};

HTML

 <section class="banner"></section>
  <nav class="wrap">
    <ul class="nav">
      <li><button class="btn btn-front" href="#" id="btnFiltrarLivrosFront" value="front-end">LIVROS DE
          FRONT-END</button>
      </li>
      <li><button class="btn btn-back" href="#" id="btnFiltrarLivrosBack" value="back-end">LIVROS DE BACK-END</button>
      </li>
      <li><button class="btn btn-dados" href="#" id="btnFiltrarLivrosDados" value="dados">LIVROS DE DADOS</button></li>
      <li><button class="btn btn-disponiveis" href="#" id="btnLivrosDisponiveis" value="disponivel">LIVROS DISPONÍVEIS</button></li>
      <li><button class="btn btn-ordenacao" href="#" id="btnOrdenarPorPreco">ORDENAR POR PREÇO</button></li>
    </ul>
  </nav>

JS MAIN

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(livros)
};

ERRO QUE APARECE NO CONSOLE

 Uncaught ReferenceError: quantidade is not defined
    filtrarPorDisponibilidade http://127.0.0.1:5500/app/metodoFilter.js:22
    filtrarLivros http://127.0.0.1:5500/app/metodoFilter.js:7
    EventListener.handleEvent* http://127.0.0.1:5500/app/metodoFilter.js:2
    <anonymous> http://127.0.0.1:5500/app/metodoFilter.js:2
3 metodoFilter.js:22:5