diff --git a/src/components/Layout/useTocHighlight.tsx b/src/components/Layout/useTocHighlight.tsx
index 544396c68b7..677035fa1e9 100644
--- a/src/components/Layout/useTocHighlight.tsx
+++ b/src/components/Layout/useTocHighlight.tsx
@@ -32,8 +32,13 @@ export function useTocHighlight() {
       const scrollPosition = window.scrollY + window.innerHeight;
       const headersAnchors = getHeaderAnchors();
 
+      if (headersAnchors.length === 0) {
+        setCurrentIndex(0);
+        return;
+      }
+
       if (scrollPosition >= 0 && pageHeight - scrollPosition <= 0) {
-        // Scrolled to bottom of page.
+        // Scrolled to the bottom of the page.
         setCurrentIndex(headersAnchors.length - 1);
         return;
       }
@@ -76,7 +81,28 @@ export function useTocHighlight() {
     };
   }, []);
 
+  // Adding a click listener to update the ToC highlight when an item is clicked
+  useEffect(() => {
+    function updateActiveLinkOnClick(event: MouseEvent) {
+      const target = event.target as HTMLAnchorElement;
+      const headersAnchors = getHeaderAnchors();
+      
+      headersAnchors.forEach((anchor, index) => {
+        if (anchor.href === target.href) {
+          setCurrentIndex(index);
+        }
+      });
+    }
+
+    document.addEventListener('click', updateActiveLinkOnClick);
+
+    return () => {
+      document.removeEventListener('click', updateActiveLinkOnClick);
+    };
+  }, []);
+
   return {
     currentIndex,
   };
 }
+