I'm trying to wrap a card component using the Link component from 'next/link'. When I click the card it should have taken me to the link but it's not doing that. instead, I'm getting a warning ' Function components cannot be given refs. Attempts to access this ref will fail'. How can I fix this?

here's the code:

<div className="flex justify_between align_center flex_wrap mb_2 ">
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item) => (
      <Link href="/blog-details" key={item}>
        <BlogCard />
      </Link>
    ))}