Active state not being properly set for some sections

[JusticeMatthew]

Hello,

I've spent days and days trying to resolve this with no success.

For some reason when I use my react-scroll nav links to navigate up or down my page sometimes they highlight the active section link correctly and sometimes they don't 🤔

Here is a video demonstrating the issue:
https://user-images.githubusercontent.com/72817096/233223869-77d5f4f0-76d9-4b6b-9666-8ab33d733a0b.mp4

I have tried so many different variations but I still can't seem to resolve the issue

Here is the code where I'm using it
The react-scroll Link component is used inside src/components/interface/ScrollLink.tsx.
The ScrollLink.tsx is used in src/components/Header.tsx and the components they link to are in src/containers

ScrollLink.tsx
Header.tsx
src/containers
(containers has Landing.tsx, Projects.tsx, About.tsx, and Contact.tsx which make up the 4 page sections)

Any help at all would be greatly appreciated! Love this package!

Thanks! 👍

[JusticeMatthew]

Anyone have any luck finding a solution? Nothing I've tried has worked :(

[fisshy]

By any chance you're re-rendering or animating the containers when you reach them?

[JusticeMatthew]

I had planned to have them animate in but currently, there are none.

And for rerenders according to the dev tools, the only thing re-rendering is the actual nav links when they change active state

[thomaspessato]

@JusticeMatthew did you get this to work?