Error with custom Link component in Next.js project

import React from 'react'
import NextLink from 'next/link'

interface Props {
  children: Array<JSX.Element | string | null> | JSX.Element | string | null
  className?: string
  href: string
  target?: string
  rel?: string
  onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void
}

const Link: React.FC<Props> = ({ children, href, className, target, rel, onClick }) => {
  function handleClick(e) {
    if (e.type === 'click' || e.key === 'Enter') {
      onClick?.(e)
    }
  }

  return (
    <NextLink href={href}>
      <a
        className={className}
        target={target}
        rel={rel}
        {...(onClick
          ? {
            onClick,
            onKeyPress: handleClick,
            role: 'link',
            tabIndex: 0,
          }
          : {})}
      >
        {children}
      </a>
    </NextLink>
  )
}

export default Link

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

export default function HeroPost({
                                   coverImage,
                                   slug,
                                   displayExcerpt,
                                   displayTitle,
                                 }) {
  return (
    <Link href={`/posts/${slug}`}>
      <div className={styles.front_container} data-row-id='1'>
        <div className={styles.row_grid_container}>
          <CoverImage slug={slug} imageObject={coverImage} title={displayTitle} url={coverImage} />
          <div className={styles.title_container}>
            <p className={styles.excerpt}>{displayExcerpt}</p>
            <h3 className={styles.title}>
              <a className='hover:underline'>{displayTitle}</a>
            </h3>
          </div>
        </div>
      </div>
    </Link>

  );
};

<Link as={`/posts/${slug}`} href='/posts/[slug]'>

<Link href={`/posts/${slug}`}>

return (
    <Link href={`/posts/${slug}`}>
      <div className={styles.front_container} data-row-id='1'>
        <div className={styles.row_grid_container}>
          <CoverImage slug={slug} imageObject={coverImage} title={displayTitle} url={coverImage} />
          <div className={styles.title_container}>
            <p className={styles.excerpt}>{displayExcerpt}</p>
            <h3 className={styles.title}>
              <a className='hover:underline'>{displayTitle}</a>
            </h3>
          </div>
        </div>
      </div>
    </Link>

  );
};