diff --git a/components/DocMenu/react/DocMenuReact.cy.tsx b/components/DocMenu/react/DocMenuReact.cy.tsx
index f726d8fe8..3281602a1 100644
--- a/components/DocMenu/react/DocMenuReact.cy.tsx
+++ b/components/DocMenu/react/DocMenuReact.cy.tsx
@@ -25,7 +25,7 @@ describe('<DocMenu/>', () => {
       <DocMenu
         items={[
           {
-            label: 'Baz',
+            label: 'Baaaaaaz',
             items: [{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }],
           },
         ]}
diff --git a/components/DocMenu/react/_DocGroup.tsx b/components/DocMenu/react/_DocGroup.tsx
index c0603cb2e..cca4d64a4 100644
--- a/components/DocMenu/react/_DocGroup.tsx
+++ b/components/DocMenu/react/_DocGroup.tsx
@@ -23,8 +23,16 @@ export const DocGroup: React.FC<DocGroupProps> = ({
   )
 
   React.useEffect(() => {
-    setHeight?.(open ? itemsHeights.reduce((a, b) => a + b, 1) : 1)
-  }, [itemsHeights, open, setHeight])
+    // if this group contains other groups, ignore this effect
+    // it will be triggered by a leaf and trickle up
+    if (group.items.some((item) => 'items' in item)) {
+      return
+    }
+
+    const newHeight = open ? itemsHeights.reduce((a, b) => a + b, 1) : 1
+
+    setHeight?.(newHeight)
+  }, [itemsHeights, open, setHeight, group.items, group.label])
 
   const [activeTop, setActiveTop] = React.useState(0)
 
@@ -44,13 +52,16 @@ export const DocGroup: React.FC<DocGroupProps> = ({
     setOpen(open)
   }
 
-  function onSetHeight(index: number, height: number) {
-    setItemsHeights((prev) => {
-      const newHeights = [...prev]
-      newHeights[index] = height
-      return newHeights
-    })
-  }
+  const onSetHeightCallback = React.useCallback(
+    (index: number, height: number) => {
+      setItemsHeights((prev) => {
+        const newHeights = [...prev]
+        newHeights[index] = height
+        return newHeights
+      })
+    },
+    [setItemsHeights],
+  )
 
   const Head = collapsible ? 'button' : group.href ? 'a' : 'div'
 
@@ -99,11 +110,12 @@ export const DocGroup: React.FC<DocGroupProps> = ({
         {group.items.map((item, index) =>
           'items' in item ? (
             <li key={index} className="relative list-none p-0">
-              <DocGroup
+              <DocGroupWithIndex
                 group={item}
                 depth={depth + 1}
-                setHeight={(height) => onSetHeight(index, height)}
+                setHeight={onSetHeightCallback}
                 collapsible={collapsible}
+                index={index}
               />
             </li>
           ) : (
@@ -120,3 +132,19 @@ export const DocGroup: React.FC<DocGroupProps> = ({
     </>
   )
 }
+
+const DocGroupWithIndex: React.FC<
+  Omit<DocGroupProps, 'setHeight'> & {
+    index: number
+    setHeight: (index: number, height: number) => void
+  }
+> = ({ setHeight, index, ...props }) => {
+  const onSetHeight = React.useCallback(
+    (height: number) => {
+      setHeight(index, height)
+    },
+    [index, setHeight],
+  )
+
+  return <DocGroup {...props} setHeight={onSetHeight} />
+}
diff --git a/components/DocMenu/react/_DocLink.tsx b/components/DocMenu/react/_DocLink.tsx
index 107fdc58d..77377d884 100644
--- a/components/DocMenu/react/_DocLink.tsx
+++ b/components/DocMenu/react/_DocLink.tsx
@@ -23,9 +23,7 @@ export const DocLink: React.FC<DocLinkProps> = ({
     if (item.active) {
       onActive?.(activeLIRef?.current?.offsetTop || 0)
     }
-    // supposed to happen only on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [onActive, item.active])
 
   return (
     <li