下面是这个jQuery片段

$("#navbarSupportedContent").on("click", "li", function (e) {
  $("#navbarSupportedContent ul li").removeClass("active");
  $(this).addClass("active");
});

我试图将上面的代码片段转换为React.js代码。但是，它是不正确的。我甚至无法通过删除active类部分，这是上面代码片段的第一行。

const tabsNewAnimRef = useRef(null);
const horiSelectorRef = useRef(null);
const activeItemNewAnimRef = useRef(null);

tabsNewAnimRef.current.addEventListener("click", () => {
            let children = tabsNewAnimRef.current.children;

            // Convert an HTMLCollection to an Array
            let array = [...children];

            let childrenArray = array[0].children;
            console.log(childrenArray[2].classList[1].remove('active'));
});

<div className="collapse navbar-collapse" id="navbarSupportedContent" ref={tabsNewAnimRef}>
                <ul className="navbar-nav ml-auto">
                    <div className="hori-selector" ref={horiSelectorRef}>
                        <div className="left"></div>
                        <div className="right"></div>
                    </div>
                    <li className="nav-item" ref={activeItemNewAnimRef}>
                        <a className="nav-link" href="javascript:void(0);"><i className="fas fa-tachometer-alt"></i>Dashboard</a>
                    </li>
                    <li className="nav-item active" ref={activeItemNewAnimRef}>
                        <a className="nav-link" href="javascript:void(0);"><i className="fas fa-house-user"></i>Home</a>
                    </li>
                    <li className="nav-item" ref={activeItemNewAnimRef}>
                        <a className="nav-link" href="javascript:void(0);"><i className="far fa-clone"></i>Components</a>
                    </li>
                    <li className="nav-item" ref={activeItemNewAnimRef}>
                        <a className="nav-link" href="javascript:void(0);"><i className="far fa-calendar-alt"></i>Calendar</a>
                    </li>
                </ul>
</div>

我试着寻找各种可能的方法来做到这一点，但我总是遇到失败。我该如何做到这一点呢？