Update dependencies and fix introduced errors

components/MDXButton/index.tsx

@@ -1,10 +1,9 @@
-import { FC, useContext } from 'react';
+import { useContext } from 'react';
 import { ThemeContext } from '../../styles/theme';
 import { Props } from './types';
 import { Btn } from './styles';
-import Link from 'next/link';
 
-const MDXButton: FC<Props & { className?: string }> = ({
+const MDXButton = ({
 	variant = 'text',
 	type = 'button',
 	link,
@@ -12,25 +11,23 @@ const MDXButton: FC<Props & { className?: string }> = ({
 	children,
 	disabled,
 	className
-}) => {
+}: Props) => {
 	const { mode } = useContext(ThemeContext);
 
 	return link ? (
-		<Link href={link} passHref>
-			<Btn
-				as='a'
-				target={target}
-				variant={variant}
-				type={type}
-				mode={mode}
-				disabled={disabled}
-				className={className}
-			>
-				{children}
-			</Btn>
-		</Link>
+		<Btn
+			href={link}
+			target={target}
+			variant={variant}
+			type={type}
+			mode={mode}
+			disabled={disabled}
+			className={className}
+		>
+			{children}
+		</Btn>
 	) : (
-		<Btn variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
+		<Btn href="#" variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
 			{children}
 		</Btn>
 	);

components/MDXButton/styles.tsx

@@ -1,7 +1,8 @@
+import Link from 'next/link';
 import styled from 'styled-components';
 import { Props } from './types';
 
-export const Btn = styled.button<Props>`
+export const Btn = styled(Link)<Props>`
 	cursor: pointer;
 	display: ${({ variant }) =>
 		['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};

components/MDXButton/types.ts

@@ -5,4 +5,6 @@ export type Props = {
 	target?: HTMLAnchorElement['target'];
 	mode?: string;
 	disabled?: boolean;
+	className?: string;
+	children: React.ReactNode;
 };