react/next.js: как в подключаемом js-скрипте обратиться к элементу сайта через имя класса?

Есть реакт-компонент "элемент навигации", внутри которого выводится изображение (стрелка). Таких изображений может быть сколько угодно. По нажатию это изображение, соседние с изображением элементы, которые до этого были visible=false, становятся видимы.

Изначально я эту логику реализовал в обычной вёрстке, где js-файл подключался как "<script src="main.js">", при этом всё работало. Но теперь скрипт нужно перенести в react/next.js-проект. Какой способ для этого самый адекватный? Я попробовал подключить js напрямую, но он перестал работать, не видит элемент с искомым классом, ошибка "Uncaught TypeError: Cannot read properties of null". Может нужно как-то переписать сам скрипт?

компонент next.js

const NavItem = ({children, href, text, sublist}) => {
    return (
        <li>
            <A href={href} text={text}/>
            {sublist ? <Image src={"/ico-arrow.svg"} width="30" height="30" className="icoExpand" /> : ""}
            {children}
        </li>
    );
};

js-скрипт, который работал в статичной вёрстке:

const expandButtonsArr = document.body.getElementsByClassName("icoExpand");

for (let button of expandButtonsArr) {
    button.addEventListener("click", ()=>{

        button.classList.contains("icoExpand") ?
            button.classList.toggle("icoExpanded") :
            button.classList.add("icoExpanded")

        let nodes = button.parentNode.children;
        for (element of nodes) {
            if (element.classList.contains("menuSublist")) {
                // element.classList.add("sublist-expanded")
                element.classList.contains("sublistExpanded") ?
                    element.classList.toggle("sublistExpanded") :
                    element.classList.add("sublistExpanded")
            }
        }
    })
}