What I try to achieve is this in the picture. I'm trying to create a card. When user click the card itself, it will direct them to live demo. And if they click the GitHub icon, it will direct them to the related repo. I saw this kind of cards before, how people walk around the error? This is the code structure:

import Link from "next/link";
import Image from "next/image";
type ProjectCardProps = {
    img: string;
    title: string;
    demo: string;
    github: string;
    }

export default function ProjectCard({img, title, demo, github}: ProjectCardProps){
    return (
        <Link href={demo} target='_blank'>
        <div className=' hover:border hover:border-black hover:cursor-pointer hover:shadow-none relative bg-slate-500  min-h-72 w-96 sm:min-w-full rounded-2xl overflow-hidden   shadow-lg  shadow-slate-900 flex'>
            
            <div className='absolute top-0 left-0 w-full '>
              <Image className=' min-w-[384px] w-full min-h-72' 
              src={img} alt="Women Page Screenshot" 
              width={384} height={221} />
            </div>

            <div className='flex items-end px-4 pb-1  justify-between z-10 w-full'>
              <p className=' font-extrabold'>{title}</p>
              <Link href={github}
                  target='_blank'>
                  <Image className='' src="/icons/github.svg" alt="GitHub" width={48} height={48} />
              </Link>
            </div>
        </div>
      </Link>
    )
}

this is one of the error messages:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <a>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
div
a
...