Bootstrap5 ссылка внутри аккордеона

Имеется блок-аккордеон, в шапке .accordion-header имеется кнопка, по которой раскрывается список, но при этом сама кнопка содержит ссылку. При попытке нажать на ссылку срабатывает действие по раскрытию списка(т.е. срабатывает кнопка), хотя браузер подсвечивает ссылку. Как сделать так, чтобы при нажатии на ссылку был переход по ссылку, а при нажатии на кнопку(которая эту ссылку содержит) срабатывало раскрытие?

<div class="accordion accordion-flush" id="ThemesList">
                {% for t in themes%}
                  <div class="accordion-item rounded border border-dark mt-1">
                    <h2 class="accordion-header" id="{{t.title_url}}">
                            <button class="accordion-button {%if t.title_url == theme.title_url%}{%else%}collapsed{%endif%}" type="button" data-bs-toggle="collapse" data-bs-target="#flush-{{t.title_url}}" aria-expanded="false" aria-controls="flush-{{t.title_url}}" role="button">
                                <a class="nav-link" href="{%url 'tutorial:theory' t.title_url%}">
                                    {{t.title}}
                                </a>
                            </button>
                 </div>
</div>