diff --git a/.eslintrc.json b/.eslintrc.json
index 0864a267..d128d331 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -9,6 +9,7 @@
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:react/jsx-runtime",
     "prettier"
   ],
   "overrides": [
@@ -31,13 +32,7 @@
       "version": "detect"
     }
   },
-  "plugins": [
-    "react",
-    "react-hooks",
-    "@typescript-eslint",
-    "patternfly-react",
-    "prettier"
-  ],
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "patternfly-react", "prettier"],
   "rules": {
     "@typescript-eslint/adjacent-overload-signatures": "error",
     "@typescript-eslint/array-type": "error",
diff --git a/README.md b/README.md
index 3fae65c3..a2e9b129 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,7 @@ To use Topology out of the box, follow these steps:
 ## Example
 
 ```ts
-import * as React from 'react';
+import { memo, useState, useMemo } from 'react';
 import {
   EdgeStyle,
   Model,
@@ -172,10 +172,10 @@ const EDGES = [
   }
 ];
 
-export const TopologyBaselineDemo = React.memo(() => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+export const TopologyBaselineDemo = memo(() => {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/demo-app-ts/src/App.test.tsx b/packages/demo-app-ts/src/App.test.tsx
index a754b201..1c039be5 100755
--- a/packages/demo-app-ts/src/App.test.tsx
+++ b/packages/demo-app-ts/src/App.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const root = createRoot(div);
+  root.render(<App />);
+  root.unmount();
 });
diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx
index 7e363842..933448ec 100755
--- a/packages/demo-app-ts/src/App.tsx
+++ b/packages/demo-app-ts/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import {
   Page,
@@ -81,7 +81,7 @@ class App extends React.Component<{}, AppState> {
                       style={{ zIndex: 2 }}
                       id={`/${demo.id}-nav-link/${subDemo.id}-nav-link`}
                     >
-                      {React.createElement(subDemo.componentType)}
+                      {createElement(subDemo.componentType)}
                     </PageSection>
                   )}
                   key={demo.id}
@@ -94,7 +94,7 @@ class App extends React.Component<{}, AppState> {
                 path={`/${demo.id}-nav-link`}
                 render={() => (
                   <PageSection isFilled hasBodyWrapper={false} style={{ zIndex: 2 }} id={`/${demo.id}-page-section`}>
-                    {React.createElement(demo.componentType)}
+                    {createElement(demo.componentType)}
                   </PageSection>
                 )}
                 key={demo.id}
@@ -108,7 +108,7 @@ class App extends React.Component<{}, AppState> {
             path="/"
             render={() => (
               <PageSection isFilled hasBodyWrapper={false} style={{ zIndex: 2 }} id={`/${defaultDemo.id}-page-section`}>
-                {React.createElement(defaultDemo.componentType)}
+                {createElement(defaultDemo.componentType)}
               </PageSection>
             )}
             key={defaultDemo.id}
diff --git a/packages/demo-app-ts/src/components/CustomCircleNode.tsx b/packages/demo-app-ts/src/components/CustomCircleNode.tsx
index 3aa438dc..f9e813f0 100644
--- a/packages/demo-app-ts/src/components/CustomCircleNode.tsx
+++ b/packages/demo-app-ts/src/components/CustomCircleNode.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,
@@ -28,7 +28,7 @@ type CustomCircleNodeProps = {
 
 const CustomCircle: React.FunctionComponent<ShapeProps> = ({ element, className }) => {
   useAnchor(EllipseAnchor);
-  React.useEffect(() => {
+  useEffect(() => {
     // init height
     element.setDimensions(new Dimensions(40, 40));
   }, [element]);
diff --git a/packages/demo-app-ts/src/components/CustomPathNode.tsx b/packages/demo-app-ts/src/components/CustomPathNode.tsx
index e69bd690..d36cb9bd 100644
--- a/packages/demo-app-ts/src/components/CustomPathNode.tsx
+++ b/packages/demo-app-ts/src/components/CustomPathNode.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,
diff --git a/packages/demo-app-ts/src/components/CustomPolygonNode.tsx b/packages/demo-app-ts/src/components/CustomPolygonNode.tsx
index 17ad52e4..3a6e98b5 100644
--- a/packages/demo-app-ts/src/components/CustomPolygonNode.tsx
+++ b/packages/demo-app-ts/src/components/CustomPolygonNode.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,
diff --git a/packages/demo-app-ts/src/components/CustomRectNode.tsx b/packages/demo-app-ts/src/components/CustomRectNode.tsx
index 6677b8b5..666ac7a1 100644
--- a/packages/demo-app-ts/src/components/CustomRectNode.tsx
+++ b/packages/demo-app-ts/src/components/CustomRectNode.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,
diff --git a/packages/demo-app-ts/src/components/DemoDefaultEdge.tsx b/packages/demo-app-ts/src/components/DemoDefaultEdge.tsx
index 858396c1..ba28626a 100644
--- a/packages/demo-app-ts/src/components/DemoDefaultEdge.tsx
+++ b/packages/demo-app-ts/src/components/DemoDefaultEdge.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState } from 'react';
 import { observer } from 'mobx-react';
 import {
   Edge,
@@ -25,7 +25,7 @@ interface BendpointProps {
 }
 
 const Bendpoint: React.FunctionComponent<BendpointProps> = observer(({ point }) => {
-  const [hover, setHover] = React.useState(false);
+  const [hover, setHover] = useState(false);
   const [, ref] = useBendpoint(point);
   return (
     <circle
diff --git a/packages/demo-app-ts/src/components/DemoDefaultGroup.tsx b/packages/demo-app-ts/src/components/DemoDefaultGroup.tsx
index fbee8b4a..d9efb054 100644
--- a/packages/demo-app-ts/src/components/DemoDefaultGroup.tsx
+++ b/packages/demo-app-ts/src/components/DemoDefaultGroup.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef } from 'react';
 import { observer } from 'mobx-react';
 import {
   useCombineRefs,
@@ -39,7 +39,7 @@ const DemoDefaultGroup: React.FunctionComponent<GroupProps> = ({
 }) => {
   const nodeElement = element as Node;
   useAnchor(RectAnchor);
-  const boxRef = React.useRef<Rect | null>(null);
+  const boxRef = useRef<Rect | null>(null);
   const refs = useCombineRefs<SVGRectElement>(dragNodeRef, dndDragRef, dndDropRef);
 
   if (!droppable || !boxRef.current) {
diff --git a/packages/demo-app-ts/src/components/DemoDefaultNode.tsx b/packages/demo-app-ts/src/components/DemoDefaultNode.tsx
index 046d069e..0265b50b 100644
--- a/packages/demo-app-ts/src/components/DemoDefaultNode.tsx
+++ b/packages/demo-app-ts/src/components/DemoDefaultNode.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import {
@@ -52,7 +52,7 @@ const DemoDefaultNode: React.FunctionComponent<DemoDefaultNodeProps> = ({
   });
   const ShapeComponent = (getCustomShape && getCustomShape(nodeElement)) || getShapeComponent(nodeElement);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (hover) {
       onShowCreateConnector && onShowCreateConnector();
     } else {
diff --git a/packages/demo-app-ts/src/components/GroupHull.tsx b/packages/demo-app-ts/src/components/GroupHull.tsx
index 441f52c5..0b693d31 100644
--- a/packages/demo-app-ts/src/components/GroupHull.tsx
+++ b/packages/demo-app-ts/src/components/GroupHull.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef } from 'react';
 import { observer } from 'mobx-react';
 import { polygonHull } from 'd3-polygon';
 import {
@@ -45,7 +45,7 @@ const GroupHull: React.FunctionComponent<GroupHullProps> = ({
   canDrop
 }) => {
   const nodeElement = element as Node;
-  const pathRef = React.useRef<string | null>(null);
+  const pathRef = useRef<string | null>(null);
   const refs = useCombineRefs<SVGPathElement | SVGRectElement>(dragNodeRef, dndDragRef, dndDropRef);
   useAnchor(RectAnchor);
 
diff --git a/packages/demo-app-ts/src/components/MultiEdge.tsx b/packages/demo-app-ts/src/components/MultiEdge.tsx
index 824092d7..8ccda5b8 100644
--- a/packages/demo-app-ts/src/components/MultiEdge.tsx
+++ b/packages/demo-app-ts/src/components/MultiEdge.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Edge, vecSum, vecScale, unitNormal, GraphElement } from '@patternfly/react-topology';
 
diff --git a/packages/demo-app-ts/src/components/NodeRect.tsx b/packages/demo-app-ts/src/components/NodeRect.tsx
index a1d1808a..3ccb1100 100644
--- a/packages/demo-app-ts/src/components/NodeRect.tsx
+++ b/packages/demo-app-ts/src/components/NodeRect.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   Node,
diff --git a/packages/demo-app-ts/src/components/actionsComponentFactory.tsx b/packages/demo-app-ts/src/components/actionsComponentFactory.tsx
index 6b4d3625..e331446f 100644
--- a/packages/demo-app-ts/src/components/actionsComponentFactory.tsx
+++ b/packages/demo-app-ts/src/components/actionsComponentFactory.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   GraphElement,
   ComponentFactory,
diff --git a/packages/demo-app-ts/src/components/shapes/Path.tsx b/packages/demo-app-ts/src/components/shapes/Path.tsx
index c44676b7..d91b5776 100644
--- a/packages/demo-app-ts/src/components/shapes/Path.tsx
+++ b/packages/demo-app-ts/src/components/shapes/Path.tsx
@@ -1,5 +1,4 @@
 import { ShapeProps, useCombineRefs, useSvgAnchor } from '@patternfly/react-topology';
-import * as React from 'react';
 
 const Path: React.FunctionComponent<ShapeProps> = ({ className, width, height, filter, dndDropRef }) => {
   const anchorRef = useSvgAnchor();
diff --git a/packages/demo-app-ts/src/components/shapes/Polygon.tsx b/packages/demo-app-ts/src/components/shapes/Polygon.tsx
index 8c4e6804..428448ca 100644
--- a/packages/demo-app-ts/src/components/shapes/Polygon.tsx
+++ b/packages/demo-app-ts/src/components/shapes/Polygon.tsx
@@ -1,8 +1,8 @@
 import { PointTuple, ShapeProps, usePolygonAnchor } from '@patternfly/react-topology';
-import * as React from 'react';
+import { useMemo } from 'react';
 
 const Polygon: React.FunctionComponent<ShapeProps> = ({ className, width, height, filter, dndDropRef }) => {
-  const points: PointTuple[] = React.useMemo(
+  const points: PointTuple[] = useMemo(
     () => [
       [width / 2, 0],
       [width - width / 8, height],
diff --git a/packages/demo-app-ts/src/demos/Basics.tsx b/packages/demo-app-ts/src/demos/Basics.tsx
index 55e2b47f..e2b31bf7 100644
--- a/packages/demo-app-ts/src/demos/Basics.tsx
+++ b/packages/demo-app-ts/src/demos/Basics.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo, useCallback, useState } from 'react';
 import {
   DefaultNode,
   Model,
@@ -17,7 +17,7 @@ import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 export const SingleNode = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -43,7 +43,7 @@ export const SingleNode = withTopologySetup(() => {
 export const SingleEdge = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -89,7 +89,7 @@ export const SingleEdge = withTopologySetup(() => {
 export const MultiEdge = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind) => {
+    useCallback<ComponentFactory>((kind) => {
       if (kind === ModelKind.node) {
         return withDragNode()(DefaultNode);
       }
@@ -97,7 +97,7 @@ export const MultiEdge = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -193,7 +193,7 @@ const groupStory =
   () => {
     useComponentFactory(defaultComponentFactory);
     useModel(
-      React.useMemo(
+      useMemo(
         (): Model => ({
           graph: {
             id: 'g1',
@@ -247,7 +247,7 @@ export const GroupHull = withTopologySetup(groupStory('group-hull'));
 export const AutoSizeNode = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       if (type === 'autoSize-circle') {
         return CustomCircleNode;
       }
@@ -258,7 +258,7 @@ export const AutoSizeNode = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -317,7 +317,7 @@ export const AutoSizeNode = withTopologySetup(() => {
 });
 
 export const Basics: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
diff --git a/packages/demo-app-ts/src/demos/CollapsibleGroups.tsx b/packages/demo-app-ts/src/demos/CollapsibleGroups.tsx
index b92fcb65..437800a7 100644
--- a/packages/demo-app-ts/src/demos/CollapsibleGroups.tsx
+++ b/packages/demo-app-ts/src/demos/CollapsibleGroups.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useEffect } from 'react';
 import { action } from 'mobx';
 import {
   TopologyView,
@@ -117,12 +117,12 @@ interface TopologyViewComponentProps {
 }
 
 const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps> = ({ vis }) => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>();
-  const [collapseBlue, setCollapseBlue] = React.useState<boolean>(false);
-  const [collapseLightBlue, setCollapseLightBlue] = React.useState<boolean>(false);
-  const [collapseCyan, setCollapseCyan] = React.useState<boolean>(false);
-  const [collapseOrange, setCollapseOrange] = React.useState<boolean>(false);
-  const [collapsePink, setCollapsePink] = React.useState<boolean>(false);
+  const [selectedIds, setSelectedIds] = useState<string[]>();
+  const [collapseBlue, setCollapseBlue] = useState<boolean>(false);
+  const [collapseLightBlue, setCollapseLightBlue] = useState<boolean>(false);
+  const [collapseCyan, setCollapseCyan] = useState<boolean>(false);
+  const [collapseOrange, setCollapseOrange] = useState<boolean>(false);
+  const [collapsePink, setCollapsePink] = useState<boolean>(false);
 
   useEventListener<SelectionEventListener>(SELECTION_EVENT, (ids) => {
     setSelectedIds(ids);
@@ -183,7 +183,7 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
     </>
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     action(() => {
       const collapsedTypes: string[] = [];
       if (collapseBlue) {
diff --git a/packages/demo-app-ts/src/demos/Connectors.tsx b/packages/demo-app-ts/src/demos/Connectors.tsx
index 72e0b384..53f08359 100644
--- a/packages/demo-app-ts/src/demos/Connectors.tsx
+++ b/packages/demo-app-ts/src/demos/Connectors.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import {
   Model,
   ModelKind,
@@ -38,7 +38,7 @@ import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 export const Reconnect = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind) => {
+    useCallback<ComponentFactory>((kind) => {
       if (kind === ModelKind.graph) {
         return withPanZoom()(GraphComponent);
       }
@@ -96,7 +96,7 @@ export const Reconnect = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -158,7 +158,7 @@ type ColorChoice = ConnectorChoice & {
 };
 
 export const CreateConnector = withTopologySetup(() => {
-  const model = React.useMemo(
+  const model = useMemo(
     (): Model => ({
       graph: {
         id: 'g1',
@@ -196,7 +196,7 @@ export const CreateConnector = withTopologySetup(() => {
   const controller = useVisualizationController();
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>(
+    useCallback<ComponentFactory>(
       (kind) => {
         if (kind === ModelKind.graph) {
           return withDndDrop({
@@ -295,7 +295,7 @@ const NodeWithPointAnchor: React.FunctionComponent<{ element: GraphElement } & W
 export const Anchors = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind) => {
+    useCallback<ComponentFactory>((kind) => {
       if (kind === ModelKind.node) {
         return withDragNode()(NodeWithPointAnchor);
       }
@@ -303,7 +303,7 @@ export const Anchors = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -357,7 +357,7 @@ export const Anchors = withTopologySetup(() => {
 });
 
 export const Connectors: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
diff --git a/packages/demo-app-ts/src/demos/ContextMenus.tsx b/packages/demo-app-ts/src/demos/ContextMenus.tsx
index 2eb87934..d703126d 100644
--- a/packages/demo-app-ts/src/demos/ContextMenus.tsx
+++ b/packages/demo-app-ts/src/demos/ContextMenus.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import {
   ContextMenu,
   ContextMenuItem,
@@ -42,7 +42,7 @@ export const UncontrolledContextMenu = () => (
 );
 
 export const ControlledContextMenu = () => {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
   return (
     <>
       <button type="button" onClick={() => setOpen(true)} style={{ marginTop: 20 }}>
@@ -58,7 +58,7 @@ export const ControlledContextMenu = () => {
 export const ContextMenuOnNode = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind) => {
+    useCallback<ComponentFactory>((kind) => {
       if (kind === ModelKind.graph) {
         return withPanZoom()(GraphComponent);
       }
@@ -69,7 +69,7 @@ export const ContextMenuOnNode = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -102,7 +102,7 @@ const createDelayedMenu = (): Promise<React.ReactElement[]> => {
 export const ContextMenuPromise = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind) => {
+    useCallback<ComponentFactory>((kind) => {
       if (kind === ModelKind.graph) {
         return withPanZoom()(GraphComponent);
       }
@@ -113,7 +113,7 @@ export const ContextMenuPromise = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -137,7 +137,7 @@ export const ContextMenuPromise = withTopologySetup(() => {
 });
 
 export const ContextMenus: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
diff --git a/packages/demo-app-ts/src/demos/DemoControlBar.tsx b/packages/demo-app-ts/src/demos/DemoControlBar.tsx
index 8a6eeecf..78b65b27 100644
--- a/packages/demo-app-ts/src/demos/DemoControlBar.tsx
+++ b/packages/demo-app-ts/src/demos/DemoControlBar.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   createTopologyControlButtons,
   defaultControlButtonsOptions,
diff --git a/packages/demo-app-ts/src/demos/DragDrop.tsx b/packages/demo-app-ts/src/demos/DragDrop.tsx
index 1ebb6a4c..76c1c533 100644
--- a/packages/demo-app-ts/src/demos/DragDrop.tsx
+++ b/packages/demo-app-ts/src/demos/DragDrop.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import {
   Model,
@@ -32,7 +32,7 @@ export const Dnd = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   // support pan zoom and drag
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       if (kind === ModelKind.graph) {
         return withPanZoom()(GraphComponent);
       }
@@ -74,7 +74,7 @@ export const Dnd = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -151,7 +151,7 @@ export const DndShiftRegroup = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   // support pan zoom and drag
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       if (kind === ModelKind.graph) {
         return withPanZoom()(GraphComponent);
       }
@@ -184,7 +184,7 @@ export const DndShiftRegroup = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -261,7 +261,7 @@ export const DndEdges = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   // support pan zoom and drag
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       if (kind === ModelKind.graph) {
         return withPanZoom()(GraphComponent);
       }
@@ -336,7 +336,7 @@ export const DndEdges = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -418,7 +418,7 @@ export const DndEdges = withTopologySetup(() => {
 });
 
 export const DragAndDrop: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
diff --git a/packages/demo-app-ts/src/demos/Groups.tsx b/packages/demo-app-ts/src/demos/Groups.tsx
index 77ecd143..0d822ab1 100644
--- a/packages/demo-app-ts/src/demos/Groups.tsx
+++ b/packages/demo-app-ts/src/demos/Groups.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo, useCallback } from 'react';
 import { observer } from 'mobx-react';
 import {
   Model,
@@ -44,7 +44,7 @@ export const ComplexGroup = withTopologySetup(() => {
   useLayoutFactory(defaultLayoutFactory);
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       if (type === 'service') {
         return withDragNode()(GroupWithDecorator);
       }
@@ -56,7 +56,7 @@ export const ComplexGroup = withTopologySetup(() => {
   );
 
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
diff --git a/packages/demo-app-ts/src/demos/Layouts.tsx b/packages/demo-app-ts/src/demos/Layouts.tsx
index ba975ddc..ce60cec5 100644
--- a/packages/demo-app-ts/src/demos/Layouts.tsx
+++ b/packages/demo-app-ts/src/demos/Layouts.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback, useState } from 'react';
 import {
   Model,
   ModelKind,
@@ -41,7 +41,7 @@ const layoutStory =
 
     // support pan zoom and drag
     useComponentFactory(
-      React.useCallback<ComponentFactory>((kind: string, type: string) => {
+      useCallback<ComponentFactory>((kind: string, type: string) => {
         if (kind === ModelKind.graph) {
           return withPanZoom()(GraphComponent);
         }
@@ -66,7 +66,7 @@ export const Dagre = withTopologySetup(layoutStory(getModel('Dagre')));
 export const Cola = withTopologySetup(layoutStory(getModel('Cola')));
 
 export const Layouts: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
diff --git a/packages/demo-app-ts/src/demos/PanZoom.tsx b/packages/demo-app-ts/src/demos/PanZoom.tsx
index 8d402637..0bc9b167 100644
--- a/packages/demo-app-ts/src/demos/PanZoom.tsx
+++ b/packages/demo-app-ts/src/demos/PanZoom.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback, useEffect } from 'react';
 import { reaction } from 'mobx';
 import {
   Model,
@@ -50,7 +50,7 @@ const model: Model = {
 export const PanZoom: React.FunctionComponent = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind) => {
+    useCallback<ComponentFactory>((kind) => {
       if (kind === ModelKind.graph) {
         return withPanZoom()(GraphComponent);
       }
@@ -59,7 +59,7 @@ export const PanZoom: React.FunctionComponent = withTopologySetup(() => {
   );
   const controller = useVisualizationController();
 
-  React.useEffect(() => {
+  useEffect(() => {
     reaction(
       () => {
         if (!controller.hasGraph()) {
diff --git a/packages/demo-app-ts/src/demos/Selection.tsx b/packages/demo-app-ts/src/demos/Selection.tsx
index 894522a5..05d7c8bb 100644
--- a/packages/demo-app-ts/src/demos/Selection.tsx
+++ b/packages/demo-app-ts/src/demos/Selection.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback, useState } from 'react';
 import {
   Model,
   ModelKind,
@@ -53,7 +53,7 @@ const twoNodeModel: Model = {
 
 export const UncontrolledSelection: React.FunctionComponent = withTopologySetup(() => {
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       const widget = defaultComponentFactory(kind, type);
       if (kind === ModelKind.node || kind === ModelKind.graph) {
         // TODO fix any type
@@ -64,7 +64,7 @@ export const UncontrolledSelection: React.FunctionComponent = withTopologySetup(
   );
   useEventListener(
     SELECTION_EVENT,
-    React.useCallback<SelectionEventListener>(([id]) => {
+    useCallback<SelectionEventListener>(([id]) => {
       // eslint-disable-next-line no-console
       console.log(`Selection event`, id);
     }, [])
@@ -77,7 +77,7 @@ UncontrolledSelection.displayName = 'UncontrolledSelection';
 export const ControlledSelection = withTopologySetup(() => {
   const [, setSelectedIds] = useVisualizationState(SELECTION_STATE);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       const widget = defaultComponentFactory(kind, type);
       if (kind === ModelKind.node || kind === ModelKind.graph) {
         // TODO fix any type
@@ -88,7 +88,7 @@ export const ControlledSelection = withTopologySetup(() => {
   );
   useEventListener(
     SELECTION_EVENT,
-    React.useCallback<SelectionEventListener>(
+    useCallback<SelectionEventListener>(
       (ids) => {
         // eslint-disable-next-line no-console
         console.log(`Selection event`, ids);
@@ -104,7 +104,7 @@ export const ControlledSelection = withTopologySetup(() => {
 export const MultiSelect: React.FunctionComponent = withTopologySetup(() => {
   useModel(twoNodeModel);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       const widget = defaultComponentFactory(kind, type);
       if (kind === ModelKind.node || kind === ModelKind.graph) {
         // TODO fix any type
@@ -115,7 +115,7 @@ export const MultiSelect: React.FunctionComponent = withTopologySetup(() => {
   );
   useEventListener(
     SELECTION_EVENT,
-    React.useCallback<SelectionEventListener>((ids) => {
+    useCallback<SelectionEventListener>((ids) => {
       // eslint-disable-next-line no-console
       console.log(`Selection event`, ids);
     }, [])
@@ -148,7 +148,7 @@ for (let i = 1; i <= 100; i++) {
 export const Performance: React.FunctionComponent = withTopologySetup(() => {
   useModel(perfModel);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       const widget = defaultComponentFactory(kind, type);
       if (kind === ModelKind.node || kind === ModelKind.graph) {
         // TODO fix any type
@@ -162,7 +162,7 @@ export const Performance: React.FunctionComponent = withTopologySetup(() => {
 Performance.displayName = 'Performance';
 
 export const Selection: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
diff --git a/packages/demo-app-ts/src/demos/Shapes.tsx b/packages/demo-app-ts/src/demos/Shapes.tsx
index 9616ae14..8f292c96 100644
--- a/packages/demo-app-ts/src/demos/Shapes.tsx
+++ b/packages/demo-app-ts/src/demos/Shapes.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useMemo } from 'react';
 import {
   Model,
   ModelKind,
@@ -22,7 +22,7 @@ export const Shapes = withTopologySetup(() => {
   useComponentFactory(shapesComponentFactory);
   // support pan zoom and drag
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       if (kind === ModelKind.graph) {
         return withPanZoom()(GraphComponent);
       }
@@ -33,7 +33,7 @@ export const Shapes = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskEdge.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskEdge.tsx
index 3ad59664..4c2c7925 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskEdge.tsx
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskEdge.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   DEFAULT_SPACER_NODE_TYPE,
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
index 64774f28..29279761 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   DagreLayoutOptions,
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskNode.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskNode.tsx
index 4633ced2..c24be9f3 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskNode.tsx
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskNode.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   DEFAULT_LAYER,
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/OptionsBar.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/OptionsBar.tsx
index 75a57546..705403f5 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/OptionsBar.tsx
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/OptionsBar.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { useContext } from 'react';
 import { Radio, Content, ToolbarItem } from '@patternfly/react-core';
 import { observer } from '@patternfly/react-topology';
 import { PipelineGroupsDemoContext } from './PipelineGroupsDemoContext';
 
 const OptionsBar: React.FC = observer(() => {
-  const pipelineOptions = React.useContext(PipelineGroupsDemoContext);
+  const pipelineOptions = useContext(PipelineGroupsDemoContext);
 
   return (
     <>
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemo.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemo.tsx
index ff9e27ec..d9bb33ad 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemo.tsx
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemo.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useContext, useState, useEffect, useCallback } from 'react';
 import {
   Graph,
   Layout,
@@ -37,8 +37,8 @@ import DemoControlBar from '../DemoControlBar';
 
 const TopologyPipelineGroups: React.FC<{ nodes: PipelineNodeModel[] }> = observer(({ nodes }) => {
   const controller = useVisualizationController();
-  const options = React.useContext(PipelineGroupsDemoContext);
-  const [selectedIds, setSelectedIds] = React.useState<string[]>();
+  const options = useContext(PipelineGroupsDemoContext);
+  const [selectedIds, setSelectedIds] = useState<string[]>();
 
   useEventListener<SelectionEventListener>(SELECTION_EVENT, (ids) => {
     if (ids?.[0]) {
@@ -63,7 +63,7 @@ const TopologyPipelineGroups: React.FC<{ nodes: PipelineNodeModel[] }> = observe
     setSelectedIds(ids);
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     const pipelineNodes = addSpacerNodes(nodes);
     const edges = getEdgesFromNodes(pipelineNodes, DEFAULT_SPACER_NODE_TYPE, 'edge', 'edge');
 
@@ -83,7 +83,7 @@ const TopologyPipelineGroups: React.FC<{ nodes: PipelineNodeModel[] }> = observe
     );
   }, [controller, nodes, options.verticalLayout]);
 
-  const collapseAllCallback = React.useCallback(
+  const collapseAllCallback = useCallback(
     (collapseAll: boolean) => {
       // First, expand/collapse all nodes
       collapseAll ? controller.getGraph().collapseAll() : controller.getGraph().expandAll();
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemoContext.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemoContext.tsx
index 8b4bc20b..0d62297b 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemoContext.tsx
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemoContext.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createContext } from 'react';
 import { makeObservable, observable, action } from 'mobx';
 
 export class PipelineGroupsDemoModel {
@@ -19,4 +19,4 @@ export class PipelineGroupsDemoModel {
   };
 }
 
-export const PipelineGroupsDemoContext = React.createContext<PipelineGroupsDemoModel>(new PipelineGroupsDemoModel());
+export const PipelineGroupsDemoContext = createContext<PipelineGroupsDemoModel>(new PipelineGroupsDemoModel());
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/pipelineGroupsComponentFactory.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/pipelineGroupsComponentFactory.tsx
index aba7e1de..52700a42 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/pipelineGroupsComponentFactory.tsx
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/pipelineGroupsComponentFactory.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   GraphElement,
   ComponentFactory,
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoFinallyNode.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoFinallyNode.tsx
index 554493e4..e2fc316f 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoFinallyNode.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoFinallyNode.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   DEFAULT_LAYER,
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx
index da313b93..bd5a65d9 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   DefaultTaskGroup,
   GraphElement,
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskEdge.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskEdge.tsx
index 82aaa029..a7445f0f 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskEdge.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskEdge.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import { observer } from 'mobx-react';
 import { Edge, EdgeTerminalType, GraphElement, TaskEdge } from '@patternfly/react-topology';
 import { PipelineDemoContext } from './PipelineDemoContext';
@@ -8,7 +8,7 @@ interface DemoTaskEdgeProps {
 }
 
 const DemoTaskEdge: React.FunctionComponent<DemoTaskEdgeProps> = ({ element, ...props }) => {
-  const pipelineOptions = React.useContext(PipelineDemoContext);
+  const pipelineOptions = useContext(PipelineDemoContext);
 
   return (
     <TaskEdge
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskGroupEdge.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskGroupEdge.tsx
index 04496f46..aa1ee94f 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskGroupEdge.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskGroupEdge.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import { observer } from 'mobx-react';
 import { Edge, EdgeTerminalType, GraphElement, TaskEdge } from '@patternfly/react-topology';
 import { PipelineDemoContext } from './PipelineDemoContext';
@@ -10,7 +10,7 @@ interface DemoTaskEdgeProps {
 }
 
 const DemoTaskGroupEdge: React.FunctionComponent<DemoTaskEdgeProps> = ({ element, ...props }) => {
-  const pipelineOptions = React.useContext(PipelineDemoContext);
+  const pipelineOptions = useContext(PipelineDemoContext);
 
   return (
     <TaskEdge
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx
index 79dcc359..b3f7aeeb 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import { observer } from 'mobx-react';
 import {
   DEFAULT_LAYER,
@@ -46,7 +46,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
   contextMenuOpen,
   ...rest
 }) => {
-  const pipelineOptions = React.useContext(PipelineDemoContext);
+  const pipelineOptions = useContext(PipelineDemoContext);
   const nodeElement = element as Node;
   const data = element.getData();
   const [hover, hoverRef] = useHover();
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineDemoContext.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineDemoContext.tsx
index 2bbffc75..536cfb7a 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineDemoContext.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineDemoContext.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createContext } from 'react';
 import { makeObservable, observable, action } from 'mobx';
 
 export class PipelineDemoModel {
@@ -89,4 +89,4 @@ export class PipelineDemoModel {
   };
 }
 
-export const PipelineDemoContext = React.createContext<PipelineDemoModel>(new PipelineDemoModel());
+export const PipelineDemoContext = createContext<PipelineDemoModel>(new PipelineDemoModel());
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineLayoutDemo.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineLayoutDemo.tsx
index 2161f44e..20130e7c 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineLayoutDemo.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineLayoutDemo.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, useContext, useEffect, memo } from 'react';
 import {
   Graph,
   Layout,
@@ -36,10 +36,10 @@ const VERTICAL_SUFFIX = '_Vertical';
 const PIPELINE_LAYOUT = 'PipelineLayout';
 
 const TopologyPipelineLayout: React.FC = observer(() => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>();
+  const [selectedIds, setSelectedIds] = useState<string[]>();
 
   const controller = useVisualizationController();
-  const pipelineOptions = React.useContext(PipelineDemoContext);
+  const pipelineOptions = useContext(PipelineDemoContext);
   const pipelineNodes = useDemoPipelineNodes(
     pipelineOptions.showContextMenus,
     pipelineOptions.showBadges,
@@ -48,7 +48,7 @@ const TopologyPipelineLayout: React.FC = observer(() => {
     pipelineOptions.showGroups
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     const spacerNodes = getSpacerNodes(pipelineNodes);
     const nodes = [...pipelineNodes, ...spacerNodes];
     const edgeType = pipelineOptions.showGroups ? GROUPED_EDGE_TYPE : DEFAULT_EDGE_TYPE;
@@ -93,7 +93,7 @@ const TopologyPipelineLayout: React.FC = observer(() => {
 
 TopologyPipelineLayout.displayName = 'TopologyPipelineLayout';
 
-export const PipelineLayoutDemo = React.memo(() => {
+export const PipelineLayoutDemo = memo(() => {
   const controller = new Visualization();
   controller.setFitToScreenOnLayout(true);
   controller.registerComponentFactory(pipelineComponentFactory);
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineOptionsBar.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineOptionsBar.tsx
index d1b1ce51..daf03ecc 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineOptionsBar.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineOptionsBar.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { useContext } from 'react';
 import { Checkbox, ToolbarItem } from '@patternfly/react-core';
 import { observer } from '@patternfly/react-topology';
 import { PipelineDemoContext } from './PipelineDemoContext';
 
 const PipelineOptionsBar: React.FC<{ isLayout?: boolean }> = observer(({ isLayout = false }) => {
-  const pipelineOptions = React.useContext(PipelineDemoContext);
+  const pipelineOptions = useContext(PipelineDemoContext);
 
   return (
     <>
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineTasksDemo.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineTasksDemo.tsx
index d9d13e98..1b4a95bf 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineTasksDemo.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineTasksDemo.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, useContext, useEffect, memo } from 'react';
 import {
   observer,
   TopologyView,
@@ -18,17 +18,17 @@ import PipelineOptionsBar from './PipelineOptionsBar';
 export const TASKS_TITLE = 'Tasks';
 
 export const PipelineTasks: React.FC = observer(() => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>();
+  const [selectedIds, setSelectedIds] = useState<string[]>();
 
   const controller = useVisualizationController();
-  const pipelineOptions = React.useContext(PipelineDemoContext);
+  const pipelineOptions = useContext(PipelineDemoContext);
   const pipelineNodes = useDemoPipelineNodes(
     pipelineOptions.showContextMenus,
     pipelineOptions.showBadges,
     pipelineOptions.showIcons
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     controller.fromModel(
       {
         graph: {
@@ -56,7 +56,7 @@ export const PipelineTasks: React.FC = observer(() => {
 
 PipelineTasks.displayName = 'PipelineTasks';
 
-export const PipelineTasksDemo = React.memo(() => {
+export const PipelineTasksDemo = memo(() => {
   const controller = new Visualization();
   controller.registerComponentFactory(pipelineComponentFactory);
   return (
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/pipelineComponentFactory.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/pipelineComponentFactory.tsx
index 9c61dd1b..ffd7282b 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/pipelineComponentFactory.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/pipelineComponentFactory.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   GraphElement,
   ComponentFactory,
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/useDemoPipelineNodes.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/useDemoPipelineNodes.tsx
index 96f7be21..15a3d28c 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/useDemoPipelineNodes.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/useDemoPipelineNodes.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import {
   DEFAULT_FINALLY_NODE_TYPE,
   DEFAULT_TASK_NODE_TYPE,
@@ -47,7 +47,7 @@ export const useDemoPipelineNodes = (
   layout?: string,
   showGroups = false
 ): PipelineNodeModel[] =>
-  React.useMemo(() => {
+  useMemo(() => {
     // Create a task node for each task status
     const tasks = TASK_STATUSES.map((status, index) => {
       // Set all the standard fields
diff --git a/packages/demo-app-ts/src/demos/statusConnectorsDemo/FailedEdge.tsx b/packages/demo-app-ts/src/demos/statusConnectorsDemo/FailedEdge.tsx
index ce7e5201..23ff695b 100644
--- a/packages/demo-app-ts/src/demos/statusConnectorsDemo/FailedEdge.tsx
+++ b/packages/demo-app-ts/src/demos/statusConnectorsDemo/FailedEdge.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Edge, GraphElement, integralShapePath } from '@patternfly/react-topology';
 import styles from '@patternfly/react-topology/src/css/topology-components';
diff --git a/packages/demo-app-ts/src/demos/statusConnectorsDemo/StatusConnectorNode.tsx b/packages/demo-app-ts/src/demos/statusConnectorsDemo/StatusConnectorNode.tsx
index d1448512..03b40e75 100644
--- a/packages/demo-app-ts/src/demos/statusConnectorsDemo/StatusConnectorNode.tsx
+++ b/packages/demo-app-ts/src/demos/statusConnectorsDemo/StatusConnectorNode.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { observer } from 'mobx-react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-topology/dist/esm/css/topology-components';
@@ -33,7 +33,7 @@ const StatusConnectorNode: React.FunctionComponent<StatusConnectorNodeProps> = (
   const secondaryWidth = secondarySize?.width ?? 0;
   const secondaryHeight = secondarySize?.height ?? 0;
 
-  const { height, textStartX, width } = React.useMemo(() => {
+  const { height, textStartX, width } = useMemo(() => {
     if (!textSize) {
       return {
         height: 0,
diff --git a/packages/demo-app-ts/src/demos/statusConnectorsDemo/StatusConnectors.tsx b/packages/demo-app-ts/src/demos/statusConnectorsDemo/StatusConnectors.tsx
index 8243fef0..07b3f471 100644
--- a/packages/demo-app-ts/src/demos/statusConnectorsDemo/StatusConnectors.tsx
+++ b/packages/demo-app-ts/src/demos/statusConnectorsDemo/StatusConnectors.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useEffect, memo } from 'react';
 import {
   DagreLayout,
   EdgeModel,
@@ -57,9 +57,9 @@ const defaultLayoutFactory: LayoutFactory = (type: string, graph: Graph): Layout
 
 export const StatusConnectorsDemo: React.FunctionComponent = () => {
   const controller = useVisualizationController();
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const nodes: NodeModel[] = [
       {
         id: '1',
@@ -203,7 +203,7 @@ export const StatusConnectorsDemo: React.FunctionComponent = () => {
   );
 };
 
-export const StatusConnectors = React.memo(() => {
+export const StatusConnectors = memo(() => {
   const controller = new Visualization();
   controller.registerLayoutFactory(defaultLayoutFactory);
   controller.registerComponentFactory(defaultComponentFactory);
diff --git a/packages/demo-app-ts/src/demos/statusConnectorsDemo/SuccessEdge.tsx b/packages/demo-app-ts/src/demos/statusConnectorsDemo/SuccessEdge.tsx
index 971e2c13..3145aa3b 100644
--- a/packages/demo-app-ts/src/demos/statusConnectorsDemo/SuccessEdge.tsx
+++ b/packages/demo-app-ts/src/demos/statusConnectorsDemo/SuccessEdge.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Edge, GraphElement, integralShapePath, Layer, TOP_LAYER } from '@patternfly/react-topology';
 import styles from '@patternfly/react-topology/src/css/topology-components';
diff --git a/packages/demo-app-ts/src/demos/statusConnectorsDemo/useSourceStatusAnchor.tsx b/packages/demo-app-ts/src/demos/statusConnectorsDemo/useSourceStatusAnchor.tsx
index e5791f01..5c2621b2 100644
--- a/packages/demo-app-ts/src/demos/statusConnectorsDemo/useSourceStatusAnchor.tsx
+++ b/packages/demo-app-ts/src/demos/statusConnectorsDemo/useSourceStatusAnchor.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useCallback } from 'react';
 import { action, observable } from 'mobx';
 import { isNode, AnchorEnd, ElementContext, Point, AbstractAnchor } from '@patternfly/react-topology';
 
@@ -30,12 +30,12 @@ export const useSourceStatusAnchor = (
   end: AnchorEnd = AnchorEnd.both,
   type: string = ''
 ): ((node: SVGElement | null) => void) => {
-  const element = React.useContext(ElementContext);
+  const element = useContext(ElementContext);
   if (!isNode(element)) {
     throw new Error('useSvgAnchor must be used within the scope of a Node');
   }
 
-  return React.useCallback<SvgAnchorRef>(
+  return useCallback<SvgAnchorRef>(
     (node: SVGElement | null) => {
       const actionFn = action((node: SVGElement | null) => {
         if (node) {
diff --git a/packages/demo-app-ts/src/demos/statusConnectorsDemo/useTargetStatusAnchor.tsx b/packages/demo-app-ts/src/demos/statusConnectorsDemo/useTargetStatusAnchor.tsx
index 324b03a6..d584da89 100644
--- a/packages/demo-app-ts/src/demos/statusConnectorsDemo/useTargetStatusAnchor.tsx
+++ b/packages/demo-app-ts/src/demos/statusConnectorsDemo/useTargetStatusAnchor.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useCallback } from 'react';
 import { action, observable } from 'mobx';
 import { AbstractAnchor, AnchorEnd, ElementContext, isNode, Node, Point } from '@patternfly/react-topology';
 
@@ -38,12 +38,12 @@ export const useTargetStatusAnchor = (
   type: string = '',
   offset: number = 0
 ): ((node: SVGElement | null) => void) => {
-  const element = React.useContext(ElementContext);
+  const element = useContext(ElementContext);
   if (!isNode(element)) {
     throw new Error('useSvgAnchor must be used within the scope of a Node');
   }
 
-  return React.useCallback<SvgAnchorRef>(
+  return useCallback<SvgAnchorRef>(
     (node: SVGElement | null) => {
       const actionFn = action((node: SVGElement | null) => {
         if (node) {
diff --git a/packages/demo-app-ts/src/demos/stylesDemo/StyleEdge.tsx b/packages/demo-app-ts/src/demos/stylesDemo/StyleEdge.tsx
index 4c65d7d7..77bdb330 100644
--- a/packages/demo-app-ts/src/demos/stylesDemo/StyleEdge.tsx
+++ b/packages/demo-app-ts/src/demos/stylesDemo/StyleEdge.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { observer } from 'mobx-react';
 import { DefaultEdge, Edge, WithContextMenuProps, WithSelectionProps } from '@patternfly/react-topology';
 
@@ -10,7 +10,7 @@ type StyleEdgeProps = {
 const StyleEdge: React.FunctionComponent<StyleEdgeProps> = ({ element, onContextMenu, contextMenuOpen, ...rest }) => {
   const data = element.getData();
 
-  const passedData = React.useMemo(() => {
+  const passedData = useMemo(() => {
     const newData = { ...data };
     Object.keys(newData).forEach((key) => {
       if (newData[key] === undefined) {
diff --git a/packages/demo-app-ts/src/demos/stylesDemo/StyleGroup.tsx b/packages/demo-app-ts/src/demos/stylesDemo/StyleGroup.tsx
index 5b401afe..a2d0f995 100644
--- a/packages/demo-app-ts/src/demos/stylesDemo/StyleGroup.tsx
+++ b/packages/demo-app-ts/src/demos/stylesDemo/StyleGroup.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import {
   DefaultGroup,
   GraphElement,
@@ -64,7 +64,7 @@ const StyleGroup: React.FunctionComponent<StyleGroupProps> = ({
     );
   };
 
-  const passedData = React.useMemo(() => {
+  const passedData = useMemo(() => {
     const newData = { ...data };
     Object.keys(newData).forEach((key) => {
       if (newData[key] === undefined) {
diff --git a/packages/demo-app-ts/src/demos/stylesDemo/StyleNode.tsx b/packages/demo-app-ts/src/demos/stylesDemo/StyleNode.tsx
index 2324d39c..09af4cc1 100644
--- a/packages/demo-app-ts/src/demos/stylesDemo/StyleNode.tsx
+++ b/packages/demo-app-ts/src/demos/stylesDemo/StyleNode.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo, useEffect } from 'react';
 import {
   Decorator,
   DEFAULT_DECORATOR_RADIUS,
@@ -137,7 +137,7 @@ const StyleNode: React.FunctionComponent<StyleNodeProps> = ({
   const [hover, hoverRef] = useHover();
   const focused = hover || contextMenuOpen;
 
-  const passedData = React.useMemo(() => {
+  const passedData = useMemo(() => {
     const newData = { ...data };
     Object.keys(newData).forEach((key) => {
       if (newData[key] === undefined) {
@@ -147,7 +147,7 @@ const StyleNode: React.FunctionComponent<StyleNodeProps> = ({
     return newData;
   }, [data]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (detailsLevel === ScaleDetailsLevel.low) {
       onHideCreateConnector && onHideCreateConnector();
     }
diff --git a/packages/demo-app-ts/src/demos/stylesDemo/Styles.tsx b/packages/demo-app-ts/src/demos/stylesDemo/Styles.tsx
index 496533e6..e5b7f9d1 100644
--- a/packages/demo-app-ts/src/demos/stylesDemo/Styles.tsx
+++ b/packages/demo-app-ts/src/demos/stylesDemo/Styles.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo, useState } from 'react';
 import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import {
   BadgeLocation,
@@ -40,7 +40,7 @@ export const NodeStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -58,7 +58,7 @@ export const NodeHoverStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -76,7 +76,7 @@ export const NodeSelectedStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -94,7 +94,7 @@ export const NodeStatusDecoratorStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -118,7 +118,7 @@ export const NodeDecoratorStyles = withTopologySetup(() => {
   nodes.forEach((n) => (n.data.labelPosition = LabelPosition.bottom));
   nodes2.forEach((n) => (n.data.showDecorators = true));
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -136,7 +136,7 @@ export const NodeLabelStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -154,7 +154,7 @@ export const NodeLabelHoverStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -172,7 +172,7 @@ export const NodeLabelSelectedStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -190,7 +190,7 @@ export const NodeHorizontalLabelStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -208,7 +208,7 @@ export const NodeBadgedLabelStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -231,7 +231,7 @@ export const NodeContextMenuLabelStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -253,7 +253,7 @@ export const NodeIconLabelStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -863,7 +863,7 @@ export const EdgeTerminalTagStyles = withTopologySetup(() => {
 });
 
 export const StyleNodes: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
@@ -893,7 +893,7 @@ export const StyleNodes: React.FunctionComponent = () => {
 };
 
 export const StyleLabels: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
@@ -932,7 +932,7 @@ export const StyleLabels: React.FunctionComponent = () => {
 };
 
 export const StyleGroups: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
@@ -965,7 +965,7 @@ export const StyleGroups: React.FunctionComponent = () => {
 };
 
 export const StyleEdges: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
diff --git a/packages/demo-app-ts/src/demos/stylesDemo/styleUtils.ts b/packages/demo-app-ts/src/demos/stylesDemo/styleUtils.ts
index de25d32f..396e9ee7 100644
--- a/packages/demo-app-ts/src/demos/stylesDemo/styleUtils.ts
+++ b/packages/demo-app-ts/src/demos/stylesDemo/styleUtils.ts
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   BadgeLocation,
   EdgeAnimationSpeed,
diff --git a/packages/demo-app-ts/src/demos/stylesDemo/stylesComponentFactory.tsx b/packages/demo-app-ts/src/demos/stylesDemo/stylesComponentFactory.tsx
index b10a584e..7cce6ce5 100644
--- a/packages/demo-app-ts/src/demos/stylesDemo/stylesComponentFactory.tsx
+++ b/packages/demo-app-ts/src/demos/stylesDemo/stylesComponentFactory.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   GraphElement,
   ComponentFactory,
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/AreaDragHint.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/AreaDragHint.tsx
index 66e48f2a..01d4a3ff 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/AreaDragHint.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/AreaDragHint.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { InfoCircleIcon, MouseIcon } from '@patternfly/react-icons';
 
 import './AreaDragHint.css';
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoContext.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoContext.tsx
index ac666fbf..bd2b0853 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoContext.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoContext.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createContext } from 'react';
 import { action, makeObservable, observable } from 'mobx';
 import { LabelPosition } from '@patternfly/react-topology';
 import { GeneratorEdgeOptions, GeneratorNodeOptions } from './generator';
@@ -113,4 +113,4 @@ export class DemoModel {
   };
 }
 
-export const DemoContext = React.createContext<DemoModel>(new DemoModel());
+export const DemoContext = createContext<DemoModel>(new DemoModel());
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoEdge.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoEdge.tsx
index 6af50c71..5ca3a46d 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoEdge.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoEdge.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import { observer } from 'mobx-react';
 import {
   DefaultEdge,
@@ -17,7 +17,7 @@ type DemoEdgeProps = {
   WithSelectionProps;
 
 const DemoEdge: React.FunctionComponent<DemoEdgeProps> = ({ element, ...rest }) => {
-  const options = React.useContext(DemoContext).edgeOptions;
+  const options = useContext(DemoContext).edgeOptions;
   const data = element.getData();
 
   return (
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoGroup.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoGroup.tsx
index 34c2a8a7..0599bd6d 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoGroup.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoGroup.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import {
   DefaultGroup,
   GraphElement,
@@ -23,7 +23,7 @@ type DemoGroupProps = {
   WithSelectionProps;
 
 const DemoGroup: React.FunctionComponent<DemoGroupProps> = ({ element, onContextMenu, ...rest }) => {
-  const options = React.useContext(DemoContext).nodeOptions;
+  const options = useContext(DemoContext).nodeOptions;
   const groupElement = element as Node;
   const data = element.getData();
   const detailsLevel = element.getGraph().getDetailsLevel();
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx
index 2f12e70a..99ab8e34 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect, useContext } from 'react';
 import {
   Decorator,
   DEFAULT_DECORATOR_RADIUS,
@@ -148,14 +148,14 @@ const getShapeComponent = (shape: NodeShape): React.FunctionComponent<ShapeProps
 
 const DemoNode: React.FunctionComponent<DemoNodeProps> = observer(
   ({ element, onContextMenu, dragging, contextMenuOpen, onShowCreateConnector, onHideCreateConnector, ...rest }) => {
-    const options = React.useContext(DemoContext).nodeOptions;
+    const options = useContext(DemoContext).nodeOptions;
     const nodeElement = element as Node;
     const data = element.getData() as GeneratedNodeData;
     const detailsLevel = element.getGraph().getDetailsLevel();
     const [hover, hoverRef] = useHover();
     const focused = hover || contextMenuOpen;
 
-    React.useEffect(() => {
+    useEffect(() => {
       if (detailsLevel === ScaleDetailsLevel.low) {
         onHideCreateConnector && onHideCreateConnector();
       }
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
index 8cec1624..7081bb91 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useContext, useState } from 'react';
 import {
   Button,
   Flex,
@@ -15,13 +15,13 @@ import { observer } from '@patternfly/react-topology';
 import { DemoContext } from './DemoContext';
 
 const OptionsContextBar: React.FC = observer(() => {
-  const options = React.useContext(DemoContext);
-  const [nodeOptionsOpen, setNodeOptionsOpen] = React.useState<boolean>(false);
-  const [edgeOptionsOpen, setEdgeOptionsOpen] = React.useState<boolean>(false);
-  const [numNodes, setNumNodes] = React.useState<number>(options.creationCounts.numNodes);
-  const [numEdges, setNumEdges] = React.useState<number>(options.creationCounts.numEdges);
-  const [numGroups, setNumGroups] = React.useState<number>(options.creationCounts.numGroups);
-  const [nestedLevel, setNestedLevel] = React.useState<number>(options.creationCounts.nestedLevel);
+  const options = useContext(DemoContext);
+  const [nodeOptionsOpen, setNodeOptionsOpen] = useState<boolean>(false);
+  const [edgeOptionsOpen, setEdgeOptionsOpen] = useState<boolean>(false);
+  const [numNodes, setNumNodes] = useState<number>(options.creationCounts.numNodes);
+  const [numEdges, setNumEdges] = useState<number>(options.creationCounts.numEdges);
+  const [numGroups, setNumGroups] = useState<number>(options.creationCounts.numGroups);
+  const [nestedLevel, setNestedLevel] = useState<number>(options.creationCounts.nestedLevel);
 
   const renderNodeOptionsDropdown = () => {
     const nodeOptionsToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
index 90d7b6da..bbadd781 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useContext, useState, useRef } from 'react';
 import {
   Button,
   Dropdown,
@@ -16,11 +16,11 @@ import { Controller, Model, observer } from '@patternfly/react-topology';
 import { DemoContext } from './DemoContext';
 
 const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ controller }) => {
-  const options = React.useContext(DemoContext);
-  const [layoutDropdownOpen, setLayoutDropdownOpen] = React.useState(false);
-  const [savedModel, setSavedModel] = React.useState<Model>();
-  const [modelSaved, setModelSaved] = React.useState<boolean>(false);
-  const newNodeCount = React.useRef(0);
+  const options = useContext(DemoContext);
+  const [layoutDropdownOpen, setLayoutDropdownOpen] = useState(false);
+  const [savedModel, setSavedModel] = useState<Model>();
+  const [modelSaved, setModelSaved] = useState<boolean>(false);
+  const newNodeCount = useRef(0);
 
   const updateLayout = (newLayout: string) => {
     options.setLayout(newLayout);
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/TopologyPackage.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/TopologyPackage.tsx
index b498e7b7..fee1e3e5 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/TopologyPackage.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/TopologyPackage.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useEffect, useContext } from 'react';
 import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import {
   GRAPH_POSITION_CHANGE_EVENT,
@@ -36,12 +36,12 @@ interface TopologyViewComponentProps {
 
 const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps> = observer(
   ({ useSidebar, sideBarResizable = false }) => {
-    const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
-    const [showAreaDragHint, setShowAreaDragHint] = React.useState<boolean>(false);
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [showAreaDragHint, setShowAreaDragHint] = useState<boolean>(false);
     const controller = useVisualizationController();
-    const options = React.useContext(DemoContext);
+    const options = useContext(DemoContext);
 
-    React.useEffect(() => {
+    useEffect(() => {
       const dataModel = generateDataModel(
         options.creationCounts.numNodes,
         options.creationCounts.numGroups,
@@ -90,7 +90,7 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
       setShowAreaDragHint(isDragging);
     });
 
-    React.useEffect(() => {
+    useEffect(() => {
       let resizeTimeout: NodeJS.Timeout;
 
       if (selectedIds[0]) {
@@ -110,7 +110,7 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
       };
     }, [selectedIds, controller]);
 
-    React.useEffect(() => {
+    useEffect(() => {
       controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, graphPositionChangeListener);
       controller.addEventListener(GRAPH_LAYOUT_END_EVENT, layoutEndListener);
 
@@ -120,7 +120,7 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
       };
     }, [controller]);
 
-    React.useEffect(() => {
+    useEffect(() => {
       controller.getGraph().setDetailsLevelThresholds({
         low: options.lowScale,
         medium: options.medScale
@@ -166,7 +166,7 @@ export const Topology: React.FC<{ useSidebar?: boolean; sideBarResizable?: boole
 };
 
 export const TopologyPackage: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx
index 9ea1d3ba..c8a394f0 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   GraphElement,
   ComponentFactory,
diff --git a/packages/demo-app-ts/src/index.tsx b/packages/demo-app-ts/src/index.tsx
index be1d4e2c..786aa7a9 100755
--- a/packages/demo-app-ts/src/index.tsx
+++ b/packages/demo-app-ts/src/index.tsx
@@ -1,7 +1,9 @@
+import { createRoot } from 'react-dom/client';
 import '@patternfly/react-core/dist/styles/base.css';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
-import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
diff --git a/packages/demo-app-ts/src/utils/withTopologySetup.tsx b/packages/demo-app-ts/src/utils/withTopologySetup.tsx
index c5923850..7c3235c4 100644
--- a/packages/demo-app-ts/src/utils/withTopologySetup.tsx
+++ b/packages/demo-app-ts/src/utils/withTopologySetup.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { VisualizationProvider, VisualizationSurface } from '@patternfly/react-topology';
 
 const withTopologySetup = (WrappedComponent: React.ComponentType) => () =>
diff --git a/packages/demo-app-ts/tsconfig.json b/packages/demo-app-ts/tsconfig.json
index f7b4d8d8..2ef34e25 100644
--- a/packages/demo-app-ts/tsconfig.json
+++ b/packages/demo-app-ts/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": false,
     "esModuleInterop": true,
@@ -15,7 +11,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "strict": true,
     "strictPropertyInitialization": false,
     "strictNullChecks": false,
@@ -24,8 +20,5 @@
     "experimentalDecorators": true,
     "useDefineForClassFields": true
   },
-  "include": [
-    "./src/*",
-    "./src/**/*"
-  ]
+  "include": ["./src/*", "./src/**/*"]
 }
diff --git a/packages/module/package.json b/packages/module/package.json
index d4b7f107..4ec214f9 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -1,76 +1,76 @@
 {
-    "name": "@patternfly/react-topology",
-    "version": "6.1.0-prerelease.2",
-    "description": "Provide patternfly components, styles, and utilities for displaying a topology view",
-    "main": "dist/js/index.js",
-    "module": "dist/esm/index.js",
-    "types": "dist/esm/index.d.ts",
-    "scripts": {
-        "build": "yarn generate && yarn build:esm && yarn build:cjs",
-        "build:esm": "tsc --build --verbose ./tsconfig.json",
-        "build:cjs": "tsc --build --verbose ./tsconfig.cjs.json",
-        "clean": "rimraf dist css",
-        "docs:develop": "pf-docs-framework start",
-        "docs:build": "pf-docs-framework build all --output public",
-        "docs:serve": "pf-docs-framework serve public --port 5000",
-        "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
-        "generate": "rimraf css && node scripts/writeClassMaps.js",
-        "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
-        "serve:a11y": "yarn serve coverage"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/patternfly/react-topology.git"
-    },
-    "author": "Red Hat",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/patternfly/react-topology/issues"
-    },
-    "homepage": "https://github.com/patternfly/react-topology#readme",
-    "publishConfig": {
-        "access": "public",
-        "tag": "prerelease"
-    },
-    "dependencies": {
-        "@patternfly/react-core": "^6.0.0",
-        "@patternfly/react-icons": "^6.0.0",
-        "@patternfly/react-styles": "^6.0.0",
-        "@types/d3": "^7.4.0",
-        "@types/d3-force": "^1.2.1",
-        "@types/react-measure": "^2.0.6",
-        "d3": "^7.8.0",
-        "@dagrejs/dagre": "1.1.2",
-        "mobx": "^6.9.0",
-        "mobx-react": "^7.6.0",
-        "point-in-svg-path": "^1.0.1",
-        "popper.js": "^1.16.1",
-        "react-measure": "^2.3.0",
-        "tslib": "^2.0.0",
-        "webcola": "3.4.0"
-    },
-    "peerDependencies": {
-        "react": "^17 || ^18",
-        "react-dom": "^17 || ^18"
-    },
-    "devDependencies": {
-        "@patternfly/documentation-framework": "6.0.0-alpha.120",
-        "@patternfly/patternfly": "^6.0.0",
-        "@patternfly/patternfly-a11y": "^4.3.1",
-        "@patternfly/react-code-editor": "^6.0.0",
-        "@patternfly/react-table": "^6.0.0",
-        "@types/react": "^18.0.0",
-        "@types/react-dom": "^18.0.0",
-        "camel-case": "^3.0.0",
-        "css": "^2.2.3",
-        "fs-extra": "^6.0.1",
-        "glob": "^7.1.2",
-        "jsdom": "^15.1.0",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0",
-        "rimraf": "^2.6.2",
-        "typescript": "^4.7.4",
-        "react-monaco-editor": "^0.51.0",
-        "monaco-editor": "^0.34.1"
-    }
+  "name": "@patternfly/react-topology",
+  "version": "6.1.0-prerelease.2",
+  "description": "Provide patternfly components, styles, and utilities for displaying a topology view",
+  "main": "dist/js/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "scripts": {
+    "build": "yarn generate && yarn build:esm && yarn build:cjs",
+    "build:esm": "tsc --build --verbose ./tsconfig.json",
+    "build:cjs": "tsc --build --verbose ./tsconfig.cjs.json",
+    "clean": "rimraf dist css",
+    "docs:develop": "pf-docs-framework start",
+    "docs:build": "pf-docs-framework build all --output public",
+    "docs:serve": "pf-docs-framework serve public --port 5000",
+    "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
+    "generate": "rimraf css && node scripts/writeClassMaps.js",
+    "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
+    "serve:a11y": "yarn serve coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/patternfly/react-topology.git"
+  },
+  "author": "Red Hat",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/patternfly/react-topology/issues"
+  },
+  "homepage": "https://github.com/patternfly/react-topology#readme",
+  "publishConfig": {
+    "access": "public",
+    "tag": "prerelease"
+  },
+  "dependencies": {
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
+    "@patternfly/react-styles": "^6.0.0",
+    "@types/d3": "^7.4.0",
+    "@types/d3-force": "^1.2.1",
+    "@types/react-measure": "^2.0.6",
+    "d3": "^7.8.0",
+    "@dagrejs/dagre": "1.1.2",
+    "mobx": "^6.9.0",
+    "mobx-react": "^7.6.0",
+    "point-in-svg-path": "^1.0.1",
+    "popper.js": "^1.16.1",
+    "react-measure": "^2.3.0",
+    "tslib": "^2.0.0",
+    "webcola": "3.4.0"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
+  },
+  "devDependencies": {
+    "@patternfly/documentation-framework": "6.0.0-alpha.120",
+    "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/patternfly-a11y": "^4.3.1",
+    "@patternfly/react-code-editor": "^6.0.0",
+    "@patternfly/react-table": "^6.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "camel-case": "^3.0.0",
+    "css": "^2.2.3",
+    "fs-extra": "^6.0.1",
+    "glob": "^7.1.2",
+    "jsdom": "^15.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rimraf": "^2.6.2",
+    "typescript": "^4.7.4",
+    "react-monaco-editor": "^0.51.0",
+    "monaco-editor": "^0.34.1"
+  }
 }
diff --git a/packages/module/patternfly-docs/content/examples/AboutTopology.md b/packages/module/patternfly-docs/content/examples/AboutTopology.md
index dc9692d4..4f5bbde9 100644
--- a/packages/module/patternfly-docs/content/examples/AboutTopology.md
+++ b/packages/module/patternfly-docs/content/examples/AboutTopology.md
@@ -6,6 +6,7 @@ sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/modu
 propComponents: ['VisualizationProvider', 'VisualizationSurface']
 ---
 
+import { useState, useMemo } from 'react';
 import {
   ColaLayout,
   DefaultEdge,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyAnchors.md b/packages/module/patternfly-docs/content/examples/TopologyAnchors.md
index 00112501..cddb6e7f 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyAnchors.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyAnchors.md
@@ -5,6 +5,7 @@ sortValue: 13
 sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyAnchorsDemo.tsx
 ---
 
+import { useMemo } from 'react';
 import {
   AbstractAnchor,
   AnchorEnd,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyAnchorsDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyAnchorsDemo.tsx
index 73637d0c..362d736d 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyAnchorsDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyAnchorsDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import {
   AbstractAnchor,
   AnchorEnd,
@@ -151,7 +151,7 @@ const EDGES = [
 ];
 
 export const TopologyCustomNodeDemo: React.FC = () => {
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyContextMenu.md b/packages/module/patternfly-docs/content/examples/TopologyContextMenu.md
index 438bc73b..5759716e 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyContextMenu.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyContextMenu.md
@@ -5,6 +5,7 @@ sortValue: 23
 sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx
 ---
 
+import { useMemo } from 'react';
 import {
   ColaLayout,
   ContextMenuItem,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx
index b1326066..e1d197e3 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1 } from '@patternfly/react-icons';
@@ -167,7 +167,7 @@ const EDGES = [
 ];
 
 export const TopologyContextMenuDemo: React.FC = () => {
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyControlBar.md b/packages/module/patternfly-docs/content/examples/TopologyControlBar.md
index f69958e0..2efbdfbb 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyControlBar.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyControlBar.md
@@ -4,30 +4,30 @@ section: topology
 sortValue: 31
 sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyControlBarDemo.tsx
 propComponents: ['TopologyControlBar', 'TopologyView']
-
 ---
 
+import { useState, useMemo } from 'react';
 import {
-  action,
-  ColaLayout,
-  createTopologyControlButtons,
-  defaultControlButtonsOptions,
-  DefaultEdge,
-  DefaultGroup,
-  DefaultNode,
-  EdgeStyle,
-  GraphComponent,
-  ModelKind,
-  NodeShape,
-  SELECTION_EVENT,
-  TopologyControlBar,
-  TopologyView,
-  Visualization,
-  VisualizationProvider,
-  VisualizationSurface,
-  withPanZoom,
-  withSelection
-  } from '@patternfly/react-topology';
+action,
+ColaLayout,
+createTopologyControlButtons,
+defaultControlButtonsOptions,
+DefaultEdge,
+DefaultGroup,
+DefaultNode,
+EdgeStyle,
+GraphComponent,
+ModelKind,
+NodeShape,
+SELECTION_EVENT,
+TopologyControlBar,
+TopologyView,
+Visualization,
+VisualizationProvider,
+VisualizationSurface,
+withPanZoom,
+withSelection
+} from '@patternfly/react-topology';
 import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
 import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 
@@ -45,18 +45,13 @@ To add a control bar to the Topology view:
 
 1. Pass the `<TopologyControlBar>` component to the `controlBar` property, and pass the `controlButtons` property into `<TopologyControlBar>`.
 
-1. Call the `createTopologyControlButtons` function, which will create  common control buttons via several parameters:
+1. Call the `createTopologyControlButtons` function, which will create common control buttons via several parameters:
 
-  To render the default control buttons, pass in `defaultControlButtonsOptions`, which includes:
-     - Zoom In.
-     - Zoom Out.
-     - Fit to Screen.
-     - Reset View.
-     - Legend.
+To render the default control buttons, pass in `defaultControlButtonsOptions`, which includes: - Zoom In. - Zoom Out. - Fit to Screen. - Reset View. - Legend.
 
-  You can override these defaults by passing in any of the `defaultControlButtonsOptions` as a parameter, with your updated boolean value to replace the default option.
+You can override these defaults by passing in any of the `defaultControlButtonsOptions` as a parameter, with your updated boolean value to replace the default option.
 
-  For each control button, pass in each of the following action callback methods as a parameter:
+For each control button, pass in each of the following action callback methods as a parameter:
 
     - **`zoomInCallback`:** Handle clicks on the Zoom In button. For example:
         ```noLive
@@ -104,4 +99,5 @@ To add a control bar to the Topology view:
 ### Example
 
 ```ts file="./TopologyControlBarDemo.tsx"
+
 ```
diff --git a/packages/module/patternfly-docs/content/examples/TopologyControlBarDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyControlBarDemo.tsx
index 8aeb775c..b7610c7a 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyControlBarDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyControlBarDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo } from 'react';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1 } from '@patternfly/react-icons';
 
