Hello 👋🏼
in my Browser i have this 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

I created a Card Component to use it:

export const GridCard = <T extends ComponentType>({ children, className, slide, slideClassName, slideContainerClassName, link, component: Component = "div", ...componentProps }: GridCardProps<T>) => {
  return (
    <Component {...componentProps} className={`${styles.card} ${className}`}>
      <Link href={link ?? ""} className={styles.largeCardLink}>
        <div className={slideContainerClassName} tabIndex={0}>
          <div className={`${styles.slide} ${slideClassName}`}>{slide}</div>
        </div>
      </Link>
      {children}
    </Component>
  );
};

It is possible to use the link in the top and wrap my div's?