diff --git a/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts b/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
index b64d4ed8086..e1bc479e468 100644
--- a/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
+++ b/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
@@ -12,12 +12,15 @@ export const getAnchor = (text: any): string | undefined => {
           if (typeof x !== 'string') return x.props.children
           else return x.trim()
         })
-        .map((x) =>
-          x
-            .toLowerCase()
-            .replace(/[^a-z0-9- ]/g, '')
-            .replace(/[ ]/g, '-')
-        )
+        .map((x) => {
+          if (typeof x !== 'string') return x
+          else
+            return x
+              .toLowerCase()
+              .replace(/[^a-z0-9- ]/g, '')
+              .replace(/[ ]/g, '-')
+        })
+
       return formattedText.join('-').toLowerCase()
     } else {
       const anchor = text.props.children
diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx
index 56e0b9b3b2d..035b7fc610a 100644
--- a/apps/docs/components/index.tsx
+++ b/apps/docs/components/index.tsx
@@ -46,11 +46,6 @@ const components = {
       {props.children}
     </Heading>
   ),
-  h4: (props: any) => (
-    <Heading tag="h4" {...props}>
-      {props.children}
-    </Heading>
-  ),
   code: (props: any) => {
     const linesToHighlight = parseNumericRange(props.lines ?? '')
     return <CodeBlock {...props} linesToHighlight={linesToHighlight} />