Click/tap on the hamburger button in a collapsable navbar does not work and the nav-items do not appear

Question

Given the following nav in my rails 7 app using bootstrap 5.3.3 when the hamburger button does appear as intended in mobile resolution and when I click/tap the button nothing happens (no behaviour) and the expected nav-items do not appear.

1. Navbar according to bootstrap 5.3.3 classes :

<header class ="mb-5 header">
  <nav class="navbar navbar-expand-md bg-dark
              sticky-top border-bottom border-body" data-bs-theme="dark">
  <div class="container">
    <%= link_to "WCSLUX", root_path, id: "logo", class: "navbar-brand"  %>
    <button type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarNav" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><%= link_to "Home",  root_path,
        class: "nav-link" %></li>
        <li class="nav-item"><%= link_to "Westies", westies_path,
        class: "nav-link" %></li>
        <li class="nav-item"><%= link_to "Community", community_path,
        class: "nav-link" %></li>
        <li class="nav-item"><%= link_to "Contact", contact_path,
        class: "nav-link" %></li>
      </ul>
    </div>
  </div>
  </nav>
</header>

Gem file

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.1.2"

gem "rails",           "7.0.4"
gem "bootstrap"
gem "sassc-rails",     "2.1.2"
gem "sprockets-rails", "3.4.2"
gem "importmap-rails", "1.1.0"
gem "turbo-rails",     "1.1.1"
gem "stimulus-rails",  "1.0.4"
gem "jbuilder",        "2.11.5"
gem "puma",            "5.6.4"
gem "bootsnap",        "1.12.0", require: false


group :development, :test do
  gem "sqlite3", "1.4.2"
  gem "debug",   "1.5.0", platforms: %i[ mri mingw x64_mingw ]
end

group :production do
  gem "pg", "1.3.5"
  gem "aws-sdk-s3", "1.114.0", require: false
end

2. importmap.rb

pin "popper", to: 'popper.js', preload: true  
pin "bootstrap", to: 'bootstrap.min.js', preload: true

3. app/javascript/application.js

//= require popper  
//= require bootstrap-sprockets

import "popper"  
import "bootstrap"

4.app/assets/config/manifest.js

//= link_tree ../images  
//= link_directory ../stylesheets .css

5. initialisers/assets.rb

Rails.application.config.assets.version = "1.0"  
Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )

When I click/tap the hamburger button I should see the expected nav-items on the right of the nav bar :

   
        <li class="nav-item"><%= link_to "Home",  root_path,
        class: "nav-link" %></li>
        <li class="nav-item"><%= link_to "Westies", westies_path,
        class: "nav-link" %></li>
        <li class="nav-item"><%= link_to "Community", community_path,
        class: "nav-link" %></li>
        <li class="nav-item"><%= link_to "Contact", contact_path,
        class: "nav-link" %></li>
      

I would like to avoid the cdn script kind of solution. Also, I want my nav items to appear to the right of the nav bar.