diff --git a/src/components/docs/Breadcrumbs.tsx b/src/components/docs/Breadcrumbs.tsx
index 74c323322f..4bcbc982a0 100644
--- a/src/components/docs/Breadcrumbs.tsx
+++ b/src/components/docs/Breadcrumbs.tsx
@@ -1,12 +1,11 @@
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
 import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 import { FC } from 'react';
 
-interface Props {
-  router: any;
-}
+export const Breadcrumbs: FC = () => {
+  const router = useRouter();
 
-export const Breadcrumbs: FC<Props> = ({ router }) => {
   let pathSplit = router.asPath.split('/');
   pathSplit = pathSplit.splice(1, pathSplit.length);
 
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index 13193f973f..2c962ddb3a 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -6,12 +6,10 @@ import { Heading, Stack } from '@chakra-ui/react';
 import MDXComponents from '../components/';
 import { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
-import { useRouter } from 'next/router';
-import { Breadcrumbs } from '../components/docs'
+import { Breadcrumbs } from '../components/docs';
 
 import { PageMetadata } from '../components/UI';
 
-
 const MATTER_OPTIONS = {
   engines: {
     yaml: (s: any) => yaml.load(s, { schema: yaml.JSON_SCHEMA }) as object
@@ -73,18 +71,13 @@ interface Props {
 }
 
 const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
-  const router = useRouter()
-
   return (
     <>
-      <PageMetadata
-        title={frontmatter.title}
-        description={frontmatter.description}
-      />
+      <PageMetadata title={frontmatter.title} description={frontmatter.description} />
 
       <main>
         <Stack py={8} px={4}>
-          <Breadcrumbs router={router} />
+          <Breadcrumbs />
 
           <Heading as='h1'>{frontmatter.title}</Heading>