refactor(examples): update types of some examples

example/src/Undirectional/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import React, { MouseEvent, useCallback } from 'react';
 
 import ReactFlow, {
   useReactFlow,
@@ -189,7 +189,7 @@ const UpdateNodeInternalsFlow = () => {
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
 
   const onPaneClick = useCallback(
-    (evt) =>
+    (evt: MouseEvent) =>
       setNodes((nds) =>
         nds.concat({
           id: getId(),
@@ -198,7 +198,7 @@ const UpdateNodeInternalsFlow = () => {
           data: null,
         })
       ),
-    [project]
+    [project, setNodes]
   );
 
   return (

example/src/UseReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, MouseEvent } from 'react';
 
 import ReactFlow, {
   Node,
@@ -36,7 +36,7 @@ const UseZoomPanHelperFlow = () => {
   const { project, setCenter, zoomIn, zoomOut, fitView, addNodes, setNodes: setNodesHook } = useReactFlow();
 
   const onPaneClick = useCallback(
-    (evt) => {
+    (evt: MouseEvent) => {
       const projectedPosition = project({ x: evt.clientX, y: evt.clientY - 40 });
 
       setNodes((nds) =>
@@ -53,8 +53,8 @@ const UseZoomPanHelperFlow = () => {
   );
 
   const onNodeClick = useCallback(
-    (_, element) => {
-      const { x, y } = element.position;
+    (_: MouseEvent, node: Node) => {
+      const { x, y } = node.position;
       setCenter(x, y, { zoom: 1, duration: 1200 });
     },
     [setCenter]
@@ -72,9 +72,7 @@ const UseZoomPanHelperFlow = () => {
     addNodes(newNode);
   }, [addNodes]);
 
-  const onResetNodes = useCallback(() => {
-    setNodesHook(initialNodes);
-  }, [setNodesHook]);
+  const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]);
 
   return (
     <ReactFlow

example/src/UseUpdateNodeInternals/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, CSSProperties } from 'react';
+import { useCallback, CSSProperties, MouseEvent } from 'react';
 
 import ReactFlow, {
   NodeTypes,
@@ -44,7 +44,7 @@ const UpdateNodeInternalsFlow = () => {
   const { project } = useReactFlow();
 
   const onPaneClick = useCallback(
-    (evt) =>
+    (evt: MouseEvent) =>
       setNodes((nds) =>
         nds.concat({
           id: getId(),
@@ -54,7 +54,7 @@ const UpdateNodeInternalsFlow = () => {
           sourcePosition: Position.Right,
         })
       ),
-    [project]
+    [project, setNodes]
   );
 
   const toggleHandleCount = useCallback(() => {
@@ -63,7 +63,7 @@ const UpdateNodeInternalsFlow = () => {
         return { ...node, data: { ...node.data, handleCount: node.data?.handleCount === 1 ? 2 : 1 } };
       })
     );
-  }, []);
+  }, [setNodes]);
 
   const toggleHandlePosition = useCallback(() => {
     setNodes((nds) =>
@@ -71,7 +71,7 @@ const UpdateNodeInternalsFlow = () => {
         return { ...node, data: { ...node.data, handlePosition: node.data?.handlePosition === 0 ? 1 : 0 } };
       })
     );
-  }, []);
+  }, [setNodes]);
 
   const updateNode = useCallback(() => updateNodeInternals('1'), [updateNodeInternals]);