[Dúvida] Card 2 e 3 nao abrem o Canvas

<section class="py-5">
      <h2 class="text-center fw-bold pb-1">Nossos serviços</h2>

      <div class="container d-flex justify-content-around flex-wrap">

        <div class="card m-4" style="width: 20rem;">
          <img src="./assets/cafe-card.png" class="card-img-top"
            alt="Balcão de padaria tradicional com alimentos diversos">
          <div class="card-body">
            <h5 class="card-title py-2 fw-bold">Café & Bistrô</h5>
            <p class="card-text">Nosso bistrô oferece uma ampla variedade de cafés, smoothies, deliciosos
              salgados e sobremesas. Uma excelente opção para quem busca um lugar tranquilo e
              aconchegante.</p>
            <a href="#" class="btn botao-padrao w-100 fw-bold" data-bs-toggle="offcanvas" data-bs-target="#canvas-1"
              aria-controls="offcanvasRight">Quero detalhes</a>
          </div>
        </div>

        <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>

mesmo apos varias tentativas, e efetuar um Ctrl + C Ctrl + V no codigo do professor, apos clicar em "Quero detalhes' o Canvas nao abre apenas para o segundo e terceiro card, caso eu mude o ID do segundo card para canvas-1 ele executa normalmente, porem quando retorno para canvas-2, ele ja nao abre mais.