Как исправить ошибку при сворачивании Collapse?

Question

[Ингвар Фон Бьёрк]

Есть такой вот код:

<div class="card-header" id="headingOne">
    <div class="mb-0">
        <button class="btn btn-link btn-accordion-info-header" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Состав и размер</button>
    </div>
    <div class="collapse" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionInfo">
        <div class="card-body accordion-card-content">
            <ul class="composition">
                <li class="composition__item">Роза кустовая пионовидная 3 шт
                </li>
                <li class="composition__item">Альстромерия 2 шт
                </li>
                <li class="composition__item">Хризантема кустовая 3 шт
                </li>
                <li class="composition__item">Эустома (лизиантус) 2 шт
                </li>
                <li class="composition__item">Фисташки зелень 5 шт
                </li>
                <li class="composition__item">Озотамнус 2 шт
                </li>
                <li class="composition__item">Гербера мини 3 шт
                </li>
                <li class="composition__item">Пленка
                </li>
                <li class="composition__item">Лента
                </li>
            </ul>
        </div>
    </div>
</div>

При клике на buttonсвёрнутый элемент .collapse разворачивается вместе со всеми аномалиями, но при повторном клике элемент на мгновение сворачивается и снова принимает развёрнутое состояние. В итоге отследил что в .collapse не удаляется .show. Как это можно исправить?