diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index dc8c55112cd19..f0fc86f2da325 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -14,79 +14,27 @@ import BlockPopoverInbetween from '../block-popover/inbetween';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-function Inserter( {
-	previousClientId,
-	nextClientId,
-	sectionRootClientId,
-	index,
-	setActiveInserter,
-} ) {
-	const { setInserterIsOpened, insertionIndex } = useSelect(
-		( select ) => {
-			const { getSettings, getBlockCount } = select( blockEditorStore );
-			const settings = getSettings();
-			return {
-				setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
-				insertionIndex: index === -1 ? getBlockCount() : index,
-			};
-		},
-		[ index ]
-	);
-
-	const label = _x(
-		'Add pattern',
-		'Generic label for pattern inserter button'
-	);
-	return (
-		<BlockPopoverInbetween
-			previousClientId={ previousClientId }
-			nextClientId={ nextClientId }
-			className="block-editor-button-pattern-inserter"
-		>
-			<Button
-				variant="primary"
-				icon={ plus }
-				size="compact"
-				className="block-editor-button-pattern-inserter__button"
-				onClick={ () => {
-					setInserterIsOpened( {
-						rootClientId: sectionRootClientId,
-						insertionIndex,
-						tab: 'patterns',
-						category: 'all',
-					} );
-					setActiveInserter( index );
-				} }
-				label={ label }
-			/>
-		</BlockPopoverInbetween>
-	);
-}
-
-function ZoomOutModeInserters( { __unstableContentRef } ) {
+function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
-	const [ activeInserter, setActiveInserter ] = useState( null );
-	const { blockOrder, sectionRootClientId, isInserterOpened } = useSelect(
-		( select ) => {
-			const { sectionRootClientId: root } = unlock(
-				select( blockEditorStore ).getSettings()
-			);
-			return {
-				blockOrder: select( blockEditorStore ).getBlockOrder( root ),
-				// To do: move ZoomOutModeInserters to core/editor.
-				// eslint-disable-next-line @wordpress/data-no-store-string-literals
-				isInserterOpened: select( 'core/editor' ).isInserterOpened(),
-				sectionRootClientId: root,
-			};
-		},
-		[]
-	);
-
-	useEffect( () => {
-		if ( ! isInserterOpened ) {
-			setActiveInserter( null );
-		}
-	}, [ isInserterOpened ] );
+	const {
+		blockOrder,
+		sectionRootClientId,
+		insertionPoint,
+		setInserterIsOpened,
+	} = useSelect( ( select ) => {
+		const { getSettings, getBlockOrder } = select( blockEditorStore );
+		const { sectionRootClientId: root } = unlock( getSettings() );
+		// To do: move ZoomOutModeInserters to core/editor.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const editor = select( 'core/editor' );
+		return {
+			blockOrder: getBlockOrder( root ),
+			insertionPoint: unlock( editor ).getInsertionPoint(),
+			sectionRootClientId: root,
+			setInserterIsOpened:
+				getSettings().__experimentalSetIsInserterOpened,
+		};
+	}, [] );
 
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
@@ -103,20 +51,35 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		if ( activeInserter === index ) {
+		if ( insertionPoint.insertionIndex === index ) {
 			return null;
 		}
 		return (
-			<Inserter
+			<BlockPopoverInbetween
 				key={ index }
 				previousClientId={ clientId }
 				nextClientId={ blockOrder[ index ] }
-				sectionRootClientId={ sectionRootClientId }
-				index={ index }
-				blockOrder={ blockOrder }
-				__unstableContentRef={ __unstableContentRef }
-				setActiveInserter={ setActiveInserter }
-			/>
+				className="block-editor-button-pattern-inserter"
+			>
+				<Button
+					variant="primary"
+					icon={ plus }
+					size="compact"
+					className="block-editor-button-pattern-inserter__button"
+					onClick={ () => {
+						setInserterIsOpened( {
+							rootClientId: sectionRootClientId,
+							insertionIndex: index,
+							tab: 'patterns',
+							category: 'all',
+						} );
+					} }
+					label={ _x(
+						'Add pattern',
+						'Generic label for pattern inserter button'
+					) }
+				/>
+			</BlockPopoverInbetween>
 		);
 	} );
 }