Hi! I'm using Nextjs with tailwindCSS and flowbite-react. My problem is that the styling of the active tag in the navbar should be blue on hover, and blue+underlined when active. The active className is set in the rendered HTML (see pic), but the styling disappears after refresh. Any suggestions how to fix this?

'use client';

import Link, {LinkProps} from 'next/link';
import { Navbar } from 'flowbite-react';
import { usePathname } from 'next/navigation';

export default function MyNavbar() {
  const pathname = usePathname();
  console.log(pathname)
  console.log(pathname == "/groepen")
  return (
    <Navbar fluid rounded>
      <Navbar.Brand href="/">
        <img src="/favicon.ico" className="mr-5 h-15 sm:h-12" alt="Henk Brunt logo" />
        <span className="p-2 text-hbgblue self-center whitespace-nowrap text-xl font-semibold">Henk Brunt Groep</span>
      </Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Navbar.Link href="/" className={`${pathname == "/" ? "active" : ""} text-black hover:text-hbgblue active:text-hbgblue active:underline text-m font-semibol self-center`}>
          Home
        </Navbar.Link>
        <Navbar.Link href="/groepen" className={`${pathname == "/groepen" ? "active" : ""} text-black hover:text-hbgblue active:text-hbgblue active:underline text-m font-semibol self-center`}>
          Groepen
        </Navbar.Link>
        <Navbar.Link href="/verhuur" className={`${pathname == "/verhuur" ? "active" : ""} text-black hover:text-hbgblue active:text-hbgblue active:underline text-m font-semibol self-center`}>Verhuur</Navbar.Link>
        <Navbar.Link href="/contact" className={`${pathname == "/contact" ? "active" : ""} text-black hover:text-hbgblue active:text-hbgblue active:underline text-m font-semibol self-center`}>Contact</Navbar.Link>
      </Navbar.Collapse>
    </Navbar>

  );
}