I am trying to get a Logo that utilizes React.forwardRef and NextJS Link to change to a different image on hover and still work.

This was fairly straightforward in CSS, but I'm stuck on how to do this in the NextJS / Tailwind world.

Currently I'm getting by with a `hover: animate-pulse` at the moment...

Help appreciated!

```
import React from "react";
import Link from "next/link";
import Image from "next/image";

const MyLogo = React.forwardRef(({ onClick, href }, ref) => {
  return (
    <a href={href} onClick={onClick} ref={ref}>
      <Image src="/logo1.png" width={88} height={77} alt="logo" />
    </a>
  );
});

export default function Nav() {
  return (
    <nav className="flex items-center justify-between flex-wrap bg-raisin-black p-6">
      <div className="flex items-center flex-shrink-0 mr-6 cursor-pointer hover:animate-pulse">
        <Link href="/">
          <MyLogo />
        </Link>
      </div>
    </nav>
  );
}

```