diff --git a/packages/docs/core/App.tsx b/packages/docs/core/App.tsx
index c4e5dc4c..beec1718 100644
--- a/packages/docs/core/App.tsx
+++ b/packages/docs/core/App.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import Button from '../pages/Button.mdx'
-import { Anchor, AnchorGroup } from '@zonda/react'
+import { AnchorGroup } from '@zonda/react'
 
 function App() {
   const [currKey, setCurrKey] = useState('assadfas')
@@ -8,58 +8,60 @@ function App() {
   return (
     <div className="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
       <div className="fixed inset-0 left-[max(0px,calc(50%-45rem))] right-auto top-[3.8125rem] z-20 hidden w-[19rem] overflow-y-auto pb-10 pl-8 pr-6 lg:block ">
-        <AnchorGroup selectedKey={currKey} onChange={onChange}
-        
-        items={[
-          {
-            title:'Getting Started',
-            children: [
-              {
-                title: 'Installation',
-                key: '/docs/getting-started/installation',
-              },
-              {
-                title: 'Core Concepts',
-                key: '/docs/getting-started/core-concepts',
-                children: [
-                  { title: 'assadfas', key: 'assadfas' },
-                  { title: 'assadfas2', key: 'assadfas2' },
-                  { title: 'assadfas3', key: 'assadfas3' },
-                ],
-              },
-              {
-                title: 'Getting Started',
-                key: '/docs/getting-started/getting-started',
-              },
-            ]
-          },{
-            title:'Array',
-            children: [
-              {
-                title: 'alphabetical',
-                key: '/docs/array/alphabetical',
-              },
-              {
-                title: 'boil',
-                key: '/docs/array/boil',
-              },
-              {
-                title: 'cluster',
-                key: '/docs/array/cluster',
-              },
-              {
-                title: 'counting',
-                key: '/docs/array/counting',
-              },
-              {
-                title: 'diff',
-                key: '/docs/array/diff',
-              },
-            ]
-          }
-        ]}
+        <AnchorGroup
+          selectedKey={currKey}
+          onChange={onChange}
+          items={[
+            {
+              title: 'Getting Started',
+              children: [
+                {
+                  title: 'Installation',
+                  key: '/docs/getting-started/installation',
+                },
+                {
+                  title: 'Core Concepts',
+                  key: '/docs/getting-started/core-concepts',
+                  children: [
+                    { title: 'assadfas', key: 'assadfas' },
+                    { title: 'assadfas2', key: 'assadfas2' },
+                    { title: 'assadfas3', key: 'assadfas3' },
+                  ],
+                },
+                {
+                  title: 'Getting Started',
+                  key: '/docs/getting-started/getting-started',
+                },
+              ],
+            },
+            {
+              title: 'Array',
+              children: [
+                {
+                  title: 'alphabetical',
+                  key: '/docs/array/alphabetical',
+                },
+                {
+                  title: 'boil',
+                  key: '/docs/array/boil',
+                },
+                {
+                  title: 'cluster',
+                  key: '/docs/array/cluster',
+                },
+                {
+                  title: 'counting',
+                  key: '/docs/array/counting',
+                },
+                {
+                  title: 'diff',
+                  key: '/docs/array/diff',
+                },
+              ],
+            },
+          ]}
         />
-</div>
+      </div>
       <div className="lg:pl-[19.5rem]">
         <div className="mx-auto max-w-3xl pt-10 xl:ml-0 xl:mr-[15.5rem] xl:max-w-none xl:pr-16">
           <div className="prose prose-sm flex-1">
diff --git a/packages/react/src/components/Anchor/index.tsx b/packages/react/src/components/Anchor/index.tsx
index e907f9d6..81ab3c44 100644
--- a/packages/react/src/components/Anchor/index.tsx
+++ b/packages/react/src/components/Anchor/index.tsx
@@ -89,7 +89,7 @@ export interface AnchorGroupProps extends Omit<HTMLAttributes<HTMLDivElement>,'o
   selectedKey?: string
   onChange?: (key: string) => void
   items: {
-    key: string
+    key?: string
     title: string
     children: AnchorItem[]
   }[]
@@ -99,7 +99,7 @@ export const AnchorGroup = (props: AnchorGroupProps) => {
   const { items, className, style } = props
   const [value, setValue] = useControllableValue<string>(props, {
     valuePropName: 'selectedKey',
-  })
+  }) 
   const onChange = (key: string) => {
     setValue(key)
   }