Scroll spy not working in React. I tried several libraries

Question

I wanted to make a scroll spy navigation. I tried to use react-scroll and react-ui-scrollspy libraries but these libraries don't work for me I've also attached the picture.

This is the image of UI

It's the code of the right top reading panel which you can see in the picture:

<div className="reading-pane" style={{ overflow: 'auto' }}>
            {selected && !isSearchingForMembers && (
                <nav className="scrollspry_block" style={{ display: 'block' }}>
                    <div className="flex_row_no-margin-bottom scrollspy-direct-url">
                        {topics.map((topic, index) => {
                            return (
                                <a onClick={() => setCurrent(index)} href={`#${topic.href}`} className={`scrollspry__button w-button ${index === current && 'w--current'}`}>
                                    {topic.title}
                                </a>
                            );
                        })}
                    </div>
                </nav>
            )}

When I am scrolling it's not working even though I tried several libraries for it. Is there any idea what could be the problem that is causing this I imported CSS from Webflow CSS is nested so it's happening because of the CSS not sure.