"functions declared within loops referencing an outer scoped variable may lead to confusing semantics" can someone help to see whats the problem here?

Question

this is a function to open a sub menu in a navbar, it works on desktop but on mobile it doesnt

const mostrarHijos = () => {
  for (let i = 0; i < subMenu.length; i++) {

    if (window.innerWidth < 992) {
      let subMenuItem = document.querySelectorAll(".sub-menu")[i];
      let hijos = document.querySelectorAll(".children")[i];

      subMenuItem.addEventListener("click", () => {
        hijos.classList.toggle("children-expand");
        hijos.classList.toggle("children-retread");
      });
    }
    if (window.innerWidth >= 992) {
      let subMenuItem = document.querySelectorAll(".sub-menu")[i];
      let hijos = document.querySelectorAll(".children")[i];

      subMenuItem.addEventListener("mouseover", () => {
        hijos.classList.add("children-expand");
        hijos.classList.remove("children-retread");
      });

      subMenuItem.addEventListener("mouseleave", () => {
        hijos.classList.remove("children-expand");
        hijos.classList.add("children-retread");
      });
    }
  }

  if (window.innerWidth >= 992) {
    menuRes.classList.remove("expand");
    menuRes.classList.remove("hide");
  }
};