diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 051fdbd9..4d7f061d 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @xyflow/react
 
+## 12.0.0-next.11
+
+## Patch changes
+
+- fix `ref` prop for `ReactFlow` and `Handle` component
+
 ## 12.0.0-next.10
 
 ## ⚠️ Breaking changes
diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx
index 6a72b8e4..d4474c00 100644
--- a/packages/react/src/components/Handle/index.tsx
+++ b/packages/react/src/components/Handle/index.tsx
@@ -1,15 +1,10 @@
-/*
- * The Handle component is used to connect nodes. When the user mousedowns a handle, we start the connection process.
- * The user can then drag the connection to another handle or node. When the user releases the mouse, we check if the
- * connection is valid and if so, we call the onConnect callback.
- */
 import {
   memo,
-  HTMLAttributes,
   forwardRef,
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent,
-  ForwardedRef,
+  type HTMLAttributes,
+  type MouseEvent as ReactMouseEvent,
+  type TouchEvent as ReactTouchEvent,
+  type ForwardedRef,
 } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
@@ -245,6 +240,6 @@ function HandleComponent(
 }
 
 /**
- * The Handle component is the part of a node that can be used to connect nodes.
+ * The Handle component is a UI element that is used to connect nodes.
  */
 export const Handle = memo(forwardRef(HandleComponent));