Bootstrap button not toggling on click event in my Django webapp

[uche-wealth]

I am using Bootstrap 5 for my Django app and have django-bootstrap5 v24.3 installed. The Bootstrap 5 docs says "Add data-bs-toggle="button" to toggle a button’s active state". However after adding it to my button, it does nothing. In fact, the button stops working and no toggle happens. I want to be able to toggle my button to active on a click event and for it to remain that way as long as I'm on that page. Do I need to add an extra JavaScript event to handle this? I'm thinking bootstrap should be able to handle this... I have popper.min.js and bootstrap.min.js scripts included. See MRE below:

<div class="container mt-3" style="text-align: center !important;">
<!-- Implement pagination -->
<div class="pagination">
    <span class="step-links">
        <a href="?page=1" class="btn btn-outline-primary" role="button" data-bs-toggle="button">1</a>
        {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}" class="btn btn-outline-primary" role="button">Prev</a>
        {% endif %}
    <span class="current">
    &nbsp;&nbsp;
    </span>
        {% if page_obj.has_next %}
            <a class="btn btn-outline-primary" href="?page={{ page_obj.next_page_number }}" role="button">Next</a>
        {% endif %}
        <a class="btn btn-outline-primary" href="?page={{ page_obj.paginator.num_pages }}" role="button">{{ page_obj.paginator.num_pages }}</a>
    </span>
</div>
</div>