How do I make the Link appear above the component I made?

Solution for How do I make the Link appear above the component I made?
is Given Below:

How do I make the Link appear above the component I made?
Im using Next.js 11 version.

This is error message.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Link`.

This is my source code.

const data = [1, 2, 3, 4, 5, 6, 7, 8];

const ContentByMenu = () => {
    switch (menu) {
      case "asset": {
        return data.map((data, key) => {
          console.log(data, key);
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <AssetCard
                like={data}
                asset={data}
                token={data}
                price={data}
                key={key}
                className="pointer"
              />
            </Link>
          );
        });
      }

      case "token": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/token/detail?asset=${data}`} key={key}>
              <TokenCard token={data} contents={data} key={key} />
            </Link>
          );
        });
      }

      case "account": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <AccountCard account={data} key={key} />
            </Link>
          );
        });
      }
    }
  };

The Card Component is simply ui data and const data is temporary data.
I think it’s wrong to embed comp in links.
What should I do?

for the first, you should import Link

import Link from 'next/link';

then you should use tag a

    const data = [1, 2, 3, 4, 5, 6, 7, 8];

    const ContentByMenu = () => {
        switch (menu) {
          case "asset": {
            return data.map((data, key) => {
              console.log(data, key);
              return (
                <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
             <a> 
<AssetCard
                like={data}
                asset={data}
                token={data}
                price={data}
                key={key}
                className="pointer"
              />
</a>
            </Link>
          );
        });
      }

      case "token": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/token/detail?asset=${data}`} key={key}>
              <a>
<TokenCard token={data} contents={data} key={key} />
</a>
            </Link>
          );
        });
      }

      case "account": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <a>
<AccountCard account={data} key={key} />
</a>
            </Link>
          );
        });
      }
    }
  };