Transition not applying to div - vanilla js accordion

Question

I have some simple vanilla accordion and I'm not really sure why the CSS transition is not applying here? The divs have correct height, what is going on here?

(Cannot post because apparently my issue is mostly code, so this text is a dirty fix, sorry).

HTML (simplified version)

<div class="container">
  <ul>
    <li class="accordion-item">
      <button class="accordion-item__title">
        Title
      </button>
      <div class="accordion-item__body not-active">
        Body
      </div>
    </li>
  </ul>
</div>

JS

document.addEventListener('DOMContentLoaded', function () {

  const accordions = document.querySelectorAll('.block-accordion');

  if (typeof (accordions) !== 'undefined' && accordions != null) {

    //loop thorugh all acordions
    for (let a = 0; a < accordions.length; a++) {
      const accordion = accordions[a];
      const accordionItems = accordion.querySelectorAll('.accordion-item');

      //loop through all accordiond's items
      for (let i = 0; i < accordionItems.length; i++) {
        const accordionItem = accordionItems[i];

        //show first by default
        accordionItems[0].querySelector('.accordion-item__body').classList.remove('not-active');
        accordionItems[0].querySelector('.accordion-item__body').parentElement.classList.add('active');
        accordionItems[0].querySelector('.accordion-item__title').setAttribute("aria-expanded", true);

        //hide each accordion on click
        const accordionItemTitle = accordionItem.firstElementChild;

        accordionItemTitle.addEventListener('click', function toggleAccordion(e) {

          const accordionContent = accordionItem.querySelector('.accordion-item__body');
          accordionContent.style.height = "auto";

          if (accordionContent.previousElementSibling === e.target) {
            accordionContent.classList.toggle('not-active');
            accordionContent.parentElement.classList.toggle('active');

            if (accordionContent.classList.contains('not-active')) {
              accordionContent.style.height = '0px';
              accordionContent.previousElementSibling.setAttribute("aria-expanded", false);
            } else {
              accordionContent.style.height = accordionContent.clientHeight + 'px';
              accordionContent.previousElementSibling.setAttribute("aria-expanded", true);
            }
          }
        });
      }
    }
  }
});

SASS

.block-accordion {

  .active {
    display: block;
  }

  .not-active {
    display: none;
    transition: height 0.35s ease-in-out;
    overflow: hidden;
  }
}