Hey, I'm trying to make a simple navbar and I want to add some hover effects to the buttons/links, I'm currently making a wrapping element and my code is currently:

//Inside of my navbar.tsx
<LoginButton className="uppercase" hoverColor="red"/>




//components/loginButton.tsx
"use client";

import { useSession } from "next-auth/react";
import React from "react";
import HoverEffect from "./hoverEffect";

export default function LoginButton({
  className,
  hoverColor,
}: {
  className?: string;
  hoverColor?: string;
}) {
  const { data: session } = useSession();

//Somehow these buttons need to be linked to the HoverEffect element and I'm unsure of how to pass the hover over the button to affect the HoverEffect element
  if (session && session.user) {
    return (
      <HoverEffect color={hoverColor}>
        <button className={`${className} group transition-colors duration-200`}>
          Sign Out
        </button>
      </HoverEffect>
    );
  }

//Same here, this is just the login btn
  return (
    <HoverEffect color={hoverColor}>
      <button className={`${className} group transition-colors duration-200`}>
        Sign In
      </button>
    </HoverEffect>
  );
}