My issue:

I've noticed that when react is rendering my website, there's content outside of the container, it renders this at first:

<div>
  <a href="/"></a>
  <div>{content}</div>
</div>

when instead it should be rendering this (which it does but some time later):

<div>
  <a href="/">
    <div>{content}</div>
  </a>
</div>

Context:

I'm using @tailwindcss/container-queries to achieve this effect.
Depending on the size of the container for the cards, it will change the number of columns it has to fit the maximum number of cards while maintaining readability, here's the simplified version of the code that generates this:

export default function Home() {

  const Card = (image: string, name: string, author: string) => (
    <Link>
      <div>
        <Image src={image} />
        <h1>{name}</h1>
        <p>{author}</p>
      </div>
    </Link>
  )

  return (
    <main className="@container">
      <div className="grid grid-cols-1 @md:grid-cols-3">
          {cards.map(card =>
              <Card
                image={card.image}
                name={card.name}
                author={card.author}
              />
          )}
      </div>
    </main>
  )
}

Error pictures: