Dropdown menu transition Bootstrap 5

I’ve been trying to make a height transition in my dropdown menu made in Bootstrap 5 with hover, the transition is not working, any help on this?

html:

<li class="nav-item dropdown position-static me-lg-3">
        <a class="nav-link" role="button">Temas<button type="button" class="btn dropdown-toggle 
            dropdown-toggle-split p-0" data-bs-toggle="dropdown" aria-expanded="false">
        </button></a>
        
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <a class="dropdown-item" href="#">Separated link</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
        </div>
</li>

CSS

.dropdown .dropdown-menu {
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
 }
    
 .dropdown-menu.show {
      margin-top: 0vh;
      width: 40%;
      margin-left: 38vw;
 }
    
 .dropdown:hover .dropdown-menu {
      display: flex;
      flex-wrap: wrap;
      transform: scaleY(1)
 }
    
 .dropdown-item {
      width: 25% !important;
 }

And this is Jquery function to make the hover work as a click on bootstrap5 dropdown

$('.dropdown').on("mouseenter", () => {
    $('.dropdown > a > button').addClass('show')
    $('.dropdown > a > button').attr("aria-expanded","true");
    $('.dropdown > div').addClass('show')
    $('.dropdown > div').attr("data-bs-popper","none");
  })
  
  $('.dropdown').on("mouseleave", () => {
    $('.dropdown > a > button').removeClass('show')
    $('.dropdown > a > button').attr("aria-expanded","false");
    $('.dropdown > div').removeClass('show')
    $('.dropdown > div').removeAttr("data-bs-popper","none");
  })
});

I alredy try the answers on this question but none of them are working