diff --git a/docs/advanced-features/using-mdx.md b/docs/advanced-features/using-mdx.md
index 8087473ca22d..6ed9b3f5756f 100644
--- a/docs/advanced-features/using-mdx.md
+++ b/docs/advanced-features/using-mdx.md
@@ -178,7 +178,7 @@ Then setup the provider in your page
 
 import { MDXProvider } from '@mdx-js/react'
 import Image from 'next/image'
-import { Heading, Text, Pre, Code, Table } from 'my-components'
+import { Heading, InlineCode, Pre, Table, Text } from 'my-components'
 
 const ResponsiveImage = (props) => (
   <Image alt={props.alt} layout="responsive" {...props} />
@@ -189,8 +189,8 @@ const components = {
   h1: Heading.H1,
   h2: Heading.H2,
   p: Text,
-  code: Pre,
-  inlineCode: Code,
+  pre: Pre,
+  code: InlineCode,
 }
 
 export default function Post(props) {