twitching animation when using collapse

[mksmvnv]

twitching animation when using collapse.
it seems like I set everything up correctly, but after opening additional information, the animation starts to twitch.

<div class="text-center m-4">
    <a href="#collapseToggle" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseToggle">
        {% translate "Подробнее" %}
    </a>
</div>
<div class="collapse mt-3" id="collapseToggle">
    {% if user.profile.gender %}
        {% if user.profile.gender == 'М' %}
            <div class="d-flex justify-content-center m-2">
                <i class="bi bi-gender-male"></i>
            </div>
        {% elif user.profile.gender == 'Ж' %}
            <div class="d-flex justify-content-center m-2">
                <i class="bi bi-gender-female"></i>
            </div>
        {% else %}
            <div class="d-flex justify-content-center m-2">
                <i class="bi bi-gender-ambiguous"></i>
            </div>
        {% endif %}
    {% endif %}
    {% if user.profile.age %}
        <p class="text-center">{{ user.profile.age }} лет</p>
    {% endif %}
    {% if user.profile.profession %}
        <p class="text-center">{{ user.profile.profession }}</p>
    {% endif %}
</div>