fix(react): use fixedForwardRef function

packages/react/src/components/Handle/index.tsx

@@ -4,7 +4,6 @@ import {
   type TouchEvent as ReactTouchEvent,
   type ForwardedRef,
   memo,
-  forwardRef,
 } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
@@ -24,6 +23,7 @@ import {
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import { type ReactFlowState } from '../../types';
+import { fixedForwardRef } from '../../utils';
 
 export interface HandleComponentProps extends HandleProps, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {}
 
@@ -243,4 +243,4 @@ function HandleComponent(
 /**
  * The Handle component is a UI element that is used to connect nodes.
  */
-export const Handle = memo(forwardRef(HandleComponent));
+export const Handle = memo(fixedForwardRef(HandleComponent));

packages/react/src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, type CSSProperties } from 'react';
+import { ForwardedRef, type CSSProperties } from 'react';
 import cc from 'classcat';
 import { ConnectionLineType, PanOnScrollMode, SelectionMode, infiniteExtent, isMacOs } from '@xyflow/system';
 
@@ -11,6 +11,7 @@ import { GraphView } from '../GraphView';
 import { Wrapper } from './Wrapper';
 import type { Edge, Node, ReactFlowProps } from '../../types';
 import { defaultViewport as initViewport, defaultNodeOrigin } from './init-values';
+import { fixedForwardRef } from '../../utils/general';
 
 const wrapperStyle: CSSProperties = {
   width: '100%',
@@ -286,4 +287,4 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
   );
 }
 
-export default forwardRef(ReactFlow);
+export default fixedForwardRef(ReactFlow);

packages/react/src/types/general.ts

@@ -16,14 +16,6 @@ import {
 
 import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps, NodeProps } from '.';
 
-// this is needed, to use generics + forwardRef
-declare module 'react' {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-
 export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
 export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
 

packages/react/src/utils/general.ts

@@ -1,6 +1,7 @@
 import { isNodeBase, isEdgeBase } from '@xyflow/system';
 
 import type { Edge, Node } from '../types';
+import React from 'react';
 
 /**
  * Test whether an object is useable as a Node
@@ -21,3 +22,11 @@ export const isNode = <NodeType extends Node = Node>(element: unknown): element
  */
 export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
   isEdgeBase<EdgeType>(element);
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function fixedForwardRef<T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode
+): (props: P & React.RefAttributes<T>) => React.ReactNode {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return React.forwardRef(render) as any;
+}