Right Offcanvas not working when inside Navbar

Question

I want it so that when you press on the Profile button thingy, an offcanvas appears on the right. However, right now it doesn't fully work and I can't figure out why. On click, it only darkens the screen, but nothing pops up.

<li class="nav-item">
    <a class="nav-link active" href="#offcanvasRight" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"><i class="fas fa-user-circle me-1"></i>Profile</a>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight">
        <div class="offcanvas-header">
            <h4 class="offcanvas-title" id="offcanvasRightLabel">Profile</h4>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <a href="/logout" class="btn btn-success"><i class="fa fa-sign-out-alt me-1"></i>Log Out</a>
        </div>
    </div>
</li>

Full code: https://pastebin.com/jexwE0tA

I tried putting it anywhere else (except for the navbar) and it works perfectly. I also tried different positioning for the offcanvas, but still nothing. Only darkens, nothing pops up.