Hash route active link not working

[mdreyes]

I'm still new using Next.js hope someone can help.

On initial page load the active link will have a background color because the slug state === nav

If I share a link

www.agenda/days#tuesday

The Tuesday nav will be highlighted

But when I try to click another nav item e.g Wednesday the state is not updated. The highlighted nav is still in Tuesday

I would like to update the slug state onClick and add a background color on selected nav while remove the background on the current one.

Thank you

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

const navLinks = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];

const Nav = () => {
  const router = useRouter();
  const [slug, getSlug] = useState('');

  useEffect(() => {
    getSlug(router.asPath.split('#').pop());
  }, []);

return (
  <>
    <div className="d-flex justify-content-between mb-3">
      navLinks.map((nav) => (
          <a
            href={`/days#${type.LowerCase()}`}
            key={nav.toLowerCase()}
            className={`col ${nav.toLowerCase() === slug ? 'current' : ''}`}
            onClick={() => getSlug(nav.toLowerCase())}
            role="link"
          >
            {nav}
          </a>
        ))}
    </div>
  </>
);
}

export default Nav;