refactor(lib): use react 18

src/components/Edges/EdgeText.tsx

@@ -1,9 +1,9 @@
-import React, { memo, useRef, useState, useEffect, FC } from 'react';
+import React, { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
 import cc from 'classcat';
 
 import { EdgeTextProps, Rect } from '../../types';
 
-const EdgeText: FC<EdgeTextProps> = ({
+const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
   x,
   y,
   label,

src/components/Edges/wrapEdge.tsx

@@ -140,7 +140,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const handleEdgeUpdater = useCallback(
       (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
         const nodeId = isSourceHandle ? target : source;
-        const handleId = isSourceHandle ? targetHandleId : sourceHandleId;
+        const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
         const handleType = isSourceHandle ? 'target' : 'source';
         const isValidConnection = () => true;
         const isTarget = isSourceHandle;

src/components/Nodes/wrapNode.tsx

@@ -232,6 +232,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     ]);
 
     return (
+      // @ts-ignore
       <DraggableCore
         onStart={onDragStart}
         onDrag={onDrag}

src/components/NodesSelection/index.tsx

@@ -113,6 +113,7 @@ function NodesSelection({
 
   return (
     <div className={cc(['react-flow__nodesselection', 'react-flow__container', noPanClassName])} style={style}>
+      {/* @ts-ignore */}
       <DraggableCore
         scale={tScale}
         grid={grid}