diff --git a/packages/global-styles-ui/src/global-styles-ui.tsx b/packages/global-styles-ui/src/global-styles-ui.tsx
index 86d2d45715edd7..76b45e3f1d9cef 100644
--- a/packages/global-styles-ui/src/global-styles-ui.tsx
+++ b/packages/global-styles-ui/src/global-styles-ui.tsx
@@ -7,7 +7,7 @@ import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 // @ts-expect-error: Not typed yet.
 import { BlockEditorProvider } from '@wordpress/block-editor';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useMemo, useEffect, Fragment } from '@wordpress/element';
 import { usePrevious } from '@wordpress/compose';
 import {
 	generateGlobalStyles,
@@ -235,26 +235,23 @@ export function GlobalStylesUI( {
 						<ScreenBlockList />
 					</GlobalStylesNavigationScreen>
 					{ blocks.map( ( block: BlockType ) => (
-						<GlobalStylesNavigationScreen
-							key={ 'menu-block-' + block.name }
-							path={
-								'/blocks/' + encodeURIComponent( block.name )
-							}
-						>
-							<ScreenBlock name={ block.name } />
-						</GlobalStylesNavigationScreen>
-					) ) }
-
-					<ContextScreens />
-
-					{ blocks.map( ( block: BlockType ) => (
-						<ContextScreens
-							key={ 'screens-block-' + block.name }
-							name={ block.name }
-							parentMenu={
-								'/blocks/' + encodeURIComponent( block.name )
-							}
-						/>
+						<Fragment key={ block.name }>
+							<GlobalStylesNavigationScreen
+								path={
+									'/blocks/' +
+									encodeURIComponent( block.name )
+								}
+							>
+								<ScreenBlock name={ block.name } />
+							</GlobalStylesNavigationScreen>
+							<ContextScreens
+								name={ block.name }
+								parentMenu={
+									'/blocks/' +
+									encodeURIComponent( block.name )
+								}
+							/>
+						</Fragment>
 					) ) }
 				</Navigator>
 			</BlockEditorProvider>