React中getElementsByTagName无法获取锚点标签（a标签）的问题求助

我现在在React项目里用列表项渲染角色对应的侧边栏菜单，想根据当前路由URL给匹配的菜单元素加样式，结果尝试用getElementsByTagName获取a标签时，总是拿到空列表，折腾了好久都没解决，来求助大家！

下面是我的相关代码：

菜单渲染部分 #

<ul className="metismenu list-unstyled" ref={refs} id="side-menu">
  {lists.map((item, index) => {
    return (
      <li key={index}>
        <Link to={item.link} className={item.submenu ? 'has-arrow' : ''}>
          <FeatherIcon icon={item.icon} />
          <span>{item.name}</span>
        </Link>
        {item.submenu ? <SubMenuList menu={item.submenu} /> : ''}
      </li>
    );
  })}
</ul>

菜单初始化函数 #

const initMenu = () => {
  new MetisMenu("#side-menu");
  let matchingMenuItem = null;
  const ul = document.getElementById("side-menu");
  console.log(ul);
  const childNodes = ul.childNodes;
  console.log(childNodes);
  console.log(refs.current);
  const items = refs.current.getElementsByTagName("a");
  console.log(items);
  for (let i = 0; i < items.length; ++i) {
    if (pathName === items[i].pathname) {
      matchingMenuItem = items[i];
      break;
    }
  }
  console.log(matchingMenuItem);
  if (matchingMenuItem) {
    activateParentDropdown(matchingMenuItem);
  }
};

运行后发现，console.log(items)输出的是空列表，完全拿不到预期的a标签元素。

补充说明：路由URL激活下拉菜单的逻辑 #

我原本计划拿到匹配的a标签后，调用下面这个函数来激活对应的父级下拉菜单：

const activateParentDropdown = useCallback((item) => {
  console.log(item);
  item.classList.add("active");
  const parent = item.parentElement;
  console.log(parent);
  const parent2El = parent.childNodes[1];
  if (parent2El && parent2El.id !== "side-menu") {
    parent2El.classList.add("mm-show");
  }
  if (parent) {
    parent.classList.add("mm-active");
    const parent2 = parent.parentElement;
    if (parent2) {
      parent2.classList.add("mm-show"); // ul tag
      const parent3 = parent2.parentElement; // li tag
      if (parent3) {
        parent3.classList.add("mm-active"); // li
        parent3.childNodes[0].classList.add("mm-active"); //a
        const parent4 = parent3.parentElement; // ul
        if (parent4) {
          parent4.classList.add("mm-show"); // ul
          const parent5 = parent4.parentElement;
          if (parent5) {
            parent5.classList.add("mm-show"); // li
            parent5.childNodes[0].classList.add("mm-active"); // a tag
          }
        }
      }
    }
    scrollElement(item);
    return false;
  }
  scrollElement(item);
  return false;
}, []);

有没有大佬能帮我看看问题出在哪？应该怎么调整才能正确获取到a标签并完成样式设置呢？

备注：内容来源于stack exchange，提问作者chethu