can't get bootstrap.collapse() to toggle the collapse of my element when another item is currently collapsing

[broskees]

Well I gave my other question a go and almost got it working. Eventually got stuck on part of the API. I've included an explanation video here.

TLDR: I can't get new bootstrap.collapse() to toggle the collapse of my element when another item is currently collapsing. I want to be able to interrupt a collapse with another one.

What do you guys think?

Here's my code (I'm using gatsby):

import React from "react"

import { useStaticQuery, graphql } from "gatsby"

import * as bootstrap from 'bootstrap'

const Navigation = ({data}) => {
  const nav = useStaticQuery(graphql`
  query NavQuery {
    allMarkdownRemark(
      sort: {fields: [frontmatter___tags, frontmatter___chapter], order: DESC}
    ) {
      edges {
        node {
          id
          frontmatter {
            path
            chapter
            title
            date
            tags
            chapter
            chapter_path
            chapter_type
          }
        }
      }
    }
  }
  `)

  // finds siblings and returns them in an array
  const getSiblings = (elem) => {

    // Setup siblings array and get the first sibling
    const siblings = [];
    let sibling = elem.parentNode.firstChild;
  
    // Loop through each sibling and push to the array
    while (sibling) {
      if (sibling.nodeType === 1 && sibling !== elem) {
        siblings.push(sibling);
      }
      sibling = sibling.nextSibling
    }
  
    return siblings;
  
  };

  //onMouseEnter & onMouseLeave events for navigation expansion
  const hoverCollapse = (event, triggerType) => {
    const mouseLeave = (elem) => {
      if (!elem.children[1].classList.contains("show") && !elem.children[1].classList.contains("collapsing")) return; // break if doesn't have visible children
  
      elem.children[0].setAttribute('aria-expanded', 'false');
      elem.children[0].classList.add('collapsed');
  
      new bootstrap.Collapse(
        elem.children[1],
        {
          toggle: true,
          show: false,
          hide: true
        }
      )
      console.log(elem);
      console.log("^ should be collapsed")
      
    }
  
    const mouseEnter = (elem) => {
      if (elem.children[1].classList.contains("show") || elem.children[1].classList.contains("collapsing")) return; // break if doesn't have hidden children
  
      elem.children[0].setAttribute('aria-expanded', 'true');
      elem.children[0].classList.remove('collapsed');
  
      new bootstrap.Collapse(
        elem.children[1],
        {
          toggle: true,
          show: true,
          hide: false
          //parent: '#nav-collapse-parent'
        }
      );
    }

    const collapseSiblings = (elem) => {
      getSiblings(elem).forEach(sibling => {
        if (!sibling.classList.contains("collapse-trigger")) return; // break if isn't a collapse element
        mouseLeave(sibling)
      })
    }
    
    if (!event.target.classList.contains("collapse-trigger")) return; // break if isn't a collapse element

    if(triggerType == "onMouseLeave"){
      mouseLeave(event.target)
      collapseSiblings(event.target)
    } else if (triggerType = "onMouseEnter") {
      mouseEnter(event.target)
      collapseSiblings(event.target)
    }
  }

  // Looping and iteration traversing to reorganize nav items into a nested form
  const navData = {};

  nav.allMarkdownRemark.edges.map((post, index) => {
    if(post.node.frontmatter.chapter) {
      if(!navData[post.node.frontmatter.chapter]) {
        navData[post.node.frontmatter.chapter] = {};
        navData[post.node.frontmatter.chapter]['path'] = post.node.frontmatter.chapter_path;
      }
      if(!navData[post.node.frontmatter.chapter]['children']) {
        navData[post.node.frontmatter.chapter]['children'] = {};
      }
      navData[post.node.frontmatter.chapter]['children'][post.node.frontmatter.title] = post.node.frontmatter.path;
    }else{
      navData[post.node.frontmatter.title] = {};
      navData[post.node.frontmatter.title]['path'] = post.node.frontmatter.path;
    }
  });  

  // the render
  return (
    <aside class="bd-sidebar">
      <nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation">
        <ul class="list-unstyled mb-0 py-3 pt-md-1" id="nav-collapse-parent">

          {Object.keys(navData).map((key) => {
            if (navData[key]['children']!==undefined) {
              return (
                <li 
                  class="collapse-trigger"
                  style={{marginBottom: 5 + 'px', paddingBottom: 5 + 'px'}}
                  onMouseEnter={(e) => hoverCollapse(e, 'onMouseEnter')}
                  onMouseLeave={(e) => hoverCollapse(e, 'onMouseLeave')}
                  data-bs-parent="#nav-collapse-parent"
                  data-bs-target={"#"+key.replaceAll(' ', '-').toLowerCase()}>
                  <a
                    aria-expanded="false"
                    href={navData[key]['path']}
                    class="btn d-inline-flex align-items-center rounded collapsed text-start"
                    id={key.replaceAll(' ', '-').toLowerCase()+'-source'}>
                    {key}
                  </a>
                  <div class="collapse collapse-target" id={key.replaceAll(' ', '-').toLowerCase()} style={{margin: 5 + 'px'}}>
                    <ul class="list-unstyled fw-normal pb-1 small" style={{marginBottom: 5 + 'px'}}>
                      {Object.keys(navData[key]['children']).map((innerKey) => {
                        return (
                          <li><a href={navData[key][innerKey]} class="d-inline-flex align-items-center rounded">{innerKey}</a></li>
                        )
                      })}
                    </ul>
                  </div>
                </li>
              )
            } else {
              return (
                <li class="mb-1">
                  <a
                    href={navData[key]['path']}
                    class="d-inline-flex align-items-center rounded text-start"
                    id={key.replaceAll(' ', '-').toLowerCase()+'-source'}>
                    {key}
                  </a>
                </li>
              )
            }   
          })}

        </ul>
      </nav>
    </aside>
  )
}

export default Navigation