So I have a sidebar, and when I click on one of the items, it should scroll to div with a certain name. It worked before, but I decided to add 'active' class to the item clicked to change its color, and it stopped scrolling to divs.

Sidebar.jsx file:

import React, { useState} from 'react';
import './Sidebar.scss';
import { SlidebarData } from "./SlidebarData";
import spike from '../../assets/spike_pic.jpg';

const Sidebar = () => {
    const [sideBar, setSidebar] = useState(false);
    const [selectedLink, setSelectedLink] = useState("");

    return (
        <div className="sidebar">
        <span className="btn" onClick={() => setSidebar(!sideBar)}>Menu</span>
            <div className="profile">
                <img src={spike}/>
                <span>Alim Budaev</span>
                <span>Available for work</span>
            </div>
            <ul className="sidebarlist" id={sideBar ? "hidden" : ""}>
            {SlidebarData.map((val,key) =>{
                return (
                <li 
                    className={`row ${selectedLink === val.link ? "active" : ""}`}
                    id={val.link}
                    key={key} 
                    onClick={()=> {
                        setSelectedLink(val.link);
                        document.getElementById(val.link).scrollIntoView();  
                    }}>
                    {""}
                    <div>
                        {val.title}
                    </div>
                    </li>
                );
            })}
            </ul>
        </div>
    );
}

export default Sidebar;

As you see, I have a setState hook for selectedlink, which adds active class, but scrollIntoView doesn't work because of it, and I can't figure out why.

SidebarData.jsx, where I get links from:

export const SlidebarData = [
    {
        title: "Home",
        link: "home"
    },
    {
        title: "About",
        link: "about"
    },
    {
        title: "Services",
        link: "services"
    },
    {
        title: "Contact",
        link: "contact"
    }
]