diff --git a/packages/__docs__/src/TableOfContents/index.tsx b/packages/__docs__/src/TableOfContents/index.tsx
index 7839201b0a..ffa9defe13 100644
--- a/packages/__docs__/src/TableOfContents/index.tsx
+++ b/packages/__docs__/src/TableOfContents/index.tsx
@@ -40,6 +40,32 @@ import type {
   TOCHeadingData
 } from './props'
 
+// set sequential id to each heading of the examples
+const setExampleHeadingIds = (headings: NodeListOf<HTMLHeadingElement>) => {
+  const headingsArray = Array.from(headings)
+  const parentExampleHeadingIndex = headingsArray.findIndex(
+    (h) => h.id === 'Examples'
+  )
+
+  if (parentExampleHeadingIndex === -1) return
+
+  const childExampleHeadings: HTMLHeadingElement[] = []
+
+  for (let i = parentExampleHeadingIndex + 1; i < headingsArray.length; i++) {
+    const h = headingsArray[i]
+    if (h.tagName === 'H4') {
+      childExampleHeadings.push(h)
+    } else {
+      break
+    }
+  }
+
+  childExampleHeadings.forEach((h, i) => {
+    // eslint-disable-next-line no-param-reassign
+    h.id = `Examples-${i + 1}`
+  })
+}
+
 class TableOfContents extends Component<
   TableOfContentsProps,
   TableOfContentsState
@@ -84,6 +110,10 @@ class TableOfContents extends Component<
     const headings = pageElement?.querySelectorAll<HTMLHeadingElement>(
       'h1, h2, h3, h4, h5, h6'
     )
+
+    // to have proper links to the headings of the examples, we need to set heading ids manually
+    setExampleHeadingIds(headings)
+
     const TOCData: TableOfContentsState['TOCData'] = []
     let hasLinkToTitle = false