Заменить данные в HTML из статичных на данные из массива

У меня есть массив данных, который был приведен к типу flatten array, и сверстанное меню. Мне необходимо заменить данные в меню из статичных на данные из массива - учитывая то, что массив может обновляться динамически (уровней вложенности всегда будет только максимум 3, но могут добавится новые элементы). Я пробовала вывести данные через innerHTML, но результата нет. Как можно это сделать?

Кода много, поэтому есть ссылка на сodepen: https://codepen.io/tomavl/pen/yLKdKJY

<div class="funding-categories">
  <div class="funding-categories__topbar funding-categories__showmore">
    <button class="toggle-menu" type="button">
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 11V29" stroke="#999999" stroke-width="1.5" stroke-linecap="round" />
        <path d="M11 20H29" stroke="#999999" stroke-width="1.5" stroke-linecap="round" />
        <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#E6E6E6" />
      </svg>
      Выбрать ещё
    </button>
  </div>

  <div class="funding-categories__menu-wrapper">
    <div class="funding-categories__list-wrapper">
      <ul class="menu funding-categories__level-1">
        <li>
          <a href="" class="nested">Дети</a>
          <ul class="sub-menu funding-categories__level-2">
            <li>
              <a href="" class="nested">Имеющие редкие заболевания</a>
              <ul class="sub-menu funding-categories__level-3">
                <li>
                  <a href="">Spina Bifida</a>
                </li>
                <li>
                  <a href="">Буллёзный эпидермолиз</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="">С инвалидностью</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="" class="nested">Профессиональные сообщества</a>
        </li>
      </ul>
    </div>
    <div class="funding-categories__list-wrapper">
      <button type="button" class="back-one-level">
        <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.47412 11L2.49141 6L7.47412 1" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <span>Back</span>
      </button>
      <div class="sub-funding-categories__menu-wrapper"></div>
    </div>
    <div class="funding-categories__list-wrapper">
      <button type="button" class="back-one-level">
        <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.47412 11L2.49141 6L7.47412 1" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        </svg>

        <span>Back</span>
      </button>
      <div class="sub-funding-categories__menu-wrapper"></div>
    </div>
  </div>
const data = [
  {
    id: 1,
    name: "Дети",
    groups: [
      {
        id: 2,
        name: "Имеющие редкие заболевания",
        groups: [
          {
            id: 3,
            name: "Spina Bifida",
            groups: []
          },
          {
            id: 4,
            name: "Буллёзный эпидермолиз",
            groups: []
          }
        ]
      },
      {
        id: 5,
        name: "С инвалидностью",
        groups: []
      }
    ]
  },
  {
    id: 6,
    name: "Профессиональные сообщества",
    groups: []
  }
];

const m = data;

// здесь будет flat array из массива данных
let arr = [];

// для каждой группы вызываем рекурсивную функцию
for (let group of m) {
  recurgroups(group, 0);
}

// RECURSIVE FUNCTION
function recurgroups(group, parentID) {
  arr.push({
    name: group.name,
    id: group.id,
    parentID: parentID
  });

  if (group.hasOwnProperty("groups") && group.groups.length > 0) {
    for (let subgroup of group.groups) {
      recurgroups(subgroup, group.id);
    }
  }
}

//menu code
const pageHeader = document.querySelector(".funding-categories");
const toggleMenu = pageHeader.querySelector(".toggle-menu");
const menuWrapper = pageHeader.querySelector(
  ".funding-categories__menu-wrapper"
);
const level1Links = pageHeader.querySelectorAll(
  ".funding-categories__level-1 > li > a"
);
const listWrapper2 = pageHeader.querySelector(
  ".funding-categories__list-wrapper:nth-child(2)"
);
const listWrapper3 = pageHeader.querySelector(
  ".funding-categories__list-wrapper:nth-child(3)"
);
const subMenuWrapper2 = listWrapper2.querySelector(
  ".sub-funding-categories__menu-wrapper"
);
const subMenuWrapper3 = listWrapper3.querySelector(
  ".sub-funding-categories__menu-wrapper"
);
const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
const isVisibleClass = "is-visible";
const isActiveClass = "is-active";

toggleMenu.addEventListener("click", function () {
  menuWrapper.classList.toggle(isVisibleClass);
  if (!this.classList.contains(isVisibleClass)) {
    listWrapper2.classList.remove(isVisibleClass);
    listWrapper3.classList.remove(isVisibleClass);
    const menuLinks = menuWrapper.querySelectorAll("a");
    for (const menuLink of menuLinks) {
      menuLink.classList.remove(isActiveClass);
    }
  }
});

for (const level1Link of level1Links) {
  level1Link.addEventListener("click", function (e) {
    const siblingList = level1Link.nextElementSibling;
    if (siblingList) {
      e.preventDefault();
      this.classList.add(isActiveClass);
      const cloneSiblingList = siblingList.cloneNode(true);
      subMenuWrapper2.innerHTML = "";
      subMenuWrapper2.append(cloneSiblingList);
      listWrapper2.classList.add(isVisibleClass);
    }
  });
}

listWrapper2.addEventListener("click", function (e) {
  const target = e.target;
  if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) {
    const siblingList = target.nextElementSibling;
    e.preventDefault();
    target.classList.add(isActiveClass);
    const cloneSiblingList = siblingList.cloneNode(true);
    subMenuWrapper3.innerHTML = "";
    subMenuWrapper3.append(cloneSiblingList);
    listWrapper3.classList.add(isVisibleClass);
  }
});

for (const backOneLevelBtn of backOneLevelBtns) {
  backOneLevelBtn.addEventListener("click", function () {
    const parent = this.closest(".funding-categories__list-wrapper");
    parent.classList.remove(isVisibleClass);
    parent.previousElementSibling
      .querySelector(".is-active")
      .classList.remove(isActiveClass);
  });
}



/*this code i'm trying to use to display elemnts inside the menu*/

const level0 = arr.filter(item => item.parentID == 0).map(item => '<div data-id="' + item.id + '" value="' + item.name + '">' + item.name + '</div>')

document.querySelector('s1').innerHTML = '<div value="0">Select an item</div>' + level0.join('')


document.querySelector('s1').addEventListener('change', function() {
  let thisID = this.divs[this.selectedIndex].getAttribute('data-id')

  const level1 = arr.filter(item => item.parentID == thisID).map(item => '<div data-id="' + item.id + '" value="' + item.name + '">' + item.name + '</div>')

  document.querySelector('s2').innerHTML = '<div value="0">Select an item</div>' + level1.join('')

})


document.querySelector('s2').addEventListener('change', function() {
  let thisID = this.divs[this.selectedIndex].getAttribute('data-id')

  const level2 = arr.filter(item => item.parentID == thisID).map(item => '<div data-id="' + item.id + '" value="' + item.name + '">' + item.name + '</div>')

  document.querySelector('s3').innerHTML = '<div value="0">Select an item</div>' + level2.join('')

})