Navbar expanding on page load

Expected behavior

Collapse element not expanding when I declare it.

Actual behavior

Collapse element expands when I declare it.

Resources (screenshots, code snippets etc.)

UPDATE: I created a minimal example in a snippet in the second reply. I left the original question here for historic reasons. I'd be glad to change it if this kind of post-reply doesn't follow the forum guidelines.

I could isolate the problem to this script (not loading it removes the problem), which makes me think that the Collapse object expands when declaring it.

import { Collapse } from 'mdb-ui-kit';
import breakpoint from '../common/breakpoint';
import { navElements, cards } from './consts';

const navCollapse = new Collapse(document.getElementById('navbarSupportedContent'));

function scrollCollapsingNav(elementToScroll) {
  elementToScroll.scrollIntoView();
  if (window.innerWidth >= breakpoint.md) {
    return;
  }
  navCollapse.hide();
}

export default function scrollClick() {
  navElements[0].addEventListener('click', () => scrollCollapsingNav(document.body));
  for (let i = 0; i < cards.length; i++) {
    navElements[i + 1].addEventListener('click', () => scrollCollapsingNav(cards[i]));
  }
}

Just for the reference, the code of the navbar in the body is this:

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top shadow-4">
  <div class="container-fluid">
    <!-- Logo -->
    <div class="navbar-brand" onclick="document.body.scrollIntoView()">
      <img src="https://mdbcdn.b-cdn.net/img/Logo1.svg" alt="Logo de Asociación Cultural Silbo Gomero" />
    </div>

    <!-- Toggle button -->
    <button
      class="navbar-toggler"
      type="button"
      data-mdb-toggle="collapse"
      data-mdb-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Abrir menú"
    >
      <i class="fas fa-bars"></i>
    </button>

    <!-- Elements -->
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item mx-1">
          <a id="navInicio" class="nav-link active" href="#!">Inicio</a>
        </li>
        <li class="nav-item mx-1">
          <a id="navQuienesSomos" class="nav-link" href="#!">Quiénes somos</a>
        </li>
        <li class="nav-item mx-1">
          <a id="navContacto" class="nav-link" href="#!">Contacto</a>
        </li>
        <li class="nav-item mx-1">
          <a id="navNoticias" class="nav-link" href="#!">Noticias</a>
        </li>
        <li class="nav-item mx-1">
          <a id="navGaleria" class="nav-link" href="#!">Galería de imágenes</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

I've been trying different things for a few hours and can't make it not expand when loading.