diff --git a/packages/ui-components/src/Containers/MetaBar/index.tsx b/packages/ui-components/src/Containers/MetaBar/index.tsx
index ad1e4cf4eda78..8b994d84a4138 100644
--- a/packages/ui-components/src/Containers/MetaBar/index.tsx
+++ b/packages/ui-components/src/Containers/MetaBar/index.tsx
@@ -49,12 +49,12 @@ const MetaBar: FC<MetaBarProps> = ({
               <ol>
                 {filteredHeadings.map(head => (
                   <li
-                    key={head.value}
+                    key={head.data?.id}
                     className={
                       head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : ''
                     }
                   >
-                    <Component href={`#${head?.data?.id}`}>
+                    <Component href={`#${head.data?.id}`}>
                       {' '}
                       {head.value}
                     </Component>