What needs to be done to make the Bootstrap 5.3.0 Collapsible button show in this simple web page?

I've tried to create a simple web page that uses the Bootstrap (version 5.3.0) Collapsible and I cannot get it to work no matter what I try.
All I want is a Collapsible that 'holds' a few links in it which are shown when you click it.
But when that didn't work I simplified it to just a list of strings (code shown below) but the problem is still there.
The problem is that the Collapsible button does not show no matter what I try.
The <span class="navbar-toggler-icon"></span> is not visible. I've added 'X' to both sides
of it just so there is an indication where that invisible button is.
Anyone knows how to fix that, make the Collapsible button visible?
Thanks.
Here's the code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<header class="bg-primary text-white text-center py-3">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="left-header">
          <h3>Left Header</h3>
        </div>
      </div>
      <div class="col-md-4">
        <div class="central-header">
          <h3>Central Header</h3>
        </div>
      </div>
      <div class="col-md-4">
        <div class="right-header">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNav">
              X<span class="navbar-toggler-icon"></span>X
            </button>
        </div>
        <div class="collapse" id="collapsibleNav">
          <div class="card card-body">
            <ul class="nav">
              <li class="nav-item">Item 1</li>
              <li class="nav-item">Item 2</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<main class="container mt-4">
  <h2>Main Content</h2>
  <p>This is the main content of the page.</p>
</main>

<!-- end snippet -->

Try adding .navbar selector to the parent container: right-header navbar, because it's actually coming from that class (--bs-navbar-toggler-icon-bg), not the icon, the hamburger is actually a variable defined in .navbar, so by adding it to the parent it becomes accessible:

.navbar-toggler-icon {
    background-image: var(--bs-navbar-toggler-icon-bg);
}

<!-->
.navbar {
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<header class="bg-primary text-white text-center py-3">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="left-header">
          <h3>Left Header</h3>
        </div>
      </div>
      <div class="col-md-4">
        <div class="central-header">
          <h3>Central Header</h3>
        </div>
      </div>
      <div class="col-md-4">
        <div class="right-header navbar">
          <button class="navbar-toggler mx-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNav">
              X<span class="navbar-toggler-icon"></span>X
            </button>
        </div>
        <div class="collapse" id="collapsibleNav">
          <div class="card">
            <ul class="nav card-body">
              <li class="nav-item">Item 1</li>
              <li class="nav-item">Item 2</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<main class="container mt-4">
  <h2>Main Content</h2>
  <p>This is the main content of the page.</p>
</main>

<!-- end snippet -->