Custom link in markdown syntax

[LoveDesignUA]

Hi, I want to use the default markdown links syntax like []() but a bit modified

I use NextJS and Tailwind for styling.

i have a custom Link component like this:

export const ArticleLink = ({
  href,
  children,
}: {
  href: string;
  children: React.ReactNode;
}) => {
  const isInternalLink = href && (href.startsWith("/") || href.startsWith("#"));

  if (isInternalLink) {
    return <Link href={href}>{children}</Link>;
  }

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="font-medium text-primary inline-flex no-underline hover:underline underline-offset-8 after:size-4 after:bg-contain after:bg-no-repeat after:mt-1.5 after:bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyNDYzZWIiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1hcnJvdy11cC1yaWdodCI+PHBhdGggZD0iTTcgN2gxMHYxMCIvPjxwYXRoIGQ9Ik03IDE3IDE3IDciLz48L3N2Zz4=')]"
    >
      {children}
    </a>
  );
};

and i have tried to replace the default link in markdown in the file mdx-components.tsx.
Component ArticleLink is defined in the same file up above

const sharedComponents = {
 a: ArticleLink,
};

// parse the Velite generated MDX code into a React component function
const useMDXComponent = (code: string) => {
  const fn = new Function(code);
  return fn({ ...runtime }).default;
};

interface MDXProps {
  code: string;
  components?: Record<string, React.ComponentType>;
}

// MDXContent component
export const MDXContent = ({ code, components }: MDXProps) => {
  const Component = useMDXComponent(code);
  return <Component components={{ ...sharedComponents, ...components }} />;
};

got the error:

Unhandled Runtime Error
Error: Expected component `ArticleLink` to be defined: you likely forgot to import, pass, or provide it.

How can i fix that?