diff --git a/apps/web/src/components/Navigation/index.tsx b/apps/web/src/components/Navigation/index.tsx
index 190b45306..92a5f1ead 100644
--- a/apps/web/src/components/Navigation/index.tsx
+++ b/apps/web/src/components/Navigation/index.tsx
@@ -91,6 +91,11 @@ function VersionedNavigationGroup({
   isLast?: boolean
 }) {
   const router = useRouter()
+
+  // Manage the state of the current version of the API reference
+  const versions = Object.keys(group.versionedItems)
+  const [curVersion, setCurVersion] = useState(versions[0])
+
   // If this is the mobile navigation then we always render the initial
   // state, so that the state does not change during the close animation.
   // The state will still update when we re-open (re-render) the navigation.
@@ -104,9 +109,6 @@ function VersionedNavigationGroup({
     return null
   }
 
-  const versions = Object.keys(group.versionedItems)
-  const [curVersion, setCurVersion] = useState(versions[0])
-
   return (
     <li className={clsx('relative', className)}>
       <div className="pl-2 mb-1 flex items-center justify-between gap-1">