Hey, this is probably a pretty simple question for someone experienced in next, but I'm really not. Basically I have a navbar that is displayed at the top of my page in my layout.tsx, I have one class on the links in the navbar for displaying a background color and one property inside of my HoverEffect element for active={activeColor} which just sets the background color, my code is currently:

<HoverEffect active={navbarActiveColor} color={navbarHoverColor}>
    <Link href="/">Home</Link>
</HoverEffect>
<HoverEffect color={navbarHoverColor}>
    <Link href="/schedule">Schedule Appointment</Link>
</HoverEffect>
<HoverEffect color={navbarHoverColor}>
    <Link href="/gallery">Our Work</Link>
</HoverEffect>
//Active denotes that the background should be solid, how can I update active to be the correct link when the user is at the corresponding /schedule or /gallery?

Thank you in advance for any and all help!