diff --git a/packages/block-library/src/paragraph/drop-zone.js b/packages/block-library/src/paragraph/drop-zone.js
index e51fb84acf8062..36564ee5cb74bb 100644
--- a/packages/block-library/src/paragraph/drop-zone.js
+++ b/packages/block-library/src/paragraph/drop-zone.js
@@ -1,21 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import {
-	__experimentalUseOnBlockDrop as useOnBlockDrop,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
-	__experimentalUseDropZone as useDropZone,
-	useReducedMotion,
-} from '@wordpress/compose';
-import {
-	Popover,
-	__unstableMotion as motion,
-	__unstableAnimatePresence as AnimatePresence,
-} from '@wordpress/components';
+import { useReducedMotion } from '@wordpress/compose';
+import { Popover, __unstableMotion as motion } from '@wordpress/components';
 
 const animateVariants = {
 	hide: { opacity: 0, scaleY: 0.75 },
@@ -23,39 +10,7 @@ const animateVariants = {
 	exit: { opacity: 0, scaleY: 0.9 },
 };
 
-export default function DropZone( { paragraphElement, clientId } ) {
-	const { rootClientId, blockIndex } = useSelect(
-		( select ) => {
-			const selectors = select( blockEditorStore );
-			return {
-				rootClientId: selectors.getBlockRootClientId( clientId ),
-				blockIndex: selectors.getBlockIndex( clientId ),
-			};
-		},
-		[ clientId ]
-	);
-	const onBlockDrop = useOnBlockDrop( rootClientId, blockIndex, {
-		action: 'replace',
-	} );
-	const [ isDragging, setIsDragging ] = useState( false );
-	const [ isVisible, setIsVisible ] = useState( false );
-	const popoverRef = useDropZone( {
-		onDragStart: () => {
-			setIsDragging( true );
-		},
-		onDragEnd: () => {
-			setIsDragging( false );
-		},
-	} );
-	const dropZoneRef = useDropZone( {
-		onDrop: onBlockDrop,
-		onDragEnter: () => {
-			setIsVisible( true );
-		},
-		onDragLeave: () => {
-			setIsVisible( false );
-		},
-	} );
+export default function DropZone( { paragraphElement } ) {
 	const reducedMotion = useReducedMotion();
 
 	return (
@@ -67,39 +22,22 @@ export default function DropZone( { paragraphElement, clientId } ) {
 			flip={ false }
 			resize={ false }
 			className="wp-block-paragraph__drop-zone"
-			ref={ popoverRef }
 		>
-			{ isDragging ? (
-				<div
-					className="wp-block-paragraph__drop-zone-backdrop"
-					ref={ dropZoneRef }
-					style={ {
-						width: paragraphElement?.offsetWidth,
-						height: paragraphElement?.offsetHeight,
-					} }
-				>
-					<AnimatePresence>
-						{ isVisible ? (
-							<motion.div
-								key="drop-zone-foreground"
-								data-testid="empty-paragraph-drop-zone"
-								initial={
-									reducedMotion
-										? animateVariants.show
-										: animateVariants.hide
-								}
-								animate={ animateVariants.show }
-								exit={
-									reducedMotion
-										? animateVariants.show
-										: animateVariants.exit
-								}
-								className="wp-block-paragraph__drop-zone-foreground"
-							/>
-						) : null }
-					</AnimatePresence>
-				</div>
-			) : null }
+			<motion.div
+				style={ {
+					width: paragraphElement?.offsetWidth,
+					height: paragraphElement?.offsetHeight,
+				} }
+				data-testid="empty-paragraph-drop-zone"
+				initial={
+					reducedMotion ? animateVariants.show : animateVariants.hide
+				}
+				animate={ animateVariants.show }
+				exit={
+					reducedMotion ? animateVariants.show : animateVariants.exit
+				}
+				className="wp-block-paragraph__drop-zone-foreground"
+			/>
 		</Popover>
 	);
 }
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index c049b0b72bd249..f4b82fdadcf38f 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -12,6 +12,7 @@ import {
 	ToolbarButton,
 	ToggleControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import {
 	AlignmentControl,
@@ -20,10 +21,16 @@ import {
 	RichText,
 	useBlockProps,
 	useSetting,
+	__experimentalUseOnBlockDrop as useOnBlockDrop,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useMergeRefs } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	__experimentalUseDropZone as useDropZone,
+} from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -63,10 +70,34 @@ function ParagraphBlock( {
 	const { align, content, direction, dropCap, placeholder } = attributes;
 	const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' );
 	const [ paragraphElement, setParagraphElement ] = useState( null );
+	const [ isDropZoneVisible, setIsDropZoneVisible ] = useState( false );
+	const { rootClientId, blockIndex } = useSelect(
+		( select ) => {
+			const selectors = select( blockEditorStore );
+			return {
+				rootClientId: selectors.getBlockRootClientId( clientId ),
+				blockIndex: selectors.getBlockIndex( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const onBlockDrop = useOnBlockDrop( rootClientId, blockIndex, {
+		action: 'replace',
+	} );
+	const dragEventsRef = useDropZone( {
+		onDrop: onBlockDrop,
+		onDragEnter() {
+			setIsDropZoneVisible( true );
+		},
+		onDragLeave() {
+			setIsDropZoneVisible( false );
+		},
+	} );
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [
 			useOnEnter( { clientId, content } ),
 			setParagraphElement,
+			dragEventsRef,
 		] ),
 		className: classnames( {
 			'has-drop-cap': hasDropCapDisabled( align ) ? false : dropCap,
@@ -130,12 +161,14 @@ function ParagraphBlock( {
 					</ToolsPanelItem>
 				</InspectorControls>
 			) }
-			{ ! content && (
-				<DropZone
-					clientId={ clientId }
-					paragraphElement={ paragraphElement }
-				/>
-			) }
+			<AnimatePresence>
+				{ ! content && isDropZoneVisible && (
+					<DropZone
+						key="empty-paragraph-drop-zone"
+						paragraphElement={ paragraphElement }
+					/>
+				) }
+			</AnimatePresence>
 			<RichText
 				identifier="content"
 				tagName="p"
diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
index f11907618f4468..1fc0fa06e88303 100644
--- a/packages/block-library/src/paragraph/editor.scss
+++ b/packages/block-library/src/paragraph/editor.scss
@@ -25,15 +25,10 @@
 		box-shadow: none;
 	}
 
-	.wp-block-paragraph__drop-zone-backdrop {
-		position: absolute;
-	}
-
 	.wp-block-paragraph__drop-zone-foreground {
 		position: absolute;
-		inset: 0;
-		pointer-events: none;
 		background-color: var(--wp-admin-theme-color);
+		pointer-events: none;
 		border-radius: 2px;
 	}
 }