React. Почему получаю ошибку при втором клике?

У меня есть side menu с несколькими пунктами. И есть состояние scroll, которое обновляю так:

const [scroll, setScroll] = useState({ offset: 0, currentsectionIndex: 0 });

    useEffect(() => {


        window.addEventListener("wheel", handleScroll)
        return () => {
            window.removeEventListener("wheel", handleScroll);

        }


    }, []);



    let handleClick = (e) => {
        document.body.classList.add("_lock")
        document.getElementsByClassName("side__menu-item--active")[0]?.classList.remove("side__menu-item--active")
        e.target.classList.add("side__menu-item--active")


        setScroll(scroll.offset = 0, scroll.currentsectionIndex = parseInt(e.target.getAttribute("data-id")))
        scroller.scrollTo(SideMenuItems[scroll.currentsectionIndex].text_id, { smooth: true })

        console.log(scroll)

        console.log("scroll " + scroll)

    }

Само меню:

return (
...
<div key={"side-menu"} className="side-menu" ref={SideMenuRef} onClick={handleClick}>
{
SideMenuItems.map((dataItem) => { return (<SideMenuItem key={"sideMenu".concat(dataItem.id)} title={dataItem.title} text_id={dataItem.text_id} className="side__menu-item" id={dataItem.id}></SideMenuItem>) })
}
</div>
...
)

SideMenuItem:

import "./sidemenuItemLink.scss"


export default function SideMenuItem({ text_id, id, title }) {
    return (
        <div key={id} className="side__menu-item" data-text_id={text_id} data-id={id} to={text_id} smooth={true}>
            <div className='menu__item-box'><p className='menu__item-text'>{title}</p></div>
        </div>

    )
}

Почему у меня при первом клике на элемент меню все работает, но при втором получаю ошибку:

Как правильно обновить state при клике и скролле?