@@ -146,9 +146,9 @@ const EDGES = [
 ];
 
 export const TopologyControlBarDemo: React.FC = () => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyCustomEdges.md b/packages/module/patternfly-docs/content/examples/TopologyCustomEdges.md
index 73b79af9..0a1070a4 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyCustomEdges.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyCustomEdges.md
@@ -6,6 +6,7 @@ sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/modu
 propComponents: ['DefaultEdge']
 ---
 
+import { useState, useMemo } from 'react';
 import {
   ColaLayout,
   CREATE_CONNECTOR_DROP_TYPE,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyCustomEdgesDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyCustomEdgesDemo.tsx
index 2974632a..8dfa82bc 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyCustomEdgesDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyCustomEdgesDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo } from 'react';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1 } from '@patternfly/react-icons';
@@ -208,9 +208,9 @@ const EDGES: EdgeModel[] = [
 ];
 
 export const TopologyCustomEdgeDemo: React.FC = () => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyCustomNodes.md b/packages/module/patternfly-docs/content/examples/TopologyCustomNodes.md
index a6c09636..d39932b0 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyCustomNodes.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyCustomNodes.md
@@ -6,6 +6,7 @@ sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/modu
 propComponents: ['DefaultNode', 'DefaultEdge', 'DefaultGroup']
 ---
 
