diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx
index bfd8adda..b16c7299 100644
--- a/packages/core/src/components/UserSelection/index.tsx
+++ b/packages/core/src/components/UserSelection/index.tsx
@@ -4,7 +4,9 @@
 
 import { memo, useState, useRef } from 'react';
 import shallow from 'zustand/shallow';
+import cc from 'classcat';
 
+import { containerStyle } from '../../styles';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges } from '../../utils/changes';
 import { getConnectedEdges, getNodesInside } from '../../utils/graph';
@@ -59,6 +61,7 @@ const wrapHandlers = (
 const selector = (s: ReactFlowState) => ({
   userSelectionActive: s.userSelectionActive,
   elementsSelectable: s.elementsSelectable,
+  paneDragging: s.paneDragging,
 });
 
 const UserSelection = memo(
@@ -81,7 +84,7 @@ const UserSelection = memo(
     const prevSelectedEdgesCount = useRef<number>(0);
     const containerBounds = useRef<DOMRect>();
     const [userSelectionRect, setUserSelectionRect] = useState<SelectionRect | null>(null);
-    const { userSelectionActive, elementsSelectable } = useStore(selector, shallow);
+    const { userSelectionActive, elementsSelectable, paneDragging } = useStore(selector, shallow);
 
     const resetUserSelection = () => {
       setUserSelectionRect(null);
@@ -212,7 +215,12 @@ const UserSelection = memo(
           );
 
     return (
-      <div className="react-flow__pane react-flow__container" {...eventHandlers} ref={container}>
+      <div
+        className={cc(['react-flow__pane', 'react-flow__container', { dragging: paneDragging }])}
+        {...eventHandlers}
+        ref={container}
+        style={containerStyle}
+      >
         {children}
         {userSelectionActive && userSelectionRect && (
           <div
diff --git a/packages/core/src/container/FlowRenderer/Pane.tsx b/packages/core/src/container/FlowRenderer/Pane.tsx
deleted file mode 100644
index 60502182..00000000
--- a/packages/core/src/container/FlowRenderer/Pane.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { MouseEvent } from 'react';
-import cc from 'classcat';
-
-import { useStore } from '../../hooks/useStore';
-import { containerStyle } from '../../styles';
-import type { ReactFlowState } from '../../types';
-import type { FlowRendererProps } from '.';
-
-type PaneProps = Pick<FlowRendererProps, 'onClick' | 'onContextMenu' | 'onWheel'> & {
-  onMouseEnter?: (event: MouseEvent) => void;
-  onMouseMove?: (event: MouseEvent) => void;
-  onMouseLeave?: (event: MouseEvent) => void;
-};
-
-const selector = (s: ReactFlowState) => s.paneDragging;
-
-function Pane({ onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onWheel }: PaneProps) {
-  const dragging = useStore(selector);
-
-  return (
-    <div
-      className={cc(['react-flow__pane', { dragging }])}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseMove={onMouseMove}
-      onMouseLeave={onMouseLeave}
-      onContextMenu={onContextMenu}
-      onWheel={onWheel}
-      style={containerStyle}
-    />
-  );
-}
-
-export default Pane;
diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx
index de1f3dd5..84abdb23 100644
--- a/packages/core/src/container/FlowRenderer/index.tsx
+++ b/packages/core/src/container/FlowRenderer/index.tsx
@@ -8,7 +8,6 @@ import { GraphViewProps } from '../GraphView';
 import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
-import Pane from './Pane';
 import type { ReactFlowState } from '../../types';
 
 export type FlowRendererProps = Omit<