Аккордеон закрывается сразу после открытия с попутным ветром css

У меня есть следующий элемент аккордеона:

<div class = "accordion-item mb-5 overflow-hidden rounded-lg border border-jacarta-100 dark:border-jacarta-600">
    <h2 class = "accordion-header" id = "faq-heading-1">
        <button class = "accordion-button relative flex w-full items-center justify-between bg-white px-4 py-3 text-left font-display text-jacarta-700 dark:bg-jacarta-700 dark:text-white" type = "button" data-bs-toggle = "collapse" data-bs-target = "#faq-1" aria-expanded = "false" aria-controls = "faq-1">
            <span>What is tax and legal advisory?</span>
            <svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" width = "24" height = "24" class = "accordion-arrow h-4 w-4 shrink-0 fill-jacarta-700 transition-transform dark:fill-white">
            <path fill = "none" d = "M0 0h24v24H0z"></path>
            <path d = "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"></path>
            </svg>
        </button>
    </h2>
    <div id = "faq-1" class = "accordion-collapse" aria-labelledby = "faq-heading-1" data-bs-parent = "#accordionFAQ">
        <div class = "accordion-body border-t border-jacarta-100 bg-white p-4 dark:border-jacarta-600 dark:bg-jacarta-700">
            <p class = "dark:text-jacarta-200">Learn how to create your very first NFT and how to create your NFT collections. Unique.
            </p>
        </div>
    </div>
</div>

Этот пункт закрывается сразу после открытия:

Я ожидаю увидеть это:

Я определил, что отмена выбора следующих функций css через инспектор браузера дает мне то, что я хочу:

По какой-то причине класс коллапса добавляется дважды, когда я переключаю аккордеон. Почему css создается в таблице стилей и оба встроены? У меня только один файл и он отдельный. Как я могу исправить эту кнопку-аккордеон?