How do I hide bootstrap 5.3 offcanvas manually using js?

Question

What I need is to hide the offcanvas menu when clicked outside the inside the. There are three offcanvas elements and I made full width of the screen using CSS width; 100%. The're closing normally when using the close X button. But I need to hide them when user click outside the container. Here is the sample HTML:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1" aria-controls="offcanvas1">Offcanvas1</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas2" aria-controls="offcanvas2">Offcanvas2</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas3" aria-controls="offcanvas3">Offcanvas3</button>

   

<div class="offcanvas offcanvas-start show w-100 bg-transparent" tabindex="-1" id="offcanvas1" aria-labelledby="offcanvasLabel1">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <div class="container bg-white"> <!-- Clicking outside will close the offcanvas --> </div>
      </div>
    </div>
    
<div class="offcanvas offcanvas-start show w-100 bg-transparent" tabindex="-1" id="offcanvas2" aria-labelledby="offcanvasLabel2">
...
</div>

<div class="offcanvas offcanvas-start show w-100 bg-transparent" tabindex="-1" id="offcanvas3" aria-labelledby="offcanvasLabel3">
...
</div>

My javascript:

document.addEventListener("DOMContentLoaded", function () {


// Add event listener to close offcanvas on outside click
  const offcanvasElements = document.querySelectorAll(".offcanvas");

  if (offcanvasElements.length) {
    window.addEventListener("click", (event) => {

      offcanvasElements.forEach((offcanvas) => {
        const container = offcanvas.querySelector(".container");

        if (
          !container.contains(event.target) &&
          offcanvas.classList.contains("show")
        ) {
          const offcanvasId = offcanvas.getAttribute("id");
          if (offcanvasId) {
            const bsOffcanvas = new bootstrap.Offcanvas("#" + offcanvasId);
            bsOffcanvas.hide();

            console.log("Offcanvas hiding: " + offcanvasId);

          } else {
            console.error("Offcanvas ID not found.");
          }
        }
      });
    });
  }
});

Why the code isn't working as expected??