diff --git a/react/components/CustomTags.tsx b/react/components/CustomTags.tsx
index ed649b9..829ed1c 100644
--- a/react/components/CustomTags.tsx
+++ b/react/components/CustomTags.tsx
@@ -45,7 +45,7 @@ export const CustomRenderers = {
   },
   emphasis: (props: any) => <em className="i">{props.children}</em>,
   heading: (props: any) => {
-    const hashId = slug(props.children)
+    const hashId = getHeadingSlug(props.children)
 
     switch (props.level) {
       case 1:
@@ -169,3 +169,9 @@ export const CustomRenderers = {
   tableRow: (props: any) => <tr className="bb b--muted-3">{props.children}</tr>,
   thematicBreak: () => <hr className="mv7" />,
 }
+
+function getHeadingSlug(childNodes: any) {
+  return (
+    (childNodes[0].props.children && slug(childNodes[0].props.children)) || ''
+  )
+}
diff --git a/react/utils/index.ts b/react/utils/index.ts
index c15010d..d403463 100644
--- a/react/utils/index.ts
+++ b/react/utils/index.ts
@@ -1,8 +1,8 @@
 import slugify from 'slugify'
 
-function slug(str?: string | Record<string, any>) {
+function slug(str: string) {
   const replaced =
-    (str && str.toString().replace(/[*+~.()'"!:@&[\]]/g, '')) || ''
+    (typeof str === 'string' && str.replace(/[*+~.()'"!:@&[\]]/g, '')) || ''
   const slugified = slugify(replaced, { lower: true }) || ''
   return slugified
 }