[Dúvida] Meu card 2 e 3 não abrem | Bootstrap 5: novos recursos e práticas recomendadas de HTML, CSS e JavaScript

Ja mudei algumas opções, mas mesmo assim não funciona. Onde estou errando ? Códigos dos cards

<div class="card m-4" style="width: 20rem;">
        <img src="./assets/buffet-card.png" class="card-img-top" alt="Mesa de buffet com alimentos diversos">
        <div class="card-body">
          <h5 class="card-title fw-bold">Buffet</h5>
          <p class="card-text">Buffet e catering personalizado para eventos, produções e celebrações. Com
            um menu variado e adaptável às preferências do cliente, atendimento atencioso e
            profissional.</p>
          <a href="#" class="btn botao-padrao w-100 fw-bold mt-3" data-bs-toggle="offcanvas"
          data-bs-target="#canvas-2" aria-controls="offcanvasRight">Quero detalhes</a>
        </div>
      </div>

      <div class="card m-4" style="width: 20rem;">
        <img src="./assets/delivery-card.png" class="card-img-top" alt="Caixa aberta armazenando comidas diversas">
        <div class="card-body">
          <h5 class="card-title fw-bold">Delivery</h5>
          <p class="card-text">Para quem deseja desfrutar no conforto de casa, oferecemos delivery dos
            produtos. Com o mesmo cardápio variado de sempre, sem perder nosso sabor e padrão de
            qualidade.</p>
          <a href="#" class="btn botao-padrao w-100 fw-bold mt-3" data-bs-toggle="offcanvas"
          data-bs-target="#canvas-3" aria-controls="offcanvasRight">Quero detalhes</a>
        </div>
      </div>
    </div>
  </section>
  
  <!-- Canvas 2 -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="canvas-2" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasRightLabel">Buffet</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <div class="accordion" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed botao-padrao" type="button" data-bs-toggle="collapse"
              data-bs-target="#accordionEventos" aria-expanded="false" aria-controls="collapseOne">
              Eventos
            </button>
          </h2>
          <div id="accordionEventos" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              Organizamos buffet com cardápios variados e personalizados para casamentos, festas de
              aniversário e outros eventos!
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed botao-padrao" type="button" data-bs-toggle="collapse"
              data-bs-target="#accordionCatering" aria-expanded="false" aria-controls="collapseOne">
              Catering
            </button>
          </h2>
          <div id="accordionCatering" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              Oferecemos serviço de alimentação variada para coffee breaks, produções e bastidores.
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
      <!--canvas-3--> 
      <div class="offcanvas offcanvas-end" tabindex="-1" id="canvas-3" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasRightLabel">Delivery</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <div class="accordion" id="accordionDelivery"> <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed botao-padrao fw-bold" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseOne">
                  Encomendas para eventos
                </button>
              </h2>

Olá Aline! Tudo bom?!

Verifique alguns pontos:

Verifique se você incluiu todos os scripts necessários para o funcionamento dos componentes do bootstrap:


<head>
  <!-- Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>

Certifique-se que todos os id's e classes correspondente aos data-bs-target e aria-controls estão corretos:

<a href="#" class="btn botao-padrao w-100 fw-bold mt-3" data-bs-toggle="offcanvas" data-bs-target="#canvas-2" aria-controls="canvas-2">Quero detalhes</a>

<div class="offcanvas offcanvas-end" tabindex="-1" id="canvas-2" aria-labelledby="offcanvasRightLabel">
  <!-- conteúdo do canvas -->
</div>

Qualquer dúvida, estamos a disposição!