+import { useState, useMemo } from 'react';
 import {
   ColaLayout,
   DefaultEdge,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyCustomNodesDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyCustomNodesDemo.tsx
index 8a587ff7..cd2cf923 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyCustomNodesDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyCustomNodesDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo } from 'react';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1 } from '@patternfly/react-icons';
@@ -205,9 +205,9 @@ const EDGES = [
 ];
 
 export const TopologyCustomNodeDemo: React.FC = () => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md b/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md
index 2287f0ee..21f8128e 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md
@@ -6,6 +6,7 @@ sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/modu
 propComponents: ['DefaultNode', 'DefaultEdge', 'withDndDrop']
 ---
 
+import { useState, useMemo } from 'react';
 import {
 ColaLayout,
 DefaultEdge,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.tsx
index c19061e3..b81d8f9a 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import * as React from 'react';
+import { useState, useMemo } from 'react';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1 } from '@patternfly/react-icons';
@@ -251,9 +251,9 @@ const EDGES = [
 ];
 
 export const TopologyDragDropDemo: React.FC = () => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyGettingStartedDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyGettingStartedDemo.tsx
index ca4bae3d..8a09455f 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyGettingStartedDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyGettingStartedDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo } from 'react';
 import {
   ColaLayout,
   ComponentFactory,
@@ -128,9 +128,9 @@ const EDGES = [
 ];
 
 export const TopologyGettingStartedDemo: React.FC = () => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayouts.md b/packages/module/patternfly-docs/content/examples/TopologyLayouts.md
index ccca4f6b..e8401599 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyLayouts.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyLayouts.md
@@ -4,6 +4,7 @@ section: topology
 sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
 ---
 
+import { useState, useMemo, useEffect } from 'react';
 import {
   action,
   createTopologyControlButtons,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
index 18250ea9..8e40c372 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import {
   Dropdown,
   DropdownItem,
@@ -207,10 +207,10 @@ const customComponentFactory: ComponentFactory = (kind: ModelKind, type: string)
 };
 
 export const LayoutsDemo: React.FC = () => {
-  const [layoutDropdownOpen, setLayoutDropdownOpen] = React.useState(false);
-  const [layout, setLayout] = React.useState<string>('ColaNoForce');
+  const [layoutDropdownOpen, setLayoutDropdownOpen] = useState(false);
+  const [layout, setLayout] = useState<string>('ColaNoForce');
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
@@ -238,7 +238,7 @@ export const LayoutsDemo: React.FC = () => {
     setLayoutDropdownOpen(false);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (controller && controller.getGraph().getLayout() !== layout) {
       const model: Model = {
         nodes: NODES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyPanZoom.md b/packages/module/patternfly-docs/content/examples/TopologyPanZoom.md
index e541b077..84ec9f99 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyPanZoom.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyPanZoom.md
@@ -5,6 +5,7 @@ sortValue: 22
 sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyPanZoomDemo.tsx
 ---
 
+import { useState, useMemo } from 'react';
 import {
   ColaLayout,
   DefaultEdge,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyPanZoomDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyPanZoomDemo.tsx
index 2cc3811c..8403946b 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyPanZoomDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyPanZoomDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo } from 'react';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1 } from '@patternfly/react-icons';
@@ -206,9 +206,9 @@ const EDGES = [
 ];
 
 export const TopologyPanZoomDemo: React.FC = () => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStarted.md b/packages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStarted.md
index ec4a315d..a4763e79 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStarted.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStarted.md
@@ -7,6 +7,7 @@ propComponents: ['TaskNode', 'TaskEdge', 'WhenDecorator']
 functions: { 'packages/module/src/pipelines/utils/utils.ts': ['getSpacerNodes', 'getEdgesFromNodes'] }
 ---
 
+import { useEffect } from 'react';
 import {
   TopologyView,
   Visualization,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStartedDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStartedDemo.tsx
index a0e61fe4..f50e65b2 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStartedDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStartedDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import {
   TopologyView,
   Visualization,
@@ -119,7 +119,7 @@ const pipelineComponentFactory = (kind: ModelKind, type: string) => {
 
 export const PipelineTasks: React.FC = () => {
   const controller = useVisualizationController();
-  React.useEffect(() => {
+  useEffect(() => {
     controller.fromModel(
       {
         graph: {
diff --git a/packages/module/patternfly-docs/content/examples/TopologySelectable.md b/packages/module/patternfly-docs/content/examples/TopologySelectable.md
index 411e3752..474e7d37 100644
--- a/packages/module/patternfly-docs/content/examples/TopologySelectable.md
+++ b/packages/module/patternfly-docs/content/examples/TopologySelectable.md
@@ -5,6 +5,7 @@ sortValue: 21
 sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologySelectableDemo.tsx
 ---
 
+import { useState, useMemo } from 'react';
 import {
   ColaLayout,
   DefaultEdge,
diff --git a/packages/module/patternfly-docs/content/examples/TopologySelectableDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologySelectableDemo.tsx
index b6525e98..466b7892 100644
--- a/packages/module/patternfly-docs/content/examples/TopologySelectableDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologySelectableDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo } from 'react';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1 } from '@patternfly/react-icons';
@@ -209,9 +209,9 @@ const EDGES = [
 ];
 
 export const TopologySelectableDemo: React.FC = () => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologySidebar.md b/packages/module/patternfly-docs/content/examples/TopologySidebar.md
index abe59a76..42de522b 100644
--- a/packages/module/patternfly-docs/content/examples/TopologySidebar.md
+++ b/packages/module/patternfly-docs/content/examples/TopologySidebar.md
@@ -6,6 +6,7 @@ sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/modu
 propComponents: ['TopologySideBar', 'TopologyView']
 ---
 
+import { useState, useMemo } from 'react';
 import {
   ColaLayout,
   DefaultEdge,
diff --git a/packages/module/patternfly-docs/content/examples/TopologySidebarDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologySidebarDemo.tsx
index a399b999..7a18e32c 100644
--- a/packages/module/patternfly-docs/content/examples/TopologySidebarDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologySidebarDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo } from 'react';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1 } from '@patternfly/react-icons';
@@ -205,9 +205,9 @@ const EDGES = [
 ];
 
 export const TopologySidebarDemo: React.FC = () => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyToolbar.md b/packages/module/patternfly-docs/content/examples/TopologyToolbar.md
index bcf4393c..f3f88890 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyToolbar.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyToolbar.md
@@ -6,6 +6,7 @@ sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/modu
 propComponents: ['TopologyView']
 ---
 
+import { useState, useMemo } from 'react';
 import {
   BadgeLocation,
   ColaLayout,
diff --git a/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx
index c192765a..52db864f 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo } from 'react';
 import { MenuToggle, MenuToggleElement, Select, SelectList, SelectOption, ToolbarItem } from '@patternfly/react-core';
 import { RegionsIcon as Icon1, FolderOpenIcon as Icon2 } from '@patternfly/react-icons';
 import {
@@ -232,11 +232,11 @@ export const DefaultViewOptions: ViewOptions = {
   showBadges: false
 };
 export const ToolbarDemo: React.FC = () => {
-  const [viewOptionsOpen, setViewOptionsOpen] = React.useState<boolean>(false);
-  const [viewOptions, setViewOptions] = React.useState<ViewOptions>(DefaultViewOptions);
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [viewOptionsOpen, setViewOptionsOpen] = useState<boolean>(false);
+  const [viewOptions, setViewOptions] = useState<ViewOptions>(DefaultViewOptions);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,
diff --git a/packages/module/patternfly-docs/pages/index.js b/packages/module/patternfly-docs/pages/index.js
index 996cc738..53c38a7f 100644
--- a/packages/module/patternfly-docs/pages/index.js
+++ b/packages/module/patternfly-docs/pages/index.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Title, PageSection } from '@patternfly/react-core';
 
diff --git a/packages/module/src/behavior/useAnchor.tsx b/packages/module/src/behavior/useAnchor.tsx
index 80c8540f..c97a200c 100644
--- a/packages/module/src/behavior/useAnchor.tsx
+++ b/packages/module/src/behavior/useAnchor.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useCallback, useEffect } from 'react';
 import { runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { isNode, Anchor, Node, AnchorEnd } from '../types';
@@ -11,11 +11,11 @@ export const useAnchor = (
   end: AnchorEnd = AnchorEnd.both,
   type?: string
 ): void => {
-  const element = React.useContext(ElementContext);
+  const element = useContext(ElementContext);
   if (!isNode(element)) {
     throw new Error('useAnchor must be used within the scope of a Node');
   }
-  React.useEffect(() => {
+  useEffect(() => {
     runInAction(() => {
       const anchor = anchorCallback.prototype ? new (anchorCallback as any)(element) : (anchorCallback as any)(element);
       if (anchor) {
@@ -30,7 +30,7 @@ export const withAnchor =
   (WrappedComponent: React.ComponentType<P>) => {
     const Component: React.FunctionComponent<P> = (props) => {
       useAnchor(
-        React.useCallback(() => anchor, []),
+        useCallback(() => anchor, []),
         end,
         type
       );
diff --git a/packages/module/src/behavior/useAreaSelection.tsx b/packages/module/src/behavior/useAreaSelection.tsx
index a59dc961..4c9fb5ae 100644
--- a/packages/module/src/behavior/useAreaSelection.tsx
+++ b/packages/module/src/behavior/useAreaSelection.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useState, useRef } from 'react';
 import * as d3 from 'd3';
 import { observer } from 'mobx-react';
 import { action } from 'mobx';
@@ -15,13 +15,13 @@ const propagateAreaSelectionMouseEvent = (e: Event): void => {
 };
 
 export const useAreaSelection = (modifiers: ModifierKey[] = ['ctrlKey']): WithAreaSelectionProps => {
-  const element = React.useContext(ElementContext);
-  const [draggingState, setDraggingState] = React.useState<Omit<WithAreaSelectionProps, 'areaSelectionRef'>>({});
+  const element = useContext(ElementContext);
+  const [draggingState, setDraggingState] = useState<Omit<WithAreaSelectionProps, 'areaSelectionRef'>>({});
 
   if (!isGraph(element)) {
     throw new Error('useAreaSelection must be used within the scope of a Graph');
   }
-  const elementRef = React.useRef<Graph>(element);
+  const elementRef = useRef<Graph>(element);
   elementRef.current = element;
 
   const areaSelectionRef = useCallbackRef<AreaSelectionRef>((node: SVGGElement | null) => {
diff --git a/packages/module/src/behavior/useBendpoint.tsx b/packages/module/src/behavior/useBendpoint.tsx
index 8dac68a7..24dbf956 100644
--- a/packages/module/src/behavior/useBendpoint.tsx
+++ b/packages/module/src/behavior/useBendpoint.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useRef, useMemo, useCallback } from 'react';
 import { action } from 'mobx';
 import * as d3 from 'd3';
 import { observer } from 'mobx-react';
@@ -22,17 +22,17 @@ export const useBendpoint = <DropResult, CollectedProps, Props = {}>(
   >,
   props?: Props
 ): [CollectedProps, ConnectDragSource] => {
-  const element = React.useContext(ElementContext);
+  const element = useContext(ElementContext);
   if (!isEdge(element)) {
     throw new Error('useBendpoint must be used within the scope of an Edge');
   }
-  const elementRef = React.useRef(element);
+  const elementRef = useRef(element);
   elementRef.current = element;
-  const pointRef = React.useRef(point);
+  const pointRef = useRef(point);
   pointRef.current = point;
 
   const [connect, dragRef] = useDndDrag(
-    React.useMemo(() => {
+    useMemo(() => {
       const sourceSpec: DragSourceSpec<any, any, any, any, Props> = {
         item: { type: '#useBendpoint#' },
         begin: (monitor, p) => (spec && spec.begin ? spec.begin(monitor, p) : undefined),
@@ -52,7 +52,7 @@ export const useBendpoint = <DropResult, CollectedProps, Props = {}>(
   );
 
   // argh react events don't play nice with d3 pan zoom double click event
-  const ref = React.useCallback<ConnectDragSource>(
+  const ref = useCallback<ConnectDragSource>(
     (node) => {
       d3.select(node).on(
         'click',
diff --git a/packages/module/src/behavior/useDndDrag.tsx b/packages/module/src/behavior/useDndDrag.tsx
index 09b7ba99..461e6e72 100644
--- a/packages/module/src/behavior/useDndDrag.tsx
+++ b/packages/module/src/behavior/useDndDrag.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useRef, useMemo, useCallback, useEffect } from 'react';
 import * as d3 from 'd3';
 import { action, computed, comparer, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -75,22 +75,22 @@ export const useDndDrag = <
   spec: DragSourceSpec<DragObject, DragSpecOperationType<DragOperationWithType>, DropResult, CollectedProps, Props>,
   props?: Props
 ): [CollectedProps, ConnectDragSource] => {
-  const specRef = React.useRef(spec);
+  const specRef = useRef(spec);
   specRef.current = spec;
 
-  const propsRef = React.useRef<Props>(props != null ? props : (EMPTY_PROPS as Props));
+  const propsRef = useRef<Props>(props != null ? props : (EMPTY_PROPS as Props));
   propsRef.current = props != null ? props : (EMPTY_PROPS as Props);
 
   const dndManager = useDndManager();
 
-  const element = React.useContext(ElementContext);
-  const elementRef = React.useRef(element);
+  const element = useContext(ElementContext);
+  const elementRef = useRef(element);
   elementRef.current = element;
 
-  const idRef = React.useRef<string>();
+  const idRef = useRef<string>(null);
 
   // source monitor
-  const monitor = React.useMemo(() => {
+  const monitor = useMemo(() => {
     const sourceMonitor: DragSourceMonitor = {
       getHandlerId: (): string | undefined => idRef.current,
       receiveHandlerId: (sourceId: string | undefined): void => {
@@ -110,12 +110,12 @@ export const useDndDrag = <
     return sourceMonitor;
   }, [dndManager]);
 
-  const createKeyHandlerId = React.useCallback(
+  const createKeyHandlerId = useCallback(
     (event: string = '') => `${event}.useDndDrag-${monitor.getHandlerId()}`,
     [monitor]
   );
 
-  React.useEffect(
+  useEffect(
     () => () => {
       if (canUseDOM) {
         d3.select(document).on(createKeyHandlerId(), null);
@@ -129,7 +129,7 @@ export const useDndDrag = <
   );
 
   const refCallback: DragElementWrapper = useCallbackRef<DragElementWrapper>(
-    React.useCallback(
+    useCallback(
       (node: SVGElement | Element | null) => {
         let ownerDocument: Document;
         if (node) {
@@ -255,7 +255,7 @@ export const useDndDrag = <
     )
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     const dragSource: DragSource = {
       type: spec.item.type,
       canCancel: () => {
@@ -293,7 +293,7 @@ export const useDndDrag = <
     return unregister;
   }, [spec.item.type, dndManager, monitor]);
 
-  const collected = React.useMemo(
+  const collected = useMemo(
     () =>
       computed(() => (spec.collect ? spec.collect(monitor, propsRef.current) : ({} as any as CollectedProps)), {
         equals: comparer.shallow
diff --git a/packages/module/src/behavior/useDndDrop.tsx b/packages/module/src/behavior/useDndDrop.tsx
index ae2e773f..5ad285d5 100644
--- a/packages/module/src/behavior/useDndDrop.tsx
+++ b/packages/module/src/behavior/useDndDrop.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef, useMemo, useContext, useEffect } from 'react';
 import * as d3 from 'd3';
 import { observer } from 'mobx-react';
 import { pointInSvgPath } from 'point-in-svg-path';
@@ -28,18 +28,18 @@ export const useDndDrop = <
   spec: DropTargetSpec<DragObject, DropResult, CollectedProps, Props>,
   props?: Props
 ): [CollectedProps, ConnectDropTarget] => {
-  const specRef = React.useRef(spec);
+  const specRef = useRef(spec);
   specRef.current = spec;
 
-  const propsRef = React.useRef(props != null ? props : (EMPTY_PROPS as Props));
+  const propsRef = useRef(props != null ? props : (EMPTY_PROPS as Props));
   propsRef.current = props != null ? props : (EMPTY_PROPS as Props);
 
   const dndManager = useDndManager();
 
-  const nodeRef = React.useRef<SVGElement | null>(null);
-  const idRef = React.useRef<string>();
+  const nodeRef = useRef<SVGElement | null>(null);
+  const idRef = useRef<string | null>(null);
 
-  const monitor = React.useMemo((): DropTargetMonitor => {
+  const monitor = useMemo((): DropTargetMonitor => {
     const targetMonitor: DropTargetMonitor = {
       getHandlerId: (): string | undefined => idRef.current,
       receiveHandlerId: (sourceId: string | undefined): void => {
@@ -63,11 +63,11 @@ export const useDndDrop = <
     return targetMonitor;
   }, [dndManager]);
 
-  const element = React.useContext(ElementContext);
-  const elementRef = React.useRef(element);
+  const element = useContext(ElementContext);
+  const elementRef = useRef(element);
   elementRef.current = element;
 
-  React.useEffect(() => {
+  useEffect(() => {
     const dropTarget: DropTarget = {
       type: spec.accept,
       dropHint: () => {
@@ -162,7 +162,7 @@ export const useDndDrop = <
     return unregister;
   }, [spec.accept, dndManager, monitor]);
 
-  const collected = React.useMemo(
+  const collected = useMemo(
     () =>
       computed(() => (spec.collect ? spec.collect(monitor, propsRef.current) : ({} as any as CollectedProps)), {
         equals: comparer.shallow
diff --git a/packages/module/src/behavior/useDragNode.tsx b/packages/module/src/behavior/useDragNode.tsx
index c44800bb..b0d2098f 100644
--- a/packages/module/src/behavior/useDragNode.tsx
+++ b/packages/module/src/behavior/useDragNode.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useRef, useMemo } from 'react';
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import ElementContext from '../utils/ElementContext';
@@ -41,17 +41,17 @@ export const useDragNode = <
   },
   props?: Props
 ): [CollectedProps, ConnectDragSource] => {
-  const element = React.useContext(ElementContext);
+  const element = useContext(ElementContext);
   if (!isNode(element)) {
     throw new Error('useDragNode must be used within the scope of a Node');
   }
-  const elementRef = React.useRef(element);
+  const elementRef = useRef(element);
   elementRef.current = element;
 
   const dndManager = useDndManager();
 
   return useDndDrag(
-    React.useMemo(() => {
+    useMemo(() => {
       const sourceSpec: DragSourceSpec<any, any, any, any, Props> = {
         item: (spec && spec.item) || { type: '#useDragNode#' },
         operation: (monitor: DragSourceMonitor, p: Props) => {
diff --git a/packages/module/src/behavior/usePanZoom.tsx b/packages/module/src/behavior/usePanZoom.tsx
index 60a02844..5a33f9e0 100644
--- a/packages/module/src/behavior/usePanZoom.tsx
+++ b/packages/module/src/behavior/usePanZoom.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useRef } from 'react';
 import * as d3 from 'd3';
 import { observer } from 'mobx-react';
 import { action, autorun, IReactionDisposer } from 'mobx';
@@ -16,11 +16,11 @@ const propagatePanZoomMouseEvent = (e: Event): void => {
 };
 
 export const usePanZoom = (): PanZoomRef => {
-  const element = React.useContext(ElementContext);
+  const element = useContext(ElementContext);
   if (!isGraph(element)) {
     throw new Error('usePanZoom must be used within the scope of a Graph');
   }
-  const elementRef = React.useRef<Graph>(element);
+  const elementRef = useRef<Graph>(element);
   elementRef.current = element;
 
   return useCallbackRef<PanZoomRef>((node: SVGGElement | null) => {
diff --git a/packages/module/src/behavior/usePolygonAnchor.tsx b/packages/module/src/behavior/usePolygonAnchor.tsx
index 251815ce..448a685c 100644
--- a/packages/module/src/behavior/usePolygonAnchor.tsx
+++ b/packages/module/src/behavior/usePolygonAnchor.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
+import { useContext, useEffect } from 'react';
 import { runInAction } from 'mobx';
 import { isNode, AnchorEnd, PointTuple, Node } from '../types';
 import ElementContext from '../utils/ElementContext';
 import PolygonAnchor from '../anchors/PolygonAnchor';
 
 export const usePolygonAnchor = (points: PointTuple[], end: AnchorEnd = AnchorEnd.both, type: string = ''): void => {
-  const element = React.useContext(ElementContext);
+  const element = useContext(ElementContext);
   if (!isNode(element)) {
     throw new Error('usePolygonAnchor must be used within the scope of a Node');
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     runInAction(() => {
       if (points) {
         const anchor = new PolygonAnchor(element);
@@ -28,7 +28,7 @@ export interface WithPolygonAnchorProps {
 export const withPolygonAnchor =
   <P extends {} = {}>(getPoints: (element: Node) => PointTuple[], end?: AnchorEnd, type?: string) =>
   (WrappedComponent: React.ComponentType<P>) => {
-    const element = React.useContext(ElementContext);
+    const element = useContext(ElementContext);
     const Component: React.FunctionComponent<P> = (props) => {
       usePolygonAnchor(getPoints(element as Node), end, type);
       return <WrappedComponent {...props} />;
diff --git a/packages/module/src/behavior/useReconnect.tsx b/packages/module/src/behavior/useReconnect.tsx
index 4b08ecc8..6a84266b 100644
--- a/packages/module/src/behavior/useReconnect.tsx
+++ b/packages/module/src/behavior/useReconnect.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import { useDndDrag } from './useDndDrag';
 import {
diff --git a/packages/module/src/behavior/useSelection.tsx b/packages/module/src/behavior/useSelection.tsx
index 7107c6a6..997f3c31 100644
--- a/packages/module/src/behavior/useSelection.tsx
+++ b/packages/module/src/behavior/useSelection.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useRef, useMemo, useCallback } from 'react';
 import { action, computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { EventListener } from '../types';
@@ -22,11 +22,11 @@ interface Options {
 }
 
 export const useSelection = ({ multiSelect, controlled, raiseOnSelect = true }: Options = {}): [boolean, OnSelect] => {
-  const element = React.useContext(ElementContext);
-  const elementRef = React.useRef(element);
+  const element = useContext(ElementContext);
+  const elementRef = useRef(element);
   elementRef.current = element;
 
-  const selected = React.useMemo(
+  const selected = useMemo(
     () =>
       computed(() => {
         const { selectedIds } = element.getController().getState<SelectionHandlerState>();
@@ -35,7 +35,7 @@ export const useSelection = ({ multiSelect, controlled, raiseOnSelect = true }:
     [element]
   );
 
-  const onSelect = React.useCallback(
+  const onSelect = useCallback(
     (e: React.MouseEvent): void => {
       const actionFn = action((e: React.MouseEvent): void => {
         e.stopPropagation();
diff --git a/packages/module/src/behavior/useSvgAnchor.tsx b/packages/module/src/behavior/useSvgAnchor.tsx
index fcb82b7d..de0cfa58 100644
--- a/packages/module/src/behavior/useSvgAnchor.tsx
+++ b/packages/module/src/behavior/useSvgAnchor.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useCallback } from 'react';
 import { action } from 'mobx';
 import { isNode, AnchorEnd } from '../types';
 import ElementContext from '../utils/ElementContext';
@@ -10,12 +10,12 @@ export const useSvgAnchor = (
   end: AnchorEnd = AnchorEnd.both,
   type: string = ''
 ): ((node: SVGElement | null) => void) => {
-  const element = React.useContext(ElementContext);
+  const element = useContext(ElementContext);
   if (!isNode(element)) {
     throw new Error('useSvgAnchor must be used within the scope of a Node');
   }
 
-  return React.useCallback<SvgAnchorRef>(
+  return useCallback<SvgAnchorRef>(
     (node: SVGElement | null) => {
       const actionFn = action((node: SVGElement | null) => {
         if (node) {
diff --git a/packages/module/src/behavior/withContextMenu.tsx b/packages/module/src/behavior/withContextMenu.tsx
index b0b212c5..bec89f49 100644
--- a/packages/module/src/behavior/withContextMenu.tsx
+++ b/packages/module/src/behavior/withContextMenu.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useState, useCallback, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { Spinner } from '@patternfly/react-core';
 import { GraphElement as TopologyElement } from '../types';
@@ -22,10 +22,10 @@ export const withContextMenu =
   ) =>
   <P extends WithContextMenuProps>(WrappedComponent: React.ComponentType<P>) => {
     const Component: React.FunctionComponent<Omit<P, keyof WithContextMenuProps>> = (props) => {
-      const element = React.useContext(ElementContext);
-      const [reference, setReference] = React.useState<Reference | null>(null);
-      const [elementActions, setElementActions] = React.useState<React.ReactElement[] | null>(null);
-      const onContextMenu = React.useCallback((e: React.MouseEvent) => {
+      const element = useContext(ElementContext);
+      const [reference, setReference] = useState<Reference | null>(null);
+      const [elementActions, setElementActions] = useState<React.ReactElement[] | null>(null);
+      const onContextMenu = useCallback((e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
         setReference(
@@ -38,7 +38,7 @@ export const withContextMenu =
         );
       }, []);
 
-      React.useEffect(() => {
+      useEffect(() => {
         if (reference) {
           const actionsElements = actions(element as E);
           Promise.resolve(actionsElements).then((resultActions) => {
diff --git a/packages/module/src/behavior/withCreateConnector.tsx b/packages/module/src/behavior/withCreateConnector.tsx
index c60cdcfd..0ae10879 100644
--- a/packages/module/src/behavior/withCreateConnector.tsx
+++ b/packages/module/src/behavior/withCreateConnector.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { isValidElement, useState, useMemo, useRef, useCallback } from 'react';
 import { observer } from 'mobx-react';
 import { css } from '@patternfly/react-styles';
 import styles from '../css/topology-components';
@@ -76,7 +76,7 @@ interface PromptData {
 }
 
 const isReactElementArray = (choices: ConnectorChoice[] | React.ReactElement[]): choices is React.ReactElement[] =>
-  React.isValidElement(choices[0]);
+  isValidElement(choices[0]);
 
 const DEFAULT_HANDLE_ANGLE = Math.PI / 180;
 const DEFAULT_HANDLE_ANGLE_TOP = 1.5 * Math.PI;
@@ -96,11 +96,11 @@ const CreateConnectorWidget: React.FunctionComponent<CreateConnectorWidgetProps>
     dragOperation,
     hideConnectorMenu
   } = props;
-  const [prompt, setPrompt] = React.useState<PromptData | null>(null);
-  const [active, setActive] = React.useState(false);
-  const hintsRef = React.useRef<string[] | undefined>();
+  const [prompt, setPrompt] = useState<PromptData | null>(null);
+  const [active, setActive] = useState(false);
+  const hintsRef = useRef<string[] | undefined>(undefined);
 
-  const spec = React.useMemo(() => {
+  const spec = useMemo(() => {
     const dragSourceSpec: DragSourceSpec<
       DragObjectWithType,
       DragSpecOperationType<DragOperationWithType>,
@@ -250,11 +250,11 @@ export const withCreateConnector =
   ) =>
   (WrappedComponent: React.ComponentType<P>) => {
     const Component: React.FunctionComponent<Omit<P, keyof WithCreateConnectorProps>> = (props) => {
-      const [show, setShow] = React.useState(false);
-      const [alive, setKeepAlive] = React.useState(false);
-      const onShowCreateConnector = React.useCallback(() => setShow(true), []);
-      const onHideCreateConnector = React.useCallback(() => setShow(false), []);
-      const onKeepAlive = React.useCallback((isAlive: boolean) => setKeepAlive(isAlive), [setKeepAlive]);
+      const [show, setShow] = useState(false);
+      const [alive, setKeepAlive] = useState(false);
+      const onShowCreateConnector = useCallback(() => setShow(true), []);
+      const onHideCreateConnector = useCallback(() => setShow(false), []);
+      const onKeepAlive = useCallback((isAlive: boolean) => setKeepAlive(isAlive), [setKeepAlive]);
       return (
         <>
           <WrappedComponent
diff --git a/packages/module/src/behavior/withRemoveConnector.tsx b/packages/module/src/behavior/withRemoveConnector.tsx
index 7b48c16f..99da5492 100644
--- a/packages/module/src/behavior/withRemoveConnector.tsx
+++ b/packages/module/src/behavior/withRemoveConnector.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useCallback } from 'react';
 import { observer } from 'mobx-react';
 import { Edge } from '../types';
 import DefaultRemoveConnector from '../components/DefaultRemoveConnector';
@@ -31,9 +31,9 @@ export const withRemoveConnector =
   ) =>
   (WrappedComponent: React.ComponentType<P>) => {
     const Component: React.FunctionComponent<Omit<P, keyof WithRemoveConnectorProps>> = (props) => {
-      const [show, setShow] = React.useState(false);
-      const onShowRemoveConnector = React.useCallback(() => setShow(true), []);
-      const onHideRemoveConnector = React.useCallback(() => setShow(false), []);
+      const [show, setShow] = useState(false);
+      const onShowRemoveConnector = useCallback(() => setShow(true), []);
+      const onHideRemoveConnector = useCallback(() => setShow(false), []);
 
       return (
         <WrappedComponent
diff --git a/packages/module/src/components/ComputeElementDimensions.tsx b/packages/module/src/components/ComputeElementDimensions.tsx
index 75ad17f7..a9b10882 100644
--- a/packages/module/src/components/ComputeElementDimensions.tsx
+++ b/packages/module/src/components/ComputeElementDimensions.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import Dimensions from '../geom/Dimensions';
 import { Node } from '../types';
@@ -9,8 +9,8 @@ interface ComputeElementDimensionsProps {
 }
 
 const ComputeElementDimensions: React.FunctionComponent<ComputeElementDimensionsProps> = ({ element, children }) => {
-  const gRef = React.useRef<SVGGElement>(null);
-  React.useEffect(() => {
+  const gRef = useRef<SVGGElement>(null);
+  useEffect(() => {
     if (gRef.current && !element.isDimensionsInitialized()) {
       const { width, height } = gRef.current.getBBox();
       element.setDimensions(new Dimensions(width, height));
diff --git a/packages/module/src/components/DefaultCreateConnector.tsx b/packages/module/src/components/DefaultCreateConnector.tsx
index 0feea0a0..a3565b6d 100644
--- a/packages/module/src/components/DefaultCreateConnector.tsx
+++ b/packages/module/src/components/DefaultCreateConnector.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../css/topology-components';
 import AddCircleOIcon from '@patternfly/react-icons/dist/esm/icons/add-circle-o-icon';
@@ -27,7 +27,7 @@ const DefaultCreateConnector: React.FunctionComponent<DefaultCreateConnectorProp
   tipContents,
   className
 }) => {
-  const iconRef = React.useRef();
+  const iconRef = useRef(null);
   const classes = css(
     styles.topologyDefaultCreateConnector,
     className,
diff --git a/packages/module/src/components/DefaultRemoveConnector.tsx b/packages/module/src/components/DefaultRemoveConnector.tsx
index 4aa09576..e35e4b24 100644
--- a/packages/module/src/components/DefaultRemoveConnector.tsx
+++ b/packages/module/src/components/DefaultRemoveConnector.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef } from 'react';
 import { Tooltip, TooltipPosition } from '@patternfly/react-core';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import Point from '../geom/Point';
@@ -31,7 +31,7 @@ const DefaultRemoveConnector: React.FunctionComponent<DefaultRemoveConnectorProp
   onRemove,
   size = 14
 }) => {
-  const DefaultRemoveConnectorRef = React.useRef();
+  const DefaultRemoveConnectorRef = useRef(null);
   return (
     <Tooltip
       triggerRef={DefaultRemoveConnectorRef}
diff --git a/packages/module/src/components/ElementWrapper.tsx b/packages/module/src/components/ElementWrapper.tsx
index e93002e1..3ca2b549 100644
--- a/packages/module/src/components/ElementWrapper.tsx
+++ b/packages/module/src/components/ElementWrapper.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { observer } from 'mobx-react';
 import { computed } from 'mobx';
 import ElementContext from '../utils/ElementContext';
@@ -17,7 +17,7 @@ const NodeElementComponent: React.FunctionComponent<{ element: Node }> = observe
   const isDragging = dndManager.isDragging();
   const dragItem = dndManager.getItem();
   const controller = element.hasController() && element.getController();
-  const isVisible = React.useMemo(
+  const isVisible = useMemo(
     () => computed(() => controller && controller.shouldRenderNode(element)),
     [element, controller]
   );
@@ -33,7 +33,7 @@ const ElementComponent: React.FunctionComponent<ElementWrapperProps> = observer(
   const type = element.getType();
   const controller = element.hasController() && element.getController();
 
-  const Component = React.useMemo(() => controller && controller.getComponent(kind, type), [controller, kind, type]);
+  const Component = useMemo(() => controller && controller.getComponent(kind, type), [controller, kind, type]);
 
   if (Component) {
     return (
diff --git a/packages/module/src/components/GraphComponent.tsx b/packages/module/src/components/GraphComponent.tsx
index cb94848a..7b181ed3 100644
--- a/packages/module/src/components/GraphComponent.tsx
+++ b/packages/module/src/components/GraphComponent.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { memo } from 'react';
 import { observer } from 'mobx-react';
 import { Graph, isGraph } from '../types';
 import styles from '../css/topology-components';
@@ -32,7 +32,7 @@ const ElementChildren: React.FunctionComponent<{ element: Graph }> = observer(({
 ));
 
 // This inner Component will prevent re-rendering layers when the transform changes
-const Inner: React.FunctionComponent<{ element: Graph }> = React.memo(
+const Inner: React.FunctionComponent<{ element: Graph }> = memo(
   observer(({ element }) => (
     <LayersProvider layers={element.getLayers()}>
       <ElementChildren element={element} />
diff --git a/packages/module/src/components/SVGArrowMarker.tsx b/packages/module/src/components/SVGArrowMarker.tsx
index 59519ded..857d3fd1 100644
--- a/packages/module/src/components/SVGArrowMarker.tsx
+++ b/packages/module/src/components/SVGArrowMarker.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import SVGDefs from './defs/SVGDefs';
 
 interface SVGArrowMarkerProps {
diff --git a/packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx b/packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx
index 99e13a66..d1fa02a9 100644
--- a/packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx
+++ b/packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Button,
   Toolbar,
diff --git a/packages/module/src/components/TopologyControlBar/__tests__/TopologyControlBar.test.tsx b/packages/module/src/components/TopologyControlBar/__tests__/TopologyControlBar.test.tsx
index afb8bf22..eac85c70 100644
--- a/packages/module/src/components/TopologyControlBar/__tests__/TopologyControlBar.test.tsx
+++ b/packages/module/src/components/TopologyControlBar/__tests__/TopologyControlBar.test.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
diff --git a/packages/module/src/components/TopologySideBar/TopologySideBar.tsx b/packages/module/src/components/TopologySideBar/TopologySideBar.tsx
index 40979768..7b85f78a 100644
--- a/packages/module/src/components/TopologySideBar/TopologySideBar.tsx
+++ b/packages/module/src/components/TopologySideBar/TopologySideBar.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useEffect, Fragment } from 'react';
 
 import { css } from '@patternfly/react-styles';
 import styles from '../../css/topology-side-bar';
@@ -29,9 +29,9 @@ export const TopologySideBar: React.FunctionComponent<TopologySideBarProps> = ({
   children = null,
   ...otherProps
 }: TopologySideBarProps) => {
-  const [isIn, setIsIn] = React.useState<boolean>(false);
+  const [isIn, setIsIn] = useState<boolean>(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     let timer: any = null;
 
     if (isIn !== show) {
@@ -49,7 +49,7 @@ export const TopologySideBar: React.FunctionComponent<TopologySideBarProps> = ({
   return (
     <div {...otherProps} role="dialog" className={classNames}>
       {(resizable || show) && (
-        <React.Fragment>
+        <Fragment>
           {onClose && (
             <Button
               icon={<TimesIcon />}
@@ -61,7 +61,7 @@ export const TopologySideBar: React.FunctionComponent<TopologySideBarProps> = ({
           )}
           {header && <div className={styles.topologySideBarHeader}>{header}</div>}
           {children}
-        </React.Fragment>
+        </Fragment>
       )}
     </div>
   );
diff --git a/packages/module/src/components/TopologySideBar/__tests__/TopologySideBar.test.tsx b/packages/module/src/components/TopologySideBar/__tests__/TopologySideBar.test.tsx
index 9c7f509e..65355a52 100644
--- a/packages/module/src/components/TopologySideBar/__tests__/TopologySideBar.test.tsx
+++ b/packages/module/src/components/TopologySideBar/__tests__/TopologySideBar.test.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
diff --git a/packages/module/src/components/TopologyView/TopologyView.tsx b/packages/module/src/components/TopologyView/TopologyView.tsx
index 6d75f894..25efcf01 100644
--- a/packages/module/src/components/TopologyView/TopologyView.tsx
+++ b/packages/module/src/components/TopologyView/TopologyView.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Drawer,
   DrawerContent,
diff --git a/packages/module/src/components/TopologyView/__tests__/TopologyView.test.tsx b/packages/module/src/components/TopologyView/__tests__/TopologyView.test.tsx
index 8ab72411..9aca5748 100644
--- a/packages/module/src/components/TopologyView/__tests__/TopologyView.test.tsx
+++ b/packages/module/src/components/TopologyView/__tests__/TopologyView.test.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { TopologyView } from '../index';
 
diff --git a/packages/module/src/components/VisualizationProvider.tsx b/packages/module/src/components/VisualizationProvider.tsx
index e5a918ee..6589062a 100644
--- a/packages/module/src/components/VisualizationProvider.tsx
+++ b/packages/module/src/components/VisualizationProvider.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef } from 'react';
 import ControllerContext from '../utils/ControllerContext';
 import { Controller } from '../types';
 import { Visualization } from '../Visualization';
@@ -14,7 +14,7 @@ const VisualizationProvider: React.FunctionComponent<VisualizationProviderProps>
   controller,
   children
 }: VisualizationProviderProps) => {
-  const controllerRef = React.useRef<Controller>();
+  const controllerRef = useRef<Controller>(null);
   if (controller && controllerRef.current !== controller) {
     controllerRef.current = controller;
   } else if (!controllerRef.current) {
diff --git a/packages/module/src/components/VisualizationSurface.tsx b/packages/module/src/components/VisualizationSurface.tsx
index 25431e08..a5da9294 100644
--- a/packages/module/src/components/VisualizationSurface.tsx
+++ b/packages/module/src/components/VisualizationSurface.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef, useCallback, useEffect, useMemo } from 'react';
 import { action } from 'mobx';
 // https://github.com/mobxjs/mobx-react#observer-batching
 import 'mobx-react/batchingForReactDom';
@@ -28,9 +28,9 @@ const VisualizationSurface: React.FunctionComponent<VisualizationSurfaceProps> =
   state
 }: VisualizationSurfaceProps) => {
   const controller = useVisualizationController();
-  const timerId = React.useRef<NodeJS.Timeout>();
+  const timerId = useRef<NodeJS.Timeout>(null);
 
-  const debounceMeasure = React.useCallback((func: (contentRect: ContentRect) => void, delay?: number) => {
+  const debounceMeasure = useCallback((func: (contentRect: ContentRect) => void, delay?: number) => {
     return (contentRect: ContentRect) => {
       if (!timerId.current) {
         func(contentRect);
@@ -41,11 +41,11 @@ const VisualizationSurface: React.FunctionComponent<VisualizationSurfaceProps> =
     };
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     state && controller.setState(state);
   }, [controller, state]);
 
-  const onMeasure = React.useMemo(
+  const onMeasure = useMemo(
     () =>
       debounceMeasure(
         action((contentRect: ContentRect) => {
@@ -57,7 +57,7 @@ const VisualizationSurface: React.FunctionComponent<VisualizationSurfaceProps> =
   );
 
   // dispose of onMeasure
-  React.useEffect(() => () => clearTimeout(timerId.current), [onMeasure]);
+  useEffect(() => () => clearTimeout(timerId.current), [onMeasure]);
 
   if (!controller.hasGraph()) {
     return null;
@@ -65,11 +65,15 @@ const VisualizationSurface: React.FunctionComponent<VisualizationSurfaceProps> =
 
   const graph = controller.getGraph();
 
+  // TODO: We need to replace react-measure as it doesn't support React 19. The following
+  // casting helps to get topology to build with React 19 versions
+  const Wrapper = ReactMeasure as any;
+
   return (
-    <ReactMeasure client onResize={onMeasure}>
+    <Wrapper client onResize={onMeasure}>
       {({ measureRef }: { measureRef: React.LegacyRef<any> }) => (
-        // render an outer div because react-measure doesn't seem to fire events properly on svg resize
         <div data-test-id="topology" className={css(styles.topologyVisualizationSurface)} ref={measureRef}>
+          {/* render an outer div because react-measure doesn't seem to fire events properly on svg resize */}
           <svg className={css(styles.topologyVisualizationSurfaceSvg)} onContextMenu={stopEvent}>
             <SVGDefsProvider>
               <ElementWrapper element={graph} />
@@ -77,7 +81,7 @@ const VisualizationSurface: React.FunctionComponent<VisualizationSurfaceProps> =
           </svg>
         </div>
       )}
-    </ReactMeasure>
+    </Wrapper>
   );
 };
 
diff --git a/packages/module/src/components/__tests__/ComputeElementDimensions.test.tsx b/packages/module/src/components/__tests__/ComputeElementDimensions.test.tsx
index 20a54fe4..c2b078b7 100644
--- a/packages/module/src/components/__tests__/ComputeElementDimensions.test.tsx
+++ b/packages/module/src/components/__tests__/ComputeElementDimensions.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ComputeElementDimensions from '../ComputeElementDimensions';
 
diff --git a/packages/module/src/components/contextmenu/ContextMenu.tsx b/packages/module/src/components/contextmenu/ContextMenu.tsx
index cf113500..ba825446 100644
--- a/packages/module/src/components/contextmenu/ContextMenu.tsx
+++ b/packages/module/src/components/contextmenu/ContextMenu.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { Dropdown } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import topologyStyles from '../../css/topology-components';
@@ -16,16 +16,16 @@ const ContextMenu: React.FunctionComponent<ContextMenuProps> = ({
   onRequestClose,
   ...other
 }) => {
-  const [isOpen, setOpen] = React.useState(!!open);
-  React.useEffect(() => {
+  const [isOpen, setOpen] = useState(!!open);
+  useEffect(() => {
     setOpen(open);
   }, [open]);
 
-  const handleOnRequestClose = React.useCallback(() => {
+  const handleOnRequestClose = useCallback(() => {
     onRequestClose ? onRequestClose() : setOpen(false);
   }, [onRequestClose]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isOpen) {
       setOpen(false);
       requestAnimationFrame(() => setOpen(true));
diff --git a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx
index a405e6b5..da50b362 100644
--- a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx
+++ b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef, useState, useCallback } from 'react';
 import { Menu, DropdownItem } from '@patternfly/react-core';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { css } from '@patternfly/react-styles';
@@ -23,10 +23,10 @@ const implementsDOMNode = (node: any): node is Node => {
 };
 
 const ContextSubMenuItem: React.FunctionComponent<ContextSubMenuItemProps> = ({ label, children, ...other }) => {
-  const nodeRef = React.useRef<HTMLButtonElement>(null);
-  const subMenuRef = React.useRef<HTMLDivElement>(null);
-  const [open, setOpen] = React.useState(false);
-  const referenceCb = React.useCallback(() => nodeRef.current || { x: 0, y: 0 }, []);
+  const nodeRef = useRef<HTMLButtonElement>(null);
+  const subMenuRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const referenceCb = useCallback(() => nodeRef.current || { x: 0, y: 0 }, []);
 
   return (
     <>
diff --git a/packages/module/src/components/decorators/Decorator.tsx b/packages/module/src/components/decorators/Decorator.tsx
index 316ff93c..4df0869a 100644
--- a/packages/module/src/components/decorators/Decorator.tsx
+++ b/packages/module/src/components/decorators/Decorator.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../css/topology-components';
 import SvgDropShadowFilter from '../svg/SvgDropShadowFilter';
diff --git a/packages/module/src/components/defs/Defs.tsx b/packages/module/src/components/defs/Defs.tsx
index feb38933..f509fdf0 100644
--- a/packages/module/src/components/defs/Defs.tsx
+++ b/packages/module/src/components/defs/Defs.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { Fragment, PureComponent } from 'react';
 import { DefsState, DefsMap } from './SVGDefsProvider';
-export class Defs extends React.PureComponent<{}, DefsState> {
+export class Defs extends PureComponent<{}, DefsState> {
   constructor(props: {}) {
     super(props);
     this.state = {};
@@ -14,7 +14,7 @@ export class Defs extends React.PureComponent<{}, DefsState> {
     return defs ? (
       <defs>
         {Object.keys(defs).map((id) => (
-          <React.Fragment key={id}>{defs[id].node}</React.Fragment>
+          <Fragment key={id}>{defs[id].node}</Fragment>
         ))}
       </defs>
     ) : null;
diff --git a/packages/module/src/components/defs/SVGDefs.tsx b/packages/module/src/components/defs/SVGDefs.tsx
index f37426ab..18a788f4 100644
--- a/packages/module/src/components/defs/SVGDefs.tsx
+++ b/packages/module/src/components/defs/SVGDefs.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 import SVGDefsContext, { SVGDefsContextProps } from './SVGDefsContext';
 import { SVGDefsSetter } from './SVGDefsSetter';
 
@@ -16,7 +16,7 @@ export type SVGDefsSetterProps = SVGDefsContextProps & SVGDefsProps;
  * The assumption must be that there is not a single owner but many owners and therefore each
  * owner must be contributing the same def.
  */
-export default class SVGDefs extends React.Component<SVGDefsProps> {
+export default class SVGDefs extends Component<SVGDefsProps> {
   shouldComponentUpdate() {
     return false;
   }
diff --git a/packages/module/src/components/defs/SVGDefsProvider.tsx b/packages/module/src/components/defs/SVGDefsProvider.tsx
index 7d483c10..19149c67 100644
--- a/packages/module/src/components/defs/SVGDefsProvider.tsx
+++ b/packages/module/src/components/defs/SVGDefsProvider.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createRef, Component } from 'react';
 import SVGDefsContext, { SVGDefsContextProps } from './SVGDefsContext';
 import { Defs } from './Defs';
 
@@ -23,8 +23,8 @@ export interface SVGDefsProviderProps {
  * This helps decouple the parent implementation from the children and ensures that duplicate defs entries,
  * such as filters, are eliminated.
  */
-class SVGDefsProvider extends React.Component<SVGDefsProviderProps> {
-  private readonly defsRef = React.createRef<Defs>();
+class SVGDefsProvider extends Component<SVGDefsProviderProps> {
+  private readonly defsRef = createRef<Defs>();
 
   private readonly defs: DefsMap = {};
 
diff --git a/packages/module/src/components/defs/SVGDefsSetter.tsx b/packages/module/src/components/defs/SVGDefsSetter.tsx
index b7b7fe03..c4a563df 100644
--- a/packages/module/src/components/defs/SVGDefsSetter.tsx
+++ b/packages/module/src/components/defs/SVGDefsSetter.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { Component } from 'react';
 import SVGDefsContext from './SVGDefsContext';
 import { SVGDefsSetterProps } from './SVGDefs';
-export class SVGDefsSetter extends React.Component<SVGDefsSetterProps> {
+export class SVGDefsSetter extends Component<SVGDefsSetterProps> {
   static displayName = 'SVGDefsSetter';
   static contextType = SVGDefsContext;
   context!: React.ContextType<typeof SVGDefsContext>;
diff --git a/packages/module/src/components/defs/__mocks__/SVGDefs.tsx b/packages/module/src/components/defs/__mocks__/SVGDefs.tsx
index 13621d7a..537f35ed 100644
--- a/packages/module/src/components/defs/__mocks__/SVGDefs.tsx
+++ b/packages/module/src/components/defs/__mocks__/SVGDefs.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import SVGDefs from '../SVGDefs';
 
 // This mock simply renders the `defs` in place.
diff --git a/packages/module/src/components/defs/__tests__/Defs.test.tsx b/packages/module/src/components/defs/__tests__/Defs.test.tsx
index f808d5a5..c4eae05f 100644
--- a/packages/module/src/components/defs/__tests__/Defs.test.tsx
+++ b/packages/module/src/components/defs/__tests__/Defs.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Defs } from '../Defs';
 
diff --git a/packages/module/src/components/defs/__tests__/SVGDefs.spec.tsx b/packages/module/src/components/defs/__tests__/SVGDefs.spec.tsx
index e54dbe35..31b5d507 100644
--- a/packages/module/src/components/defs/__tests__/SVGDefs.spec.tsx
+++ b/packages/module/src/components/defs/__tests__/SVGDefs.spec.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { render } from '@testing-library/react';
 
 import SVGDefs, { SVGDefsSetterProps } from '../SVGDefs';
diff --git a/packages/module/src/components/edges/DefaultConnectorTag.tsx b/packages/module/src/components/edges/DefaultConnectorTag.tsx
index 4a21db0d..3d32f85d 100644
--- a/packages/module/src/components/edges/DefaultConnectorTag.tsx
+++ b/packages/module/src/components/edges/DefaultConnectorTag.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import Point from '../../geom/Point';
 import { css } from '@patternfly/react-styles';
 import styles from '../../css/topology-components';
@@ -26,7 +26,7 @@ const DefaultConnectorTag: React.FunctionComponent<DefaultConnectorTagProps> = (
   ...other
 }) => {
   const [textSize, textRef] = useSize([tag, className]);
-  const { width, height, startX, startY } = React.useMemo(() => {
+  const { width, height, startX, startY } = useMemo(() => {
     if (!textSize) {
       return {
         width: 0,
diff --git a/packages/module/src/components/edges/DefaultEdge.tsx b/packages/module/src/components/edges/DefaultEdge.tsx
index 17aea533..aa38bba9 100644
--- a/packages/module/src/components/edges/DefaultEdge.tsx
+++ b/packages/module/src/components/edges/DefaultEdge.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useLayoutEffect } from 'react';
 import { observer } from 'mobx-react';
 import {
   Edge,
@@ -118,7 +118,7 @@ const DefaultEdgeInner: React.FunctionComponent<DefaultEdgeInnerProps> = observe
     const startPoint = element.getStartPoint();
     const endPoint = element.getEndPoint();
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
       if (hover && !dragging) {
         onShowRemoveConnector && onShowRemoveConnector();
       } else {
diff --git a/packages/module/src/components/edges/terminals/ConnectorArrow.tsx b/packages/module/src/components/edges/terminals/ConnectorArrow.tsx
index 3b525c27..2bc9774a 100644
--- a/packages/module/src/components/edges/terminals/ConnectorArrow.tsx
+++ b/packages/module/src/components/edges/terminals/ConnectorArrow.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
 import Point from '../../../geom/Point';
@@ -25,7 +25,7 @@ const ConnectorArrow: React.FunctionComponent<ConnectorArrowProps> = ({
   size = 14,
   dragRef
 }) => {
-  const polygonPoints = React.useMemo(
+  const polygonPoints = useMemo(
     () =>
       pointsStringFromPoints([
         [0, size / 2],
@@ -35,7 +35,7 @@ const ConnectorArrow: React.FunctionComponent<ConnectorArrowProps> = ({
     [size]
   );
 
-  const boundingPoints = React.useMemo(() => {
+  const boundingPoints = useMemo(() => {
     if (startPoint || !endPoint) {
       return null;
     }
diff --git a/packages/module/src/components/edges/terminals/ConnectorArrowAlt.tsx b/packages/module/src/components/edges/terminals/ConnectorArrowAlt.tsx
index 0f3bced7..b2361427 100644
--- a/packages/module/src/components/edges/terminals/ConnectorArrowAlt.tsx
+++ b/packages/module/src/components/edges/terminals/ConnectorArrowAlt.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
 import Point from '../../../geom/Point';
diff --git a/packages/module/src/components/edges/terminals/ConnectorCircle.tsx b/packages/module/src/components/edges/terminals/ConnectorCircle.tsx
index bd41b4b2..75f868a4 100644
--- a/packages/module/src/components/edges/terminals/ConnectorCircle.tsx
+++ b/packages/module/src/components/edges/terminals/ConnectorCircle.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
 import Point from '../../../geom/Point';
diff --git a/packages/module/src/components/edges/terminals/ConnectorCross.tsx b/packages/module/src/components/edges/terminals/ConnectorCross.tsx
index e4770bd1..95c57da9 100644
--- a/packages/module/src/components/edges/terminals/ConnectorCross.tsx
+++ b/packages/module/src/components/edges/terminals/ConnectorCross.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
 import Point from '../../../geom/Point';
diff --git a/packages/module/src/components/edges/terminals/ConnectorSquare.tsx b/packages/module/src/components/edges/terminals/ConnectorSquare.tsx
index 43f5f83e..0dc6ad40 100644
--- a/packages/module/src/components/edges/terminals/ConnectorSquare.tsx
+++ b/packages/module/src/components/edges/terminals/ConnectorSquare.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
 import Point from '../../../geom/Point';
diff --git a/packages/module/src/components/edges/terminals/DefaultConnectorTerminal.tsx b/packages/module/src/components/edges/terminals/DefaultConnectorTerminal.tsx
index 88bfb431..6d6b8e28 100644
--- a/packages/module/src/components/edges/terminals/DefaultConnectorTerminal.tsx
+++ b/packages/module/src/components/edges/terminals/DefaultConnectorTerminal.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
diff --git a/packages/module/src/components/factories/RegisterComponentFactory.tsx b/packages/module/src/components/factories/RegisterComponentFactory.tsx
index e5f4535b..a3cacd3a 100644
--- a/packages/module/src/components/factories/RegisterComponentFactory.tsx
+++ b/packages/module/src/components/factories/RegisterComponentFactory.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import useComponentFactory from '../../hooks/useComponentFactory';
 import { ComponentFactory } from '../../types';
 
diff --git a/packages/module/src/components/factories/RegisterElementFactory.tsx b/packages/module/src/components/factories/RegisterElementFactory.tsx
index aa95807a..020d9b88 100644
--- a/packages/module/src/components/factories/RegisterElementFactory.tsx
+++ b/packages/module/src/components/factories/RegisterElementFactory.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import useElementFactory from '../../hooks/useElementFactory';
 import { ElementFactory } from '../../types';
 
diff --git a/packages/module/src/components/factories/RegisterLayoutFactory.tsx b/packages/module/src/components/factories/RegisterLayoutFactory.tsx
index 8f4043f4..659fff73 100644
--- a/packages/module/src/components/factories/RegisterLayoutFactory.tsx
+++ b/packages/module/src/components/factories/RegisterLayoutFactory.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import useLayoutFactory from '../../hooks/useLayoutFactory';
 import { LayoutFactory } from '../../types';
 
diff --git a/packages/module/src/components/groups/DefaultGroup.tsx b/packages/module/src/components/groups/DefaultGroup.tsx
index e87244ff..60674770 100644
--- a/packages/module/src/components/groups/DefaultGroup.tsx
+++ b/packages/module/src/components/groups/DefaultGroup.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import DefaultGroupExpanded from './DefaultGroupExpanded';
 import { OnSelect, WithDndDragProps, ConnectDragSource, ConnectDropTarget } from '../../behavior';
diff --git a/packages/module/src/components/groups/DefaultGroupCollapsed.tsx b/packages/module/src/components/groups/DefaultGroupCollapsed.tsx
index 8f58a41b..164f5965 100644
--- a/packages/module/src/components/groups/DefaultGroupCollapsed.tsx
+++ b/packages/module/src/components/groups/DefaultGroupCollapsed.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../css/topology-components';
diff --git a/packages/module/src/components/groups/DefaultGroupExpanded.tsx b/packages/module/src/components/groups/DefaultGroupExpanded.tsx
index a4ec6968..0005cc4d 100644
--- a/packages/module/src/components/groups/DefaultGroupExpanded.tsx
+++ b/packages/module/src/components/groups/DefaultGroupExpanded.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef } from 'react';
 import { observer } from 'mobx-react';
 import { polygonHull } from 'd3-polygon';
 import { css } from '@patternfly/react-styles';
@@ -156,9 +156,9 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
   const isHover = hover !== undefined ? hover : hovered || labelHover;
   const anchorRef = useSvgAnchor();
   const outlineRef = useCombineRefs(dndDropRef, anchorRef);
-  const labelLocation = React.useRef<PointWithSize>();
-  const pathRef = React.useRef<string>();
-  const boxRef = React.useRef<Rect | null>(null);
+  const labelLocation = useRef<PointWithSize>(null);
+  const pathRef = useRef<string>(null);
+  const boxRef = useRef<Rect | null>(null);
 
   let parent = element.getParent();
   let altGroup = false;
diff --git a/packages/module/src/components/groups/types.ts b/packages/module/src/components/groups/types.ts
index ed088eb3..cbdda319 100644
--- a/packages/module/src/components/groups/types.ts
+++ b/packages/module/src/components/groups/types.ts
@@ -1,5 +1,5 @@
 import { Node } from '../../types';
-import * as React from 'react';
+
 import { ShapeProps } from '../nodes';
 
 export interface CollapsibleGroupProps {
diff --git a/packages/module/src/components/layers/Layer.tsx b/packages/module/src/components/layers/Layer.tsx
index 810f9840..ca773084 100644
--- a/packages/module/src/components/layers/Layer.tsx
+++ b/packages/module/src/components/layers/Layer.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useRef, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { createPortal } from 'react-dom';
 import ElementContext from '../../utils/ElementContext';
@@ -39,11 +39,11 @@ const compare = (a: ChildNode, b: ChildNode): number => {
 };
 
 const LayerDelegate: React.FunctionComponent<LayerDelegateProps> = observer(({ id, children, orderKey }) => {
-  const getLayerNode = React.useContext(LayersContext);
+  const getLayerNode = useContext(LayersContext);
   const layerNode = getLayerNode(id);
 
-  const element = React.useContext(ElementContext);
-  const nodeRef = React.useRef<SVGGElement | null>(null);
+  const element = useContext(ElementContext);
+  const nodeRef = useRef<SVGGElement | null>(null);
   let order: unknown;
   if (id && orderKey == null) {
     order = element.getOrderKey();
@@ -51,7 +51,7 @@ const LayerDelegate: React.FunctionComponent<LayerDelegateProps> = observer(({ i
     order = orderKey;
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     // TODO use bisection search
     if (nodeRef.current && layerNode != null) {
       nodeRef.current[ORDER_KEY] = order;
diff --git a/packages/module/src/components/layers/LayerContainer.tsx b/packages/module/src/components/layers/LayerContainer.tsx
index 19399e49..57363728 100644
--- a/packages/module/src/components/layers/LayerContainer.tsx
+++ b/packages/module/src/components/layers/LayerContainer.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, forwardRef } from 'react';
 import { observer } from 'mobx-react';
 import ElementContext from '../../utils/ElementContext';
 import { isNode } from '../../types';
@@ -10,7 +10,7 @@ interface LayerContainerProps {
 
 const LayerContainer: React.ForwardRefRenderFunction<SVGGElement, LayerContainerProps> = ({ children }, ref) => {
   // accumulate parent positions
-  const element = React.useContext(ElementContext);
+  const element = useContext(ElementContext);
   let p = element;
   let x = 0;
   let y = 0;
@@ -34,4 +34,4 @@ const LayerContainer: React.ForwardRefRenderFunction<SVGGElement, LayerContainer
   );
 };
 
-export default observer(React.forwardRef(LayerContainer));
+export default observer(forwardRef(LayerContainer));
diff --git a/packages/module/src/components/layers/LayersProvider.tsx b/packages/module/src/components/layers/LayersProvider.tsx
index fe0e697f..0612f156 100644
--- a/packages/module/src/components/layers/LayersProvider.tsx
+++ b/packages/module/src/components/layers/LayersProvider.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 import { DEFAULT_LAYER } from '../../const';
 import LayersContext from './LayersContext';
 
@@ -11,7 +11,7 @@ interface State {
   [id: string]: Element;
 }
 
-export default class LayersProvider extends React.Component<LayersProviderProps, State> {
+export default class LayersProvider extends Component<LayersProviderProps, State> {
   constructor(props: LayersProviderProps) {
     super(props);
     this.state = {};
diff --git a/packages/module/src/components/nodes/DefaultNode.tsx b/packages/module/src/components/nodes/DefaultNode.tsx
index 61ab8b44..13592ab5 100644
--- a/packages/module/src/components/nodes/DefaultNode.tsx
+++ b/packages/module/src/components/nodes/DefaultNode.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useRef, useMemo, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition } from '@patternfly/react-core';
@@ -179,10 +179,10 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
     const refs = useCombineRefs<SVGEllipseElement>(hoverRef, dragNodeRef);
     const { width, height } = element.getDimensions();
     const isHover = hover !== undefined ? hover : hovered;
-    const [nodeScale, setNodeScale] = React.useState<number>(1);
-    const decoratorRef = React.useRef();
+    const [nodeScale, setNodeScale] = useState<number>(1);
+    const decoratorRef = useRef(null);
 
-    const statusDecorator = React.useMemo(() => {
+    const statusDecorator = useMemo(() => {
       if (!status || !showStatusDecorator) {
         return null;
       }
@@ -220,7 +220,7 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
       return decorator;
     }, [status, showStatusDecorator, getShapeDecoratorCenter, element, statusDecoratorTooltip, onStatusDecoratorClick]);
 
-    React.useEffect(() => {
+    useEffect(() => {
       if (isHover) {
         onShowCreateConnector && onShowCreateConnector();
       } else {
@@ -257,11 +257,11 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
     const nodeLabelPosition = labelPosition || element.getLabelPosition();
     const scale = element.getGraph().getScale();
 
-    const animationRef = React.useRef<number>();
-    const scaleGoal = React.useRef<number>(1);
-    const nodeScaled = React.useRef<boolean>(false);
+    const animationRef = useRef<number>(null);
+    const scaleGoal = useRef<number>(1);
+    const nodeScaled = useRef<boolean>(false);
 
-    React.useEffect(() => {
+    useEffect(() => {
       if (!scaleNode || scale >= 1) {
         setNodeScale(1);
         nodeScaled.current = false;
@@ -312,7 +312,7 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
     const labelScale = scaleLabel ? counterScale(scale, 0.35, 0.85, 1, 1.6) : 1;
     const labelPositionScale = scaleLabel ? Math.min(1, 1 / labelScale) : 1;
 
-    const { translateX, translateY } = React.useMemo(() => {
+    const { translateX, translateY } = useMemo(() => {
       if (!scaleNode) {
         return { translateX: 0, translateY: 0 };
       }
diff --git a/packages/module/src/components/nodes/NodeShadows.tsx b/packages/module/src/components/nodes/NodeShadows.tsx
index b0b0f7cf..510b56a5 100644
--- a/packages/module/src/components/nodes/NodeShadows.tsx
+++ b/packages/module/src/components/nodes/NodeShadows.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import SvgDropShadowFilter from '../svg/SvgDropShadowFilter';
 
 export const NODE_SHADOW_FILTER_ID = 'NodeShadowsFilterId';
diff --git a/packages/module/src/components/nodes/labels/LabelActionIcon.tsx b/packages/module/src/components/nodes/labels/LabelActionIcon.tsx
index 44610754..6da0bf39 100644
--- a/packages/module/src/components/nodes/labels/LabelActionIcon.tsx
+++ b/packages/module/src/components/nodes/labels/LabelActionIcon.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef } from 'react';
 import { useSize } from '../../../utils';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
@@ -16,7 +16,7 @@ interface LabelActionIconProps {
   paddingY: number;
 }
 
-const LabelActionIcon = React.forwardRef<SVGRectElement, LabelActionIconProps>(
+const LabelActionIcon = forwardRef<SVGRectElement, LabelActionIconProps>(
   ({ icon, onClick, className, x, y, paddingX, height, iconOffsetX = 0, iconOffsetY = 0 }, actionRef) => {
     const [iconSize, iconRef] = useSize([icon, paddingX]);
     const iconWidth = iconSize?.width ?? 0;
diff --git a/packages/module/src/components/nodes/labels/LabelBadge.tsx b/packages/module/src/components/nodes/labels/LabelBadge.tsx
index 9b295bd3..ca32f545 100644
--- a/packages/module/src/components/nodes/labels/LabelBadge.tsx
+++ b/packages/module/src/components/nodes/labels/LabelBadge.tsx
@@ -1,5 +1,5 @@
 /* eslint patternfly-react/import-tokens-icons: 0 */
-import * as React from 'react';
+import { forwardRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import { t_color_blue_10 as defaultBadgeFill } from '@patternfly/react-tokens/dist/js/t_color_blue_10';
 import { t_color_blue_30 as defaultBadgeBorder } from '@patternfly/react-tokens/dist/js/t_color_blue_30';
@@ -21,7 +21,7 @@ interface LabelBadgeProps {
   innerRef?: React.Ref<SVGGElement>;
 }
 
-const LabelBadge = React.forwardRef<SVGRectElement, LabelBadgeProps>(
+const LabelBadge = forwardRef<SVGRectElement, LabelBadgeProps>(
   ({ badge, badgeTextColor, badgeColor, badgeBorderColor, badgeClassName, className, x, y, innerRef }, iconRef) => {
     const [textSize, textRef] = useSize([]);
     const classes = css(styles.topologyNodeLabelBadge, badgeClassName && badgeClassName, className && className);
diff --git a/packages/module/src/components/nodes/labels/LabelContextMenu.tsx b/packages/module/src/components/nodes/labels/LabelContextMenu.tsx
index 660d0670..73dd0614 100644
--- a/packages/module/src/components/nodes/labels/LabelContextMenu.tsx
+++ b/packages/module/src/components/nodes/labels/LabelContextMenu.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { WithContextMenuProps } from '../../../behavior';
 import LabelActionIcon from './LabelActionIcon';
@@ -12,7 +12,7 @@ type LabelContextMenuProps = {
   paddingY: number;
 } & WithContextMenuProps;
 
-const LabelContextMenu = React.forwardRef<SVGRectElement, LabelContextMenuProps>(
+const LabelContextMenu = forwardRef<SVGRectElement, LabelContextMenuProps>(
   ({ onContextMenu, className, x, y, paddingX, paddingY, height }, menuRef) => (
     <LabelActionIcon
       ref={menuRef}
diff --git a/packages/module/src/components/nodes/labels/LabelIcon.tsx b/packages/module/src/components/nodes/labels/LabelIcon.tsx
index b509d438..44696600 100644
--- a/packages/module/src/components/nodes/labels/LabelIcon.tsx
+++ b/packages/module/src/components/nodes/labels/LabelIcon.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
 
@@ -14,7 +14,7 @@ interface LabelIconProps {
   innerRef?: React.Ref<SVGGElement>;
 }
 
-const LabelIcon = React.forwardRef<SVGCircleElement, LabelIconProps>(
+const LabelIcon = forwardRef<SVGCircleElement, LabelIconProps>(
   ({ className, x, y, width, height, iconClass, icon, padding = 4, innerRef }, circleRef) => {
     const radius = width / 2;
     const cx = x - radius;
diff --git a/packages/module/src/components/nodes/labels/NodeLabel.tsx b/packages/module/src/components/nodes/labels/NodeLabel.tsx
index 1eb6c71b..886f10b7 100644
--- a/packages/module/src/components/nodes/labels/NodeLabel.tsx
+++ b/packages/module/src/components/nodes/labels/NodeLabel.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
 import { truncateMiddle } from '../../../utils/truncate-middle';
@@ -106,7 +106,7 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
     contextStartX,
     iconSpace,
     badgeSpace
-  } = React.useMemo(() => {
+  } = useMemo(() => {
     if (!textSize) {
       return {
         width: 0,
diff --git a/packages/module/src/components/nodes/shapes/Ellipse.tsx b/packages/module/src/components/nodes/shapes/Ellipse.tsx
index 4a31df65..a1530fdb 100644
--- a/packages/module/src/components/nodes/shapes/Ellipse.tsx
+++ b/packages/module/src/components/nodes/shapes/Ellipse.tsx
@@ -1,6 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
-import * as React from 'react';
+
 import { useAnchor } from '../../../behavior';
 import { EllipseAnchor } from '../../../anchors';
 import { ShapeProps } from './shapeUtils';
diff --git a/packages/module/src/components/nodes/shapes/Hexagon.tsx b/packages/module/src/components/nodes/shapes/Hexagon.tsx
index bb8a6992..bb6c9bb1 100644
--- a/packages/module/src/components/nodes/shapes/Hexagon.tsx
+++ b/packages/module/src/components/nodes/shapes/Hexagon.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { HEXAGON_CORNER_RADIUS, ShapeProps } from './shapeUtils';
 import { SidedShape } from './index';
 
diff --git a/packages/module/src/components/nodes/shapes/Octagon.tsx b/packages/module/src/components/nodes/shapes/Octagon.tsx
index 0dac48ff..9d3c8176 100644
--- a/packages/module/src/components/nodes/shapes/Octagon.tsx
+++ b/packages/module/src/components/nodes/shapes/Octagon.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { OCTAGON_CORNER_RADIUS, ShapeProps } from './shapeUtils';
 import { SidedShape } from './index';
 
diff --git a/packages/module/src/components/nodes/shapes/Rectangle.tsx b/packages/module/src/components/nodes/shapes/Rectangle.tsx
index 6d74aebc..cf8c286c 100644
--- a/packages/module/src/components/nodes/shapes/Rectangle.tsx
+++ b/packages/module/src/components/nodes/shapes/Rectangle.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
 import { useAnchor } from '../../../behavior';
diff --git a/packages/module/src/components/nodes/shapes/Rhombus.tsx b/packages/module/src/components/nodes/shapes/Rhombus.tsx
index 64727903..67ba9194 100644
--- a/packages/module/src/components/nodes/shapes/Rhombus.tsx
+++ b/packages/module/src/components/nodes/shapes/Rhombus.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
 import { PointTuple } from '../../../types';
@@ -27,7 +27,7 @@ const Rhombus: React.FunctionComponent<RhombusProps> = ({
 }) => {
   const anchorRef = useSvgAnchor();
   const refs = useCombineRefs(dndDropRef, anchorRef);
-  const points = React.useMemo(() => {
+  const points = useMemo(() => {
     const polygonPoints: PointTuple[] = getRhombusPoints(width, height, cornerRadius / 2);
 
     return cornerRadius
diff --git a/packages/module/src/components/nodes/shapes/SidedShape.tsx b/packages/module/src/components/nodes/shapes/SidedShape.tsx
index 64586b09..22c8ec52 100644
--- a/packages/module/src/components/nodes/shapes/SidedShape.tsx
+++ b/packages/module/src/components/nodes/shapes/SidedShape.tsx
@@ -1,6 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
-import * as React from 'react';
+import { useMemo } from 'react';
 import { getPathForSides, getPointsForSides, ShapeProps } from './shapeUtils';
 import { usePolygonAnchor } from '../../../behavior';
 
@@ -18,7 +18,7 @@ const SidedShape: React.FunctionComponent<SidedProps> = ({
   cornerRadius = 0,
   dndDropRef
 }) => {
-  const [polygonPoints, points] = React.useMemo(() => {
+  const [polygonPoints, points] = useMemo(() => {
     const polygonPoints = getPointsForSides(sides, Math.min(width, height));
     return [
       polygonPoints,
diff --git a/packages/module/src/components/nodes/shapes/Stadium.tsx b/packages/module/src/components/nodes/shapes/Stadium.tsx
index 03194be3..b57745da 100644
--- a/packages/module/src/components/nodes/shapes/Stadium.tsx
+++ b/packages/module/src/components/nodes/shapes/Stadium.tsx
@@ -1,6 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
-import * as React from 'react';
+import { useMemo } from 'react';
 import { useSvgAnchor } from '../../../behavior';
 import { getHullPath, ShapeProps } from './shapeUtils';
 import { PointTuple } from '../../../types';
@@ -22,7 +22,7 @@ const Stadium: React.FunctionComponent<ShapeProps> = ({
 }) => {
   const anchorRef = useSvgAnchor();
   const refs = useCombineRefs(dndDropRef, anchorRef);
-  const points = React.useMemo(() => getHullPath(getStadiumPoints(width, height / 2), height / 2), [height, width]);
+  const points = useMemo(() => getHullPath(getStadiumPoints(width, height / 2), height / 2), [height, width]);
 
   return <path className={className} ref={refs} d={points} filter={filter} />;
 };
diff --git a/packages/module/src/components/nodes/shapes/Trapezoid.tsx b/packages/module/src/components/nodes/shapes/Trapezoid.tsx
index a5d271a4..fa5ad8e1 100644
--- a/packages/module/src/components/nodes/shapes/Trapezoid.tsx
+++ b/packages/module/src/components/nodes/shapes/Trapezoid.tsx
@@ -1,6 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
-import * as React from 'react';
+import { useMemo } from 'react';
 import { PointTuple } from '../../../types';
 import { getHullPath, TRAPEZOID_CORNER_RADIUS, ShapeProps } from './shapeUtils';
 import { usePolygonAnchor } from '../../../behavior';
@@ -32,7 +32,7 @@ const Trapezoid: React.FunctionComponent<TrapezoidProps> = ({
   cornerRadius = TRAPEZOID_CORNER_RADIUS,
   dndDropRef
 }) => {
-  const [polygonPoints, points] = React.useMemo(() => {
+  const [polygonPoints, points] = useMemo(() => {
     const polygonPoints: PointTuple[] = getTrapezoidPoints(width, height, cornerRadius, true);
 
     const path = cornerRadius
diff --git a/packages/module/src/components/nodes/shapes/shapeUtils.ts b/packages/module/src/components/nodes/shapes/shapeUtils.ts
index 12e3d5d7..ad4d6ec7 100644
--- a/packages/module/src/components/nodes/shapes/shapeUtils.ts
+++ b/packages/module/src/components/nodes/shapes/shapeUtils.ts
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Node, NodeShape, PointTuple, TopologyQuadrant } from '../../../types';
 import { polygonHull } from 'd3-polygon';
 import { hullPath, pointTuplesToPath } from '../../../utils';
diff --git a/packages/module/src/components/popper/Popper.tsx b/packages/module/src/components/popper/Popper.tsx
index 0d639ee8..b3bf568a 100644
--- a/packages/module/src/components/popper/Popper.tsx
+++ b/packages/module/src/components/popper/Popper.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import PopperJS, { PopperOptions } from 'popper.js';
 import useCombineRefs from '../../utils/useCombineRefs';
 import Portal from './Portal';
@@ -99,15 +99,15 @@ const Popper: React.FunctionComponent<PopperProps> = ({
 }) => {
   const controlled = typeof open === 'boolean';
   const openProp = controlled ? open || false : true;
-  const nodeRef = React.useRef<Element>();
-  const popperRef = React.useRef<PopperJS>(null);
+  const nodeRef = useRef<Element>(null);
+  const popperRef = useRef<PopperJS>(null);
   const popperRefs = useCombineRefs<PopperJS>(popperRef, popperRefIn);
-  const [isOpen, setOpenState] = React.useState(openProp);
-  const focusRef = React.useRef<Element | null>();
-  const onRequestCloseRef = React.useRef(onRequestClose);
+  const [isOpen, setOpenState] = useState(openProp);
+  const focusRef = useRef<Element | null>(null);
+  const onRequestCloseRef = useRef(onRequestClose);
   onRequestCloseRef.current = onRequestClose;
 
-  const setOpen = React.useCallback(
+  const setOpen = useCallback(
     (newOpen: boolean) => {
       if (returnFocus && newOpen !== isOpen) {
         if (newOpen) {
@@ -123,11 +123,11 @@ const Popper: React.FunctionComponent<PopperProps> = ({
     [returnFocus, isOpen]
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     setOpen(openProp);
   }, [openProp, setOpen]);
 
-  const onKeyDown = React.useCallback(
+  const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         controlled ? onRequestCloseRef.current && onRequestCloseRef.current() : setOpen(false);
@@ -136,7 +136,7 @@ const Popper: React.FunctionComponent<PopperProps> = ({
     [controlled, setOpen]
   );
 
-  const onClickOutside = React.useCallback(
+  const onClickOutside = useCallback(
     (e: Event) => {
       if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
         controlled ? onRequestCloseRef.current && onRequestCloseRef.current(e) : setOpen(false);
@@ -145,7 +145,7 @@ const Popper: React.FunctionComponent<PopperProps> = ({
     [controlled, setOpen]
   );
 
-  const destroy = React.useCallback(() => {
+  const destroy = useCallback(() => {
     if (popperRef.current) {
       popperRef.current.destroy();
       popperRefs(null);
@@ -155,7 +155,7 @@ const Popper: React.FunctionComponent<PopperProps> = ({
     }
   }, [onClickOutside, onKeyDown, popperRefs]);
 
-  const initialize = React.useCallback(() => {
+  const initialize = useCallback(() => {
     if (!nodeRef.current || !reference || !isOpen) {
       return;
     }
@@ -196,7 +196,7 @@ const Popper: React.FunctionComponent<PopperProps> = ({
     onClickOutside
   ]);
 
-  const nodeRefCallback = React.useCallback<React.RefCallback<HTMLDivElement>>(
+  const nodeRefCallback = useCallback<React.RefCallback<HTMLDivElement>>(
     (node) => {
       nodeRef.current = node;
       initialize();
@@ -204,18 +204,18 @@ const Popper: React.FunctionComponent<PopperProps> = ({
     [initialize]
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     initialize();
   }, [initialize]);
 
-  React.useEffect(
+  useEffect(
     () => () => {
       destroy();
     },
     [destroy]
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen) {
       destroy();
     }
diff --git a/packages/module/src/components/popper/Portal.tsx b/packages/module/src/components/popper/Portal.tsx
index c42be825..2bc5b005 100644
--- a/packages/module/src/components/popper/Portal.tsx
+++ b/packages/module/src/components/popper/Portal.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { useIsomorphicLayoutEffect } from '@patternfly/react-core';
 
@@ -13,7 +13,7 @@ const getContainer = (container: GetContainer): Element | null | undefined =>
   typeof container === 'function' ? container() : container;
 
 const Portal: React.FunctionComponent<PortalProps> = ({ children, container }) => {
-  const [containerNode, setContainerNode] = React.useState<Element>();
+  const [containerNode, setContainerNode] = useState<Element>();
 
   useIsomorphicLayoutEffect(() => {
     setContainerNode(getContainer(container) || document.body);
diff --git a/packages/module/src/components/svg/SvgDropShadowFilter.tsx b/packages/module/src/components/svg/SvgDropShadowFilter.tsx
index 4c440f64..a9aa7214 100644
--- a/packages/module/src/components/svg/SvgDropShadowFilter.tsx
+++ b/packages/module/src/components/svg/SvgDropShadowFilter.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { t_color_black as globalBlack1000 } from '@patternfly/react-tokens/dist/js/t_color_black';
 import { SVGDefs } from '../defs';
diff --git a/packages/module/src/hooks/useComponentFactory.tsx b/packages/module/src/hooks/useComponentFactory.tsx
index 70fc4bce..199b71ad 100644
--- a/packages/module/src/hooks/useComponentFactory.tsx
+++ b/packages/module/src/hooks/useComponentFactory.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import { ComponentFactory } from '../types';
 import useVisualizationController from './useVisualizationController';
 
 const useComponentFactory = (factory: ComponentFactory): void => {
   const controller = useVisualizationController();
-  React.useEffect(() => {
+  useEffect(() => {
     controller.registerComponentFactory(factory);
     // TODO support unregister?
   }, [controller, factory]);
diff --git a/packages/module/src/hooks/useElementFactory.tsx b/packages/module/src/hooks/useElementFactory.tsx
index 0e2001d0..9bf4feb7 100644
--- a/packages/module/src/hooks/useElementFactory.tsx
+++ b/packages/module/src/hooks/useElementFactory.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import { ElementFactory } from '../types';
 import useVisualizationController from './useVisualizationController';
 
 const useElementFactory = (factory: ElementFactory): void => {
   const controller = useVisualizationController();
-  React.useEffect(() => {
+  useEffect(() => {
     controller.registerElementFactory(factory);
     // TODO support unregister?
   }, [controller, factory]);
diff --git a/packages/module/src/hooks/useEventListener.tsx b/packages/module/src/hooks/useEventListener.tsx
index 6e2c96b3..dcfe0ecc 100644
--- a/packages/module/src/hooks/useEventListener.tsx
+++ b/packages/module/src/hooks/useEventListener.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import useVisualizationController from './useVisualizationController';
 import { EventListener } from '../types';
 
 const useEventListener = <L extends EventListener = EventListener>(type: string, listener: L): void => {
   const controller = useVisualizationController();
-  React.useEffect(() => {
+  useEffect(() => {
     controller.addEventListener(type, listener);
     return () => {
       controller.removeEventListener(type, listener);
diff --git a/packages/module/src/hooks/useLayoutFactory.tsx b/packages/module/src/hooks/useLayoutFactory.tsx
index fa16a5eb..28f03f13 100644
--- a/packages/module/src/hooks/useLayoutFactory.tsx
+++ b/packages/module/src/hooks/useLayoutFactory.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import { LayoutFactory } from '../types';
 import useVisualizationController from './useVisualizationController';
 
 const useLayoutFactory = (factory: LayoutFactory): void => {
   const controller = useVisualizationController();
-  React.useEffect(() => {
+  useEffect(() => {
     controller.registerLayoutFactory(factory);
     // TODO support unregister?
   }, [controller, factory]);
diff --git a/packages/module/src/hooks/useModel.tsx b/packages/module/src/hooks/useModel.tsx
index 2f959865..1c4b0c05 100644
--- a/packages/module/src/hooks/useModel.tsx
+++ b/packages/module/src/hooks/useModel.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import useVisualizationController from './useVisualizationController';
 import { Model } from '../types';
 
 const useModel = (model: Model): void => {
   const controller = useVisualizationController();
 
-  React.useEffect(() => {
+  useEffect(() => {
     controller.fromModel(model);
   }, [controller, model]);
 };
diff --git a/packages/module/src/hooks/useScaleNode.tsx b/packages/module/src/hooks/useScaleNode.tsx
index 47e20cac..5ee488d6 100644
--- a/packages/module/src/hooks/useScaleNode.tsx
+++ b/packages/module/src/hooks/useScaleNode.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
+import { useState, useRef, useEffect } from 'react';
 
 const useScaleNode = (scaleNode: boolean, scale: number, scaleUpTime: number = 200): number => {
-  const [nodeScale, setNodeScale] = React.useState<number>(1);
-  const animationRef = React.useRef<number>();
-  const scaleGoal = React.useRef<number>(1);
-  const nodeScaled = React.useRef<boolean>(false);
+  const [nodeScale, setNodeScale] = useState<number>(1);
+  const animationRef = useRef<number>(null);
+  const scaleGoal = useRef<number>(1);
+  const nodeScaled = useRef<boolean>(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!scaleNode || scale >= 1) {
       setNodeScale(1);
       nodeScaled.current = false;
diff --git a/packages/module/src/hooks/useVisualizationController.tsx b/packages/module/src/hooks/useVisualizationController.tsx
index aee43539..f42cb69e 100644
--- a/packages/module/src/hooks/useVisualizationController.tsx
+++ b/packages/module/src/hooks/useVisualizationController.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import { ControllerContext } from '../utils';
 import { Controller } from '../types';
 
-const useVisualizationController = (): Controller => React.useContext(ControllerContext);
+const useVisualizationController = (): Controller => useContext(ControllerContext);
 
 export default useVisualizationController;
diff --git a/packages/module/src/hooks/useVisualizationState.tsx b/packages/module/src/hooks/useVisualizationState.tsx
index 24f06481..15e50847 100644
--- a/packages/module/src/hooks/useVisualizationState.tsx
+++ b/packages/module/src/hooks/useVisualizationState.tsx
@@ -1,24 +1,24 @@
-import * as React from 'react';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import { reaction } from 'mobx';
 import useVisualizationController from './useVisualizationController';
 
 const useVisualizationState = <S extends any>(key: string, initialState?: S): [S, (value: S) => void] => {
-  const keyRef = React.useRef(key);
+  const keyRef = useRef(key);
   if (keyRef.current !== key) {
     throw new Error(`State key change disallowed: ${keyRef.current} => ${key}`);
   }
 
-  const [state, setState] = React.useState<S>(initialState);
+  const [state, setState] = useState<S>(initialState);
   const controller = useVisualizationController();
 
-  const setControllerState = React.useCallback(
+  const setControllerState = useCallback(
     (value?: S): void => {
       controller.setState({ [keyRef.current]: value });
     },
     [controller]
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     // init the controller state
     setControllerState(initialState);
 
diff --git a/packages/module/src/pipelines/components/edges/TaskEdge.tsx b/packages/module/src/pipelines/components/edges/TaskEdge.tsx
index da90ea1a..5ea374b2 100644
--- a/packages/module/src/pipelines/components/edges/TaskEdge.tsx
+++ b/packages/module/src/pipelines/components/edges/TaskEdge.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
diff --git a/packages/module/src/pipelines/components/edges/WhenEdge.tsx b/packages/module/src/pipelines/components/edges/WhenEdge.tsx
index 389f4cbd..06ded32c 100644
--- a/packages/module/src/pipelines/components/edges/WhenEdge.tsx
+++ b/packages/module/src/pipelines/components/edges/WhenEdge.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { EdgeTerminalType, GraphElement } from '../../../types';
 import { DefaultEdge } from '../../../components';
 
diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx
index 7b8ab053..3754c0e1 100644
--- a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx
+++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import { OnSelect, WithDndDragProps, ConnectDragSource, ConnectDropTarget } from '../../../behavior';
 import { ShapeProps } from '../../../components';
diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx
index d571679e..f866525a 100644
--- a/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx
+++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-alt-icon';
 import { CollapsibleGroupProps } from '../../../components';
diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx
index 63b04fe3..bedc338a 100644
--- a/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx
+++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback, useMemo } from 'react';
 import { observer } from 'mobx-react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
@@ -75,7 +75,7 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro
 
       const anchorOffset = verticalLayout ? labelSize?.height / 2 : labelSize?.width / 2;
       useAnchor(
-        React.useCallback(
+        useCallback(
           (node: Node) =>
             new TaskGroupSourceAnchor(
               node,
@@ -92,7 +92,7 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro
         AnchorEnd.source
       );
       useAnchor(
-        React.useCallback(
+        useCallback(
           (node: Node) =>
             new TaskGroupTargetAnchor(
               node,
@@ -111,7 +111,7 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro
 
       const bounds = element.getBounds();
 
-      const [labelX, labelY] = React.useMemo(() => {
+      const [labelX, labelY] = useMemo(() => {
         if (!showLabel || !(label || element.getLabel())) {
           return [0, 0];
         }
diff --git a/packages/module/src/pipelines/components/groups/TaskGroupPillLabel.tsx b/packages/module/src/pipelines/components/groups/TaskGroupPillLabel.tsx
index b4558565..074a3912 100644
--- a/packages/module/src/pipelines/components/groups/TaskGroupPillLabel.tsx
+++ b/packages/module/src/pipelines/components/groups/TaskGroupPillLabel.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { observer } from 'mobx-react';
 import styles from '../../../css/topology-components';
 import TaskPill, { TaskPillProps } from '../nodes/TaskPill';
@@ -47,7 +47,7 @@ const TaskGroupPillLabel: React.FC<TaskGroupPillLabelProps> = ({
   const labelScale = detailsLevel !== ScaleDetailsLevel.high ? Math.min(1 / scale, 1 / medScale) : 1;
   const labelPositionScale = detailsLevel !== ScaleDetailsLevel.high ? 1 / labelScale : 1;
 
-  const { startX, startY } = React.useMemo(() => {
+  const { startX, startY } = useMemo(() => {
     let startX: number;
     let startY: number;
     const scaledWidth = labelWidth / labelPositionScale;
diff --git a/packages/module/src/pipelines/components/nodes/FinallyNode.tsx b/packages/module/src/pipelines/components/nodes/FinallyNode.tsx
index 726a149d..2388c0fa 100644
--- a/packages/module/src/pipelines/components/nodes/FinallyNode.tsx
+++ b/packages/module/src/pipelines/components/nodes/FinallyNode.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import TaskNode, { TaskNodeProps } from './TaskNode';
 
 const FinallyNode: React.FC<TaskNodeProps> = (props) => (
diff --git a/packages/module/src/pipelines/components/nodes/SpacerNode.tsx b/packages/module/src/pipelines/components/nodes/SpacerNode.tsx
index 9c2cf5ef..65f3bef7 100644
--- a/packages/module/src/pipelines/components/nodes/SpacerNode.tsx
+++ b/packages/module/src/pipelines/components/nodes/SpacerNode.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from '../../../mobx-exports';
 import { GraphElement } from '../../../types';
 
diff --git a/packages/module/src/pipelines/components/nodes/TaskBadge.tsx b/packages/module/src/pipelines/components/nodes/TaskBadge.tsx
index f9ed8220..9d209597 100644
--- a/packages/module/src/pipelines/components/nodes/TaskBadge.tsx
+++ b/packages/module/src/pipelines/components/nodes/TaskBadge.tsx
@@ -1,5 +1,5 @@
 /* eslint patternfly-react/import-tokens-icons: 0 */
-import * as React from 'react';
+import { forwardRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import { t_color_blue_10 as defaultBadgeFill } from '@patternfly/react-tokens/dist/js/t_color_blue_10';
 import { t_color_blue_30 as defaultBadgeBorder } from '@patternfly/react-tokens/dist/js/t_color_blue_30';
@@ -20,7 +20,7 @@ interface LabelBadgeProps {
   badgeLocation?: BadgeLocation;
 }
 
-const TaskBadge = React.forwardRef<SVGRectElement, LabelBadgeProps>(
+const TaskBadge = forwardRef<SVGRectElement, LabelBadgeProps>(
   ({ badge, badgeTextColor, badgeColor, badgeBorderColor, badgeClassName, className, x, y }, iconRef) => {
     const [textSize, textRef] = useSize([]);
     const classes = css(styles.topologyNodeLabelBadge, badgeClassName && badgeClassName, className && className);
diff --git a/packages/module/src/pipelines/components/nodes/TaskNode.tsx b/packages/module/src/pipelines/components/nodes/TaskNode.tsx
index 04736595..e8a23043 100644
--- a/packages/module/src/pipelines/components/nodes/TaskNode.tsx
+++ b/packages/module/src/pipelines/components/nodes/TaskNode.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { action } from 'mobx';
 import { TooltipProps } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
@@ -121,7 +121,7 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer(
   }) => {
     const [hovered, hoverRef] = useHover();
     // const isHover = hover !== undefined ? hover : hovered;
-    const taskRef = React.useRef();
+    const taskRef = useRef(null);
     const [pillSize, pillRef] = useSize();
     const pillWidth = pillSize?.width || 0;
     const { width } = element.getBounds();
@@ -130,7 +130,7 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer(
     const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM;
 
     useAnchor(
-      React.useCallback(
+      useCallback(
         (node: Node) => new TaskNodeSourceAnchor(node, detailsLevel, statusIconSize + 4, verticalLayout),
         // Include scaleNode to cause an update when it changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -139,7 +139,7 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer(
       AnchorEnd.source
     );
     useAnchor(
-      React.useCallback(
+      useCallback(
         (node: Node) =>
           new TaskNodeTargetAnchor(node, whenSize + whenOffset, detailsLevel, statusIconSize + 4, verticalLayout),
         // Include scaleNode to cause an update when it changes
@@ -149,7 +149,7 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer(
       AnchorEnd.target
     );
 
-    React.useEffect(() => {
+    useEffect(() => {
       const sourceEdges = element.getSourceEdges();
       action(() => {
         const indent = detailsLevel === ScaleDetailsLevel.high && !verticalLayout ? width - pillWidth : 0;
diff --git a/packages/module/src/pipelines/components/nodes/TaskPill.tsx b/packages/module/src/pipelines/components/nodes/TaskPill.tsx
index f8524890..a2e5a679 100644
--- a/packages/module/src/pipelines/components/nodes/TaskPill.tsx
+++ b/packages/module/src/pipelines/components/nodes/TaskPill.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef, useMemo, useCallback } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-pipelines';
 import topologyStyles from '../../../css/topology-components';
@@ -80,16 +80,16 @@ const TaskPill: React.FC<TaskPillProps> = observer(
     y
   }) => {
     const [hovered] = useHover();
-    const taskIconComponentRef = React.useRef();
+    const taskIconComponentRef = useRef(null);
     const isHover = hover !== undefined ? hover : hovered;
     const label = truncateMiddle(element.getLabel(), { length: truncateLength, omission: '...' });
     const [textSize, textRef] = useSize([label, className]);
-    const nameLabelTriggerRef = React.useRef();
+    const nameLabelTriggerRef = useRef(null);
     const nameLabelRef = useCombineRefs(textRef, nameLabelTriggerRef);
     const [statusSize, statusRef] = useSize([status, showStatusState, statusIconSize]);
     const [leadSize, leadIconRef] = useSize([leadIcon]);
     const [badgeSize, badgeRef] = useSize([badge]);
-    const badgeLabelTriggerRef = React.useRef();
+    const badgeLabelTriggerRef = useRef(null);
     const [actionSize, actionRef] = useSize([actionIcon, paddingX]);
     const [contextSize, contextRef] = useSize([onContextMenu, paddingX]);
     const detailsLevel = element.getGraph().getDetailsLevel();
@@ -110,7 +110,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
       iconStartX,
       leadIconStartX,
       offsetX
-    } = React.useMemo(() => {
+    } = useMemo(() => {
       if (!textSize) {
         return {
           height: 0,
@@ -217,7 +217,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
     );
 
     // Force an update of the given pillRef when dependencies change
-    const pillUpdatedRef = React.useCallback(
+    const pillUpdatedRef = useCallback(
       (node: SVGGraphicsElement): void => {
         pillRef(node);
       },
diff --git a/packages/module/src/pipelines/decorators/WhenDecorator.tsx b/packages/module/src/pipelines/decorators/WhenDecorator.tsx
index 8bb644e8..e9b875b9 100644
--- a/packages/module/src/pipelines/decorators/WhenDecorator.tsx
+++ b/packages/module/src/pipelines/decorators/WhenDecorator.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef, useMemo } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import styles from '../../css/topology-pipelines';
@@ -56,11 +56,11 @@ export const WhenDecorator: React.FC<WhenDecoratorProps> = observer(
     disableTooltip = false
   }: WhenDecoratorProps) => {
     const nodeElement = element as Node;
-    const diamondNodeRef = React.useRef();
+    const diamondNodeRef = useRef(null);
     const { height: taskHeight, width: taskWidth } = nodeElement.getBounds();
     const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM;
 
-    const points = React.useMemo(() => {
+    const points = useMemo(() => {
       if (verticalLayout) {
         const y = -topOffset;
         const startX = taskWidth / 2;
diff --git a/packages/module/src/pipelines/utils/StatusIcon.tsx b/packages/module/src/pipelines/utils/StatusIcon.tsx
index 0bf48d68..10fd1780 100644
--- a/packages/module/src/pipelines/utils/StatusIcon.tsx
+++ b/packages/module/src/pipelines/utils/StatusIcon.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
diff --git a/packages/module/src/utils/useCombineRefs.tsx b/packages/module/src/utils/useCombineRefs.tsx
index a74daf63..b59fbfc5 100644
--- a/packages/module/src/utils/useCombineRefs.tsx
+++ b/packages/module/src/utils/useCombineRefs.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { useCallback } from 'react';
 
 const useCombineRefs = <RefType extends any>(...refs: (React.Ref<RefType> | undefined)[]) =>
-  React.useCallback(
+  useCallback(
     (element: RefType | null): void =>
       refs.forEach((ref) => {
         if (ref) {
diff --git a/packages/module/src/utils/useHover.ts b/packages/module/src/utils/useHover.ts
index 2bc52b64..061076b9 100644
--- a/packages/module/src/utils/useHover.ts
+++ b/packages/module/src/utils/useHover.ts
@@ -1,15 +1,15 @@
-import * as React from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import useCallbackRef from './useCallbackRef';
 
 const useHover = <T extends Element>(
   delayIn: number = 200,
   delayOut: number = 200
 ): [boolean, (node: T) => (() => void) | undefined] => {
-  const [hover, setHover] = React.useState<boolean>(false);
-  const mountRef = React.useRef(true);
+  const [hover, setHover] = useState<boolean>(false);
+  const mountRef = useRef(true);
 
   // need to ensure we do not start the unset timer on unmount
-  React.useEffect(
+  useEffect(
     () => () => {
       mountRef.current = false;
     },
@@ -17,10 +17,10 @@ const useHover = <T extends Element>(
   );
 
   // The unset handle needs to be referred by listeners in different closures.
-  const unsetHandle = React.useRef<any>();
+  const unsetHandle = useRef<any>(null);
 
   const callbackRef = useCallbackRef(
-    React.useCallback(
+    useCallback(
       (node: T) => {
         if (node) {
           // store locally instead of a ref because it only needs to be referred by inner closures
diff --git a/packages/module/src/utils/useSize.ts b/packages/module/src/utils/useSize.ts
index d92eed33..a544b596 100644
--- a/packages/module/src/utils/useSize.ts
+++ b/packages/module/src/utils/useSize.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useRef, useCallback } from 'react';
 
 interface Size {
   width: number;
@@ -8,11 +8,11 @@ interface Size {
 const EMPTY: any[] = [];
 
 export const useSize = (dependencies: any[] = EMPTY): [Size | undefined, (node: SVGGraphicsElement) => void] => {
-  const [size, setSize] = React.useState<Size>();
-  const sizeRef = React.useRef<Size | undefined>();
+  const [size, setSize] = useState<Size>();
+  const sizeRef = useRef<Size | undefined>(undefined);
   sizeRef.current = size;
 
-  const callbackRef = React.useCallback((node: SVGGraphicsElement): void => {
+  const callbackRef = useCallback((node: SVGGraphicsElement): void => {
     if (node != null) {
       const bb = node.getBBox();
       if (!sizeRef.current || sizeRef.current.width !== bb.width || sizeRef.current.height !== bb.height) {
diff --git a/packages/module/tsconfig.json b/packages/module/tsconfig.json
index 5a0f4000..f99352d2 100644
--- a/packages/module/tsconfig.json
+++ b/packages/module/tsconfig.json
@@ -9,25 +9,25 @@
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
-    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
     "declaration": true /* Generates corresponding '.d.ts' file. */,
-    "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    "sourceMap": true,                           /* Generates corresponding '.map' file. */
+    "declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */,
+    "sourceMap": true /* Generates corresponding '.map' file. */,
     // "outFile": "./",                             /* Concatenate and emit output to single file. */
     "outDir": "./dist/esm" /* Redirect output structure to the directory. */,
     "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
-    "composite": true,                           /* Enable project compilation */
+    "composite": true /* Enable project compilation */,
     // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
     // "removeComments": true,                      /* Do not emit comments to output. */
     // "noEmit": true,                              /* Do not emit outputs. */
-    "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
+    "importHelpers": true /* Import emit helpers from 'tslib'. */,
     // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
 
     /* Strict Type-Checking Options */
     "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
-    "strictNullChecks": false,                    /* Enable strict null checks. */
+    "strictNullChecks": false /* Enable strict null checks. */,
     // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
     // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
     // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
@@ -67,7 +67,7 @@
 
     /* Advanced Options */
     "skipLibCheck": true /* Skip type checking of declaration files. */,
-    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
 
     "experimentalDecorators": true,
     "suppressImplicitAnyIndexErrors": true,
@@ -75,13 +75,6 @@
     "strictFunctionTypes": true
   },
   "include": ["./src/*", "./src/**/*"],
-  "exclude": [
-    "**/**.test.tsx",
-    "**/**.test.ts",
-    "**/examples/**",
-    "**/__mocks__/**"
-  ],
-  "plugins": [
-    { "transform": "transformer-cjs-imports" }
-  ]
+  "exclude": ["**/**.test.tsx", "**/**.test.ts", "**/examples/**", "**/__mocks__/**"],
+  "plugins": [{ "transform": "transformer-cjs-imports" }]
 }