diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
index 7372011ff47f06..4c88e761ad8d6f 100644
--- a/docs/src/modules/components/HighlightedCodeWithTabs.tsx
+++ b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
@@ -88,6 +88,8 @@ export default function HighlightedCodeWithTabs(
   const { tabs, storageKey } = props;
   const availableTabs = React.useMemo(() => tabs.map(({ tab }) => tab), [tabs]);
   const [activeTab, setActiveTab] = useLocalStorageState(storageKey ?? null, availableTabs[0]);
+  // During hydration, activeTab is null, default to first value.
+  const value = activeTab ?? availableTabs[0];
 
   const [mounted, setMounted] = React.useState(false);
 
@@ -101,7 +103,7 @@ export default function HighlightedCodeWithTabs(
 
   const ownerState = { mounted };
   return (
-    <Tabs selectionFollowsFocus value={activeTab} onChange={handleChange}>
+    <Tabs selectionFollowsFocus value={value} onChange={handleChange}>
       <TabList>
         {tabs.map(({ tab }) => (
           <Tab ownerState={ownerState} key={tab} value={tab}>