From 5181b3f51978b2fe2ab679fd2768967b7bcfb0a6 Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Fri, 8 Apr 2022 11:30:56 +0200
Subject: [PATCH] Replace deprecated SFC type with FunctionComponent

---
 .../components/DescriptionList/DescriptionListGroup.tsx   | 2 +-
 .../react-core/src/components/Drawer/DrawerActions.tsx    | 2 +-
 .../src/components/Drawer/DrawerCloseButton.tsx           | 2 +-
 .../react-core/src/components/Drawer/DrawerContent.tsx    | 2 +-
 .../src/components/Drawer/DrawerContentBody.tsx           | 2 +-
 packages/react-core/src/components/Drawer/DrawerHead.tsx  | 2 +-
 packages/react-core/src/components/Drawer/DrawerMain.tsx  | 2 +-
 .../react-core/src/components/Drawer/DrawerPanelBody.tsx  | 2 +-
 .../react-core/src/components/Drawer/DrawerSection.tsx    | 2 +-
 .../react-core/src/components/Dropdown/BadgeToggle.tsx    | 2 +-
 packages/react-core/src/components/Dropdown/Dropdown.tsx  | 2 +-
 .../react-core/src/components/Dropdown/DropdownItem.tsx   | 2 +-
 .../src/components/Dropdown/DropdownSeparator.tsx         | 2 +-
 .../react-core/src/components/Dropdown/DropdownToggle.tsx | 2 +-
 .../react-core/src/components/Dropdown/KebabToggle.tsx    | 2 +-
 .../src/components/OverflowMenu/OverflowMenuContent.tsx   | 2 +-
 .../src/components/OverflowMenu/OverflowMenuControl.tsx   | 2 +-
 .../components/OverflowMenu/OverflowMenuDropdownItem.tsx  | 2 +-
 .../src/components/OverflowMenu/OverflowMenuGroup.tsx     | 2 +-
 .../src/components/OverflowMenu/OverflowMenuItem.tsx      | 2 +-
 packages/react-core/src/components/Tabs/TabContent.tsx    | 2 +-
 .../src/components/demos/ConsolesDemo/ConsolesDemo.tsx    | 4 ++--
 .../src/components/demos/TopologyDemo/Basics.tsx          | 2 +-
 .../components/demos/TopologyDemo/CollapsibleGroups.tsx   | 2 +-
 .../src/components/demos/TopologyDemo/Connectors.tsx      | 2 +-
 .../src/components/demos/TopologyDemo/Groups.tsx          | 2 +-
 .../src/components/demos/TopologyDemo/Layouts.tsx         | 2 +-
 .../src/components/demos/TopologyDemo/PanZoom.tsx         | 2 +-
 .../src/components/demos/TopologyDemo/Selection.tsx       | 6 +++---
 .../src/components/demos/TopologyDemo/TopologyDemo.tsx    | 2 +-
 .../src/components/demos/TopologyDemo/TopologyPackage.tsx | 5 ++++-
 .../demos/TopologyDemo/components/CustomCircleNode.tsx    | 4 ++--
 .../demos/TopologyDemo/components/CustomPathNode.tsx      | 2 +-
 .../demos/TopologyDemo/components/CustomPolygonNode.tsx   | 2 +-
 .../demos/TopologyDemo/components/CustomRectNode.tsx      | 4 ++--
 .../demos/TopologyDemo/components/DefaultEdge.tsx         | 4 ++--
 .../demos/TopologyDemo/components/DefaultGroup.tsx        | 2 +-
 .../demos/TopologyDemo/components/DemoDefaultNode.tsx     | 4 ++--
 .../demos/TopologyDemo/components/GroupHull.tsx           | 2 +-
 .../demos/TopologyDemo/components/MultiEdge.tsx           | 4 ++--
 .../components/demos/TopologyDemo/components/NodeRect.tsx | 2 +-
 .../demos/TopologyDemo/components/StyleEdge.tsx           | 2 +-
 .../demos/TopologyDemo/components/StyleGroup.tsx          | 4 ++--
 .../demos/TopologyDemo/components/StyleNode.tsx           | 4 ++--
 .../demos/TopologyDemo/components/shapes/Path.tsx         | 2 +-
 .../demos/TopologyDemo/components/shapes/Polygon.tsx      | 2 +-
 .../react-topology/src/behavior/useAddBendpoint.tsx.bak   | 2 +-
 packages/react-topology/src/behavior/useAnchor.tsx        | 2 +-
 packages/react-topology/src/behavior/useBendpoint.tsx     | 2 +-
 packages/react-topology/src/behavior/useDndDrag.tsx       | 2 +-
 packages/react-topology/src/behavior/useDndDrop.tsx       | 2 +-
 packages/react-topology/src/behavior/useDragNode.tsx      | 2 +-
 packages/react-topology/src/behavior/usePanZoom.tsx       | 2 +-
 packages/react-topology/src/behavior/usePolygonAnchor.tsx | 2 +-
 packages/react-topology/src/behavior/useReconnect.tsx     | 4 ++--
 packages/react-topology/src/behavior/useSelection.tsx     | 2 +-
 packages/react-topology/src/behavior/useSvgAnchor.tsx     | 2 +-
 packages/react-topology/src/behavior/withContextMenu.tsx  | 2 +-
 .../react-topology/src/behavior/withCreateConnector.tsx   | 4 ++--
 .../react-topology/src/behavior/withRemoveConnector.tsx   | 2 +-
 .../src/components/ComputeElementDimensions.tsx           | 2 +-
 .../src/components/DefaultCreateConnector.tsx             | 2 +-
 .../src/components/DefaultRemoveConnector.tsx             | 2 +-
 packages/react-topology/src/components/ElementWrapper.tsx | 8 ++++----
 packages/react-topology/src/components/GraphComponent.tsx | 6 +++---
 packages/react-topology/src/components/SVGArrowMarker.tsx | 2 +-
 .../src/components/VisualizationProvider.tsx              | 2 +-
 .../src/components/VisualizationSurface.tsx               | 2 +-
 .../src/components/contextmenu/ContextMenu.tsx            | 7 ++++++-
 .../src/components/contextmenu/ContextSubMenuItem.tsx     | 2 +-
 .../src/components/defs/__mocks__/SVGDefs.tsx             | 2 +-
 .../src/components/edges/DefaultConnectorTag.tsx          | 2 +-
 .../react-topology/src/components/edges/DefaultEdge.tsx   | 2 +-
 .../src/components/edges/terminals/ConnectorArrow.tsx     | 2 +-
 .../src/components/edges/terminals/ConnectorArrowAlt.tsx  | 2 +-
 .../src/components/edges/terminals/ConnectorCircle.tsx    | 2 +-
 .../src/components/edges/terminals/ConnectorCross.tsx     | 2 +-
 .../src/components/edges/terminals/ConnectorSquare.tsx    | 2 +-
 .../edges/terminals/DefaultConnectorTerminal.tsx          | 2 +-
 .../src/components/factories/RegisterComponentFactory.tsx | 2 +-
 .../src/components/factories/RegisterElementFactory.tsx   | 2 +-
 .../src/components/factories/RegisterLayoutFactory.tsx    | 2 +-
 .../react-topology/src/components/groups/DefaultGroup.tsx | 7 ++++++-
 .../src/components/groups/DefaultGroupCollapsed.tsx       | 2 +-
 .../src/components/groups/DefaultGroupExpanded.tsx        | 2 +-
 packages/react-topology/src/components/groups/types.ts    | 2 +-
 packages/react-topology/src/components/layers/Layer.tsx   | 4 ++--
 .../react-topology/src/components/nodes/DefaultNode.tsx   | 4 ++--
 .../react-topology/src/components/nodes/NodeShadows.tsx   | 2 +-
 .../src/components/nodes/labels/NodeLabel.tsx             | 2 +-
 .../src/components/nodes/shapes/Ellipse.tsx               | 2 +-
 .../src/components/nodes/shapes/Hexagon.tsx               | 2 +-
 .../src/components/nodes/shapes/Octagon.tsx               | 2 +-
 .../src/components/nodes/shapes/Rectangle.tsx             | 2 +-
 .../src/components/nodes/shapes/Rhombus.tsx               | 2 +-
 .../src/components/nodes/shapes/SidedShape.tsx            | 2 +-
 .../src/components/nodes/shapes/Stadium.tsx               | 2 +-
 .../src/components/nodes/shapes/Trapezoid.tsx             | 2 +-
 .../src/components/nodes/shapes/shapeUtils.ts             | 2 +-
 packages/react-topology/src/components/popper/Popper.tsx  | 2 +-
 packages/react-topology/src/components/popper/Portal.tsx  | 2 +-
 .../src/components/svg/SvgDropShadowFilter.tsx            | 2 +-
 102 files changed, 134 insertions(+), 121 deletions(-)

diff --git a/packages/react-core/src/components/DescriptionList/DescriptionListGroup.tsx b/packages/react-core/src/components/DescriptionList/DescriptionListGroup.tsx
index ad0062c0d58..0ffeeb194c9 100644
--- a/packages/react-core/src/components/DescriptionList/DescriptionListGroup.tsx
+++ b/packages/react-core/src/components/DescriptionList/DescriptionListGroup.tsx
@@ -9,7 +9,7 @@ export interface DescriptionListGroupProps extends React.HTMLProps<HTMLDivElemen
   className?: string;
 }
 
-export const DescriptionListGroup: React.FC<DescriptionListGroupProps> = ({
+export const DescriptionListGroup: React.FunctionComponent<DescriptionListGroupProps> = ({
   className,
   children,
   ...props
diff --git a/packages/react-core/src/components/Drawer/DrawerActions.tsx b/packages/react-core/src/components/Drawer/DrawerActions.tsx
index 0d1307665d2..6e8f36f7dd4 100644
--- a/packages/react-core/src/components/Drawer/DrawerActions.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerActions.tsx
@@ -9,7 +9,7 @@ export interface DrawerActionsProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
 }
 
-export const DrawerActions: React.SFC<DrawerActionsProps> = ({
+export const DrawerActions: React.FunctionComponent<DrawerActionsProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
diff --git a/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx b/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx
index 333a02d1b6e..9ef2c99818d 100644
--- a/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx
@@ -13,7 +13,7 @@ export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement>
   'aria-label'?: string;
 }
 
-export const DrawerCloseButton: React.SFC<DrawerCloseButtonProps> = ({
+export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   onClose = () => undefined as any,
diff --git a/packages/react-core/src/components/Drawer/DrawerContent.tsx b/packages/react-core/src/components/Drawer/DrawerContent.tsx
index 2dc03578361..b2b51becd67 100644
--- a/packages/react-core/src/components/Drawer/DrawerContent.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerContent.tsx
@@ -15,7 +15,7 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   colorVariant?: DrawerColorVariant | 'light-200' | 'default';
 }
 
-export const DrawerContent: React.SFC<DrawerContentProps> = ({
+export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
diff --git a/packages/react-core/src/components/Drawer/DrawerContentBody.tsx b/packages/react-core/src/components/Drawer/DrawerContentBody.tsx
index 3f87ad59bb9..752164ab9e8 100644
--- a/packages/react-core/src/components/Drawer/DrawerContentBody.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerContentBody.tsx
@@ -11,7 +11,7 @@ export interface DrawerContentBodyProps extends React.HTMLProps<HTMLDivElement>
   hasPadding?: boolean;
 }
 
-export const DrawerContentBody: React.SFC<DrawerContentBodyProps> = ({
+export const DrawerContentBody: React.FunctionComponent<DrawerContentBodyProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
diff --git a/packages/react-core/src/components/Drawer/DrawerHead.tsx b/packages/react-core/src/components/Drawer/DrawerHead.tsx
index 8c67abe95ba..187e6b9d14e 100644
--- a/packages/react-core/src/components/Drawer/DrawerHead.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerHead.tsx
@@ -12,7 +12,7 @@ export interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {
   hasNoPadding?: boolean;
 }
 
-export const DrawerHead: React.SFC<DrawerHeadProps> = ({
+export const DrawerHead: React.FunctionComponent<DrawerHeadProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
diff --git a/packages/react-core/src/components/Drawer/DrawerMain.tsx b/packages/react-core/src/components/Drawer/DrawerMain.tsx
index 50c264e6339..e0a5a1a035f 100644
--- a/packages/react-core/src/components/Drawer/DrawerMain.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerMain.tsx
@@ -9,7 +9,7 @@ export interface DrawerMainProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
 }
 
-export const DrawerMain: React.SFC<DrawerMainProps> = ({
+export const DrawerMain: React.FunctionComponent<DrawerMainProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
diff --git a/packages/react-core/src/components/Drawer/DrawerPanelBody.tsx b/packages/react-core/src/components/Drawer/DrawerPanelBody.tsx
index ce554c9d4de..c3fd0592e5a 100644
--- a/packages/react-core/src/components/Drawer/DrawerPanelBody.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerPanelBody.tsx
@@ -11,7 +11,7 @@ export interface DrawerPanelBodyProps extends React.HTMLProps<HTMLDivElement> {
   hasNoPadding?: boolean;
 }
 
-export const DrawerPanelBody: React.SFC<DrawerPanelBodyProps> = ({
+export const DrawerPanelBody: React.FunctionComponent<DrawerPanelBodyProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
diff --git a/packages/react-core/src/components/Drawer/DrawerSection.tsx b/packages/react-core/src/components/Drawer/DrawerSection.tsx
index 1b248cde577..c94c448e29c 100644
--- a/packages/react-core/src/components/Drawer/DrawerSection.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerSection.tsx
@@ -12,7 +12,7 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   colorVariant?: DrawerColorVariant | 'light-200' | 'default';
 }
 
-export const DrawerSection: React.SFC<DrawerSectionProps> = ({
+export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
diff --git a/packages/react-core/src/components/Dropdown/BadgeToggle.tsx b/packages/react-core/src/components/Dropdown/BadgeToggle.tsx
index 823da6cf89a..7eca89cd795 100644
--- a/packages/react-core/src/components/Dropdown/BadgeToggle.tsx
+++ b/packages/react-core/src/components/Dropdown/BadgeToggle.tsx
@@ -52,7 +52,7 @@ export const BadgeToggle: React.FunctionComponent<BadgeToggleProps> = ({
   bubbleEvent = false,
   onToggle = () => undefined as void,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ...props
 }: BadgeToggleProps) => (
   <Toggle
diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx
index 18efadb8906..47da93af9f3 100644
--- a/packages/react-core/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx
@@ -49,7 +49,7 @@ export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps<HTML
 export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   onSelect,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ouiaId,
   ouiaSafe,
   alignments,
diff --git a/packages/react-core/src/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/components/Dropdown/DropdownItem.tsx
index bed67abb646..c4bad3f50ba 100644
--- a/packages/react-core/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownItem.tsx
@@ -63,7 +63,7 @@ export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
   listItemClassName,
   onClick,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   additionalChild,
   customChild,
   tabIndex = -1,
diff --git a/packages/react-core/src/components/Dropdown/DropdownSeparator.tsx b/packages/react-core/src/components/Dropdown/DropdownSeparator.tsx
index c026a706199..dac507db0ad 100644
--- a/packages/react-core/src/components/Dropdown/DropdownSeparator.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownSeparator.tsx
@@ -14,7 +14,7 @@ export interface SeparatorProps extends React.HTMLProps<HTMLAnchorElement>, OUIA
 export const DropdownSeparator: React.FunctionComponent<SeparatorProps> = ({
   className = '',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ouiaId,
   ouiaSafe,
   ...props
diff --git a/packages/react-core/src/components/Dropdown/DropdownToggle.tsx b/packages/react-core/src/components/Dropdown/DropdownToggle.tsx
index b3f9987c5dc..fc85f6b898f 100644
--- a/packages/react-core/src/components/Dropdown/DropdownToggle.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownToggle.tsx
@@ -75,7 +75,7 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
   ouiaId,
   ouiaSafe,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ...props
 }: DropdownToggleProps) => {
   const ouiaProps = useOUIAProps(DropdownToggle.displayName, ouiaId, ouiaSafe);
diff --git a/packages/react-core/src/components/Dropdown/KebabToggle.tsx b/packages/react-core/src/components/Dropdown/KebabToggle.tsx
index 89a6373a9e0..2ce6531bdfe 100644
--- a/packages/react-core/src/components/Dropdown/KebabToggle.tsx
+++ b/packages/react-core/src/components/Dropdown/KebabToggle.tsx
@@ -47,7 +47,7 @@ export const KebabToggle: React.FunctionComponent<KebabToggleProps> = ({
   bubbleEvent = false,
   onToggle = () => undefined as void,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ...props
 }: KebabToggleProps) => (
   <Toggle
diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuContent.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuContent.tsx
index e8a6f95b736..1ba0df26b20 100644
--- a/packages/react-core/src/components/OverflowMenu/OverflowMenuContent.tsx
+++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuContent.tsx
@@ -12,7 +12,7 @@ export interface OverflowMenuContentProps extends React.HTMLProps<HTMLDivElement
   isPersistent?: boolean;
 }
 
-export const OverflowMenuContent: React.SFC<OverflowMenuContentProps> = ({
+export const OverflowMenuContent: React.FunctionComponent<OverflowMenuContentProps> = ({
   className,
   children,
   isPersistent
diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuControl.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuControl.tsx
index 98fdd09a927..73ecfaf01d0 100644
--- a/packages/react-core/src/components/OverflowMenu/OverflowMenuControl.tsx
+++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuControl.tsx
@@ -12,7 +12,7 @@ export interface OverflowMenuControlProps extends React.HTMLProps<HTMLDivElement
   hasAdditionalOptions?: boolean;
 }
 
-export const OverflowMenuControl: React.SFC<OverflowMenuControlProps> = ({
+export const OverflowMenuControl: React.FunctionComponent<OverflowMenuControlProps> = ({
   className,
   children,
   hasAdditionalOptions,
diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
index f46cb5414f5..d44260b1b3d 100644
--- a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
+++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
@@ -9,7 +9,7 @@ export interface OverflowMenuDropdownItemProps extends DropdownItemProps {
   index?: number;
 }
 
-export const OverflowMenuDropdownItem: React.SFC<OverflowMenuDropdownItemProps> = ({
+export const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropdownItemProps> = ({
   children,
   isShared = false,
   index,
diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuGroup.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuGroup.tsx
index 509ba731892..7ff9188a32a 100644
--- a/packages/react-core/src/components/OverflowMenu/OverflowMenuGroup.tsx
+++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuGroup.tsx
@@ -14,7 +14,7 @@ export interface OverflowMenuGroupProps extends React.HTMLProps<HTMLDivElement>
   groupType?: 'button' | 'icon';
 }
 
-export const OverflowMenuGroup: React.FC<OverflowMenuGroupProps> = ({
+export const OverflowMenuGroup: React.FunctionComponent<OverflowMenuGroupProps> = ({
   className,
   children,
   isPersistent = false,
diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuItem.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuItem.tsx
index ffb02cd5247..8c7f643332a 100644
--- a/packages/react-core/src/components/OverflowMenu/OverflowMenuItem.tsx
+++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuItem.tsx
@@ -12,7 +12,7 @@ export interface OverflowMenuItemProps extends React.HTMLProps<HTMLDivElement> {
   isPersistent?: boolean;
 }
 
-export const OverflowMenuItem: React.SFC<OverflowMenuItemProps> = ({
+export const OverflowMenuItem: React.FunctionComponent<OverflowMenuItemProps> = ({
   className,
   children,
   isPersistent = false
diff --git a/packages/react-core/src/components/Tabs/TabContent.tsx b/packages/react-core/src/components/Tabs/TabContent.tsx
index 18ca06978f8..6aae05c06db 100644
--- a/packages/react-core/src/components/Tabs/TabContent.tsx
+++ b/packages/react-core/src/components/Tabs/TabContent.tsx
@@ -28,7 +28,7 @@ const variantStyle = {
   light300: styles.modifiers.light_300
 };
 
-const TabContentBase: React.FC<TabContentProps> = ({
+const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   id,
   activeKey,
   'aria-label': ariaLabel,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ConsolesDemo/ConsolesDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ConsolesDemo/ConsolesDemo.tsx
index 5b48c1861af..42ddc34ffc5 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ConsolesDemo/ConsolesDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ConsolesDemo/ConsolesDemo.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { AccessConsoles, SerialConsole, DesktopViewer, VncConsole } from '@patternfly/react-console';
 import { debounce } from '@patternfly/react-core';
 
-export const ConsolesDemo: React.FC = () => {
+export const ConsolesDemo: React.FunctionComponent = () => {
   const [status, setStatus] = React.useState('disconnected');
   const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;
   const ref = React.createRef<any>();
@@ -32,7 +32,7 @@ export const ConsolesDemo: React.FC = () => {
 };
 ConsolesDemo.displayName = 'ConsolesDemo';
 
-const SerialConsoleCustom: React.FC<{ type: string; typeText: string }> = () => {
+const SerialConsoleCustom: React.FunctionComponent<{ type: string; typeText: string }> = () => {
   const [status, setStatus] = React.useState('disconnected');
   const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;
   const ref2 = React.createRef<any>();
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Basics.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Basics.tsx
index b40dbcaf504..e78bb33a624 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Basics.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Basics.tsx
@@ -187,7 +187,7 @@ export const MultiEdge = withTopologySetup(() => {
   return null;
 });
 
-const groupStory = (groupType: string): React.FC => () => {
+const groupStory = (groupType: string): React.FunctionComponent => () => {
   useComponentFactory(defaultComponentFactory);
   useModel(
     React.useMemo(
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/CollapsibleGroups.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/CollapsibleGroups.tsx
index 9a946c459e9..efc989cd3ff 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/CollapsibleGroups.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/CollapsibleGroups.tsx
@@ -118,7 +118,7 @@ interface TopologyViewComponentProps {
   vis: Visualization;
 }
 
-const TopologyViewComponent: React.FC<TopologyViewComponentProps> = ({ vis }) => {
+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);
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Connectors.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Connectors.tsx
index fdbff734714..66b729e02f4 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Connectors.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Connectors.tsx
@@ -278,7 +278,7 @@ export const CreateConnector = withTopologySetup(() => {
   return null;
 });
 
-const NodeWithPointAnchor: React.FC<{ element: Node } & WithDragNodeProps> = props => {
+const NodeWithPointAnchor: React.FunctionComponent<{ element: Node } & WithDragNodeProps> = props => {
   const nodeRef = useSvgAnchor();
   const targetRef = useSvgAnchor(AnchorEnd.target, 'edge-point');
   const { width, height } = props.element.getDimensions();
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Groups.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Groups.tsx
index d1161a10d6d..3ca53a6c89f 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Groups.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Groups.tsx
@@ -19,7 +19,7 @@ import DemoDefaultNode from './components/DemoDefaultNode';
 import defaultLayoutFactory from './layouts/defaultLayoutFactory';
 import withTopologySetup from './utils/withTopologySetup';
 
-const GroupWithDecorator: React.FC<{ element: Node } & WithDragNodeProps> = observer(props => {
+const GroupWithDecorator: React.FunctionComponent<{ element: Node } & WithDragNodeProps> = observer(props => {
   const trafficSourceRef = useSvgAnchor(AnchorEnd.source, 'traffic');
   const b = props.element.getBounds();
   return (
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Layouts.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Layouts.tsx
index d91256c9ac4..85b7da39573 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Layouts.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Layouts.tsx
@@ -31,7 +31,7 @@ const getModel = (layout: string): Model => {
   return model;
 };
 
-const layoutStory = (model: Model): React.FC => () => {
+const layoutStory = (model: Model): React.FunctionComponent => () => {
   useLayoutFactory(defaultLayoutFactory);
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PanZoom.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PanZoom.tsx
index bcd97cfd123..f6f16af64cb 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PanZoom.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PanZoom.tsx
@@ -47,7 +47,7 @@ const model: Model = {
   ]
 };
 
-export const PanZoom: React.FC = withTopologySetup(() => {
+export const PanZoom: React.FunctionComponent = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
     React.useCallback<ComponentFactory>(kind => {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Selection.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Selection.tsx
index 5fd3b42ec14..01e1bab80b4 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Selection.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Selection.tsx
@@ -50,7 +50,7 @@ const twoNodeModel: Model = {
   ]
 };
 
-export const UncontrolledSelection: React.FC = withTopologySetup(() => {
+export const UncontrolledSelection: React.FunctionComponent = withTopologySetup(() => {
   useComponentFactory(
     React.useCallback<ComponentFactory>((kind, type) => {
       const widget = defaultComponentFactory(kind, type);
@@ -100,7 +100,7 @@ export const ControlledSelection = withTopologySetup(() => {
   return null;
 });
 
-export const MultiSelect: React.FC = withTopologySetup(() => {
+export const MultiSelect: React.FunctionComponent = withTopologySetup(() => {
   useModel(twoNodeModel);
   useComponentFactory(
     React.useCallback<ComponentFactory>((kind, type) => {
@@ -144,7 +144,7 @@ for (let i = 1; i <= 100; i++) {
   }
 }
 
-export const Performance: React.FC = withTopologySetup(() => {
+export const Performance: React.FunctionComponent = withTopologySetup(() => {
   useModel(perfModel);
   useComponentFactory(
     React.useCallback<ComponentFactory>((kind, type) => {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyDemo.tsx
index aa53ee88c6e..7da19d1e8b8 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyDemo.tsx
@@ -53,7 +53,7 @@ const TOPOLOGY_PACKAGE = 9;
 const COMPLEX_GROUP = 10;
 const COLLAPSIBLE_GROUPS = 11;
 
-export const TopologyDemo: React.FC = () => {
+export const TopologyDemo: React.FunctionComponent = () => {
   const [activeKey, setActiveKey] = React.useState<number>(STYLES);
   const [activeSecondaryKey, setActiveSecondaryKey] = React.useState<number>(0);
   const [activeTertiaryKey, setActiveTertiaryKey] = React.useState<number>(0);
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyPackage.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyPackage.tsx
index d17fefff55c..e89c3a836f6 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyPackage.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyPackage.tsx
@@ -63,7 +63,10 @@ interface TopologyViewComponentProps {
   sideBarResizable?: boolean;
 }
 
-const TopologyViewComponent: React.FC<TopologyViewComponentProps> = ({ useSidebar, sideBarResizable = false }) => {
+const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps> = ({
+  useSidebar,
+  sideBarResizable = false
+}) => {
   const [selectedIds, setSelectedIds] = React.useState<string[]>();
   const [layoutDropdownOpen, setLayoutDropdownOpen] = React.useState(false);
   const [layout, setLayout] = React.useState('ColaNoForce');
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomCircleNode.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomCircleNode.tsx
index fc734b3a237..50818e265d1 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomCircleNode.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomCircleNode.tsx
@@ -27,7 +27,7 @@ type CustomCircleNodeProps = {
   WithCreateConnectorProps &
   WithContextMenuProps;
 
-const CustomCircle: React.FC<ShapeProps> = ({ element, className }) => {
+const CustomCircle: React.FunctionComponent<ShapeProps> = ({ element, className }) => {
   useAnchor(EllipseAnchor);
   React.useEffect(() => {
     // init height
@@ -48,7 +48,7 @@ const CustomCircle: React.FC<ShapeProps> = ({ element, className }) => {
   );
 };
 
-const CustomCircleNode: React.FC<CustomCircleNodeProps> = props => (
+const CustomCircleNode: React.FunctionComponent<CustomCircleNodeProps> = props => (
   <DemoDefaultNode getCustomShape={() => CustomCircle} {...props} />
 );
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomPathNode.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomPathNode.tsx
index 7f2432cf244..a29facce9d8 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomPathNode.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomPathNode.tsx
@@ -23,7 +23,7 @@ type CustomPathNodeProps = {
   WithCreateConnectorProps &
   WithContextMenuProps;
 
-const CustomPathNode: React.FC<CustomPathNodeProps> = props => (
+const CustomPathNode: React.FunctionComponent<CustomPathNodeProps> = props => (
   <DemoDefaultNode getCustomShape={() => Path} {...props} />
 );
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomPolygonNode.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomPolygonNode.tsx
index 79637a9686d..faaea99116a 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomPolygonNode.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomPolygonNode.tsx
@@ -23,7 +23,7 @@ type CustomPolygonNodeProps = {
   WithCreateConnectorProps &
   WithContextMenuProps;
 
-const CustomPolygonNode: React.FC<CustomPolygonNodeProps> = props => (
+const CustomPolygonNode: React.FunctionComponent<CustomPolygonNodeProps> = props => (
   <DemoDefaultNode getCustomShape={() => Polygon} {...props} />
 );
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomRectNode.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomRectNode.tsx
index d49bd918ef0..b5b716b8610 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomRectNode.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomRectNode.tsx
@@ -25,12 +25,12 @@ type CustomRectNodeProps = {
   WithCreateConnectorProps &
   WithContextMenuProps;
 
-const CustomRect: React.FC<ShapeProps> = observer(({ className }) => {
+const CustomRect: React.FunctionComponent<ShapeProps> = observer(({ className }) => {
   useAnchor(RectAnchor);
   return <rect className={className} x={0} y={0} width={100} height={20} />;
 });
 
-const CustomRectNode: React.FC<CustomRectNodeProps> = props => (
+const CustomRectNode: React.FunctionComponent<CustomRectNodeProps> = props => (
   <DemoDefaultNode getCustomShape={() => CustomRect} {...props} />
 );
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DefaultEdge.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DefaultEdge.tsx
index d451e507c53..41373175c94 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DefaultEdge.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DefaultEdge.tsx
@@ -23,7 +23,7 @@ interface BendpointProps {
   point: Point;
 }
 
-const Bendpoint: React.FC<BendpointProps> = observer(({ point }) => {
+const Bendpoint: React.FunctionComponent<BendpointProps> = observer(({ point }) => {
   const [hover, setHover] = React.useState(false);
   const [, ref] = useBendpoint(point);
   return (
@@ -40,7 +40,7 @@ const Bendpoint: React.FC<BendpointProps> = observer(({ point }) => {
   );
 });
 
-const DefaultEdge: React.FC<EdgeProps> = ({
+const DefaultEdge: React.FunctionComponent<EdgeProps> = ({
   element,
   sourceDragRef,
   targetDragRef,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DefaultGroup.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DefaultGroup.tsx
index b1b40832df0..1e3830f2df8 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DefaultGroup.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DefaultGroup.tsx
@@ -23,7 +23,7 @@ type GroupProps = {
   WithDndDragProps &
   WithDndDropProps;
 
-const DefaultGroup: React.FC<GroupProps> = ({
+const DefaultGroup: React.FunctionComponent<GroupProps> = ({
   element,
   children,
   selected,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoDefaultNode.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoDefaultNode.tsx
index b0a2ff3e32b..56d54731f45 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoDefaultNode.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoDefaultNode.tsx
@@ -19,7 +19,7 @@ type DemoDefaultNodeProps = {
   element: Node;
   droppable?: boolean;
   canDrop?: boolean;
-  getCustomShape?: (node: Node) => React.FC<ShapeProps>;
+  getCustomShape?: (node: Node) => React.FunctionComponent<ShapeProps>;
 } & WithSelectionProps &
   WithDragNodeProps &
   WithDndDragProps &
@@ -27,7 +27,7 @@ type DemoDefaultNodeProps = {
   WithCreateConnectorProps &
   WithContextMenuProps;
 
-const DemoDefaultNode: React.FC<DemoDefaultNodeProps> = ({
+const DemoDefaultNode: React.FunctionComponent<DemoDefaultNodeProps> = ({
   element,
   selected,
   onSelect,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/GroupHull.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/GroupHull.tsx
index 5bd1616f2c3..9488b7f3977 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/GroupHull.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/GroupHull.tsx
@@ -31,7 +31,7 @@ type GroupHullProps = {
 
 type PointWithSize = PointTuple | [number, number, number];
 
-const GroupHull: React.FC<GroupHullProps> = ({
+const GroupHull: React.FunctionComponent<GroupHullProps> = ({
   element,
   children,
   selected,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/MultiEdge.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/MultiEdge.tsx
index ecc1fae67f1..0f1ab8b5ec7 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/MultiEdge.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/MultiEdge.tsx
@@ -8,7 +8,7 @@ interface MultiEdgeProps {
 }
 
 // TODO create utiles to support this
-const MultiEdge: React.FC<MultiEdgeProps> = ({ element }) => {
+const MultiEdge: React.FunctionComponent<MultiEdgeProps> = ({ element }) => {
   let idx = 0;
   let sum = 0;
   element
@@ -41,4 +41,4 @@ const MultiEdge: React.FC<MultiEdgeProps> = ({ element }) => {
   return <path strokeWidth={2} stroke="#8d8d8d" d={d} fill="none" />;
 };
 
-export default observer(MultiEdge) as React.FC<MultiEdgeProps>;
+export default observer(MultiEdge) as React.FunctionComponent<MultiEdgeProps>;
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/NodeRect.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/NodeRect.tsx
index 5b8423ba3ca..a1d1808a11f 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/NodeRect.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/NodeRect.tsx
@@ -20,7 +20,7 @@ type NodeRectProps = {
   WithDndDragProps &
   WithDndDropProps;
 
-const NodeRect: React.FC<NodeRectProps> = ({
+const NodeRect: React.FunctionComponent<NodeRectProps> = ({
   element,
   selected,
   onSelect,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleEdge.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleEdge.tsx
index fccf2961a18..b70d5b2292c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleEdge.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleEdge.tsx
@@ -7,7 +7,7 @@ type StyleEdgeProps = {
 } & WithContextMenuProps &
   WithSelectionProps;
 
-const StyleEdge: React.FC<StyleEdgeProps> = ({ element, onContextMenu, contextMenuOpen, ...rest }) => {
+const StyleEdge: React.FunctionComponent<StyleEdgeProps> = ({ element, onContextMenu, contextMenuOpen, ...rest }) => {
   const data = element.getData();
 
   const passedData = React.useMemo(() => {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleGroup.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleGroup.tsx
index 7bb85e63814..1ffa4e3e6d4 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleGroup.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleGroup.tsx
@@ -26,13 +26,13 @@ type StyleGroupProps = {
   collapsedWidth?: number;
   collapsedHeight?: number;
   onCollapseChange?: (group: Node, collapsed: boolean) => void;
-  getCollapsedShape?: (node: Node) => React.FC<ShapeProps>;
+  getCollapsedShape?: (node: Node) => React.FunctionComponent<ShapeProps>;
   collapsedShadowOffset?: number; // defaults to 10
 } & WithContextMenuProps &
   WithDragNodeProps &
   WithSelectionProps;
 
-const StyleGroup: React.FC<StyleGroupProps> = ({
+const StyleGroup: React.FunctionComponent<StyleGroupProps> = ({
   element,
   onContextMenu,
   contextMenuOpen,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleNode.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleNode.tsx
index 138c0b0ed83..c90de69ff67 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleNode.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/StyleNode.tsx
@@ -31,7 +31,7 @@ const ICON_PADDING = 20;
 
 type StyleNodeProps = {
   element: Node;
-  getCustomShape?: (node: Node) => React.FC<ShapeProps>;
+  getCustomShape?: (node: Node) => React.FunctionComponent<ShapeProps>;
   getShapeDecoratorCenter?: (quadrant: TopologyQuadrant, node: Node) => { x: number; y: number };
   showLabel?: boolean; // Defaults to true
   showStatusDecorator?: boolean; // Defaults to false
@@ -112,7 +112,7 @@ const renderDecorators = (
   );
 };
 
-const StyleNode: React.FC<StyleNodeProps> = ({
+const StyleNode: React.FunctionComponent<StyleNodeProps> = ({
   element,
   onContextMenu,
   contextMenuOpen,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/shapes/Path.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/shapes/Path.tsx
index 0151673d0bc..ce9a809fa12 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/shapes/Path.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/shapes/Path.tsx
@@ -1,7 +1,7 @@
 import { ShapeProps, useCombineRefs, useSvgAnchor } from '@patternfly/react-topology';
 import * as React from 'react';
 
-const Path: React.FC<ShapeProps> = ({ className, width, height, filter, dndDropRef }) => {
+const Path: React.FunctionComponent<ShapeProps> = ({ className, width, height, filter, dndDropRef }) => {
   const anchorRef = useSvgAnchor();
   const refs = useCombineRefs<SVGPathElement>(dndDropRef, anchorRef);
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/shapes/Polygon.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/shapes/Polygon.tsx
index 25941957df4..3cc0a10501c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/shapes/Polygon.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/shapes/Polygon.tsx
@@ -1,7 +1,7 @@
 import { PointTuple, ShapeProps, usePolygonAnchor } from '@patternfly/react-topology';
 import * as React from 'react';
 
-const Polygon: React.FC<ShapeProps> = ({ className, width, height, filter, dndDropRef }) => {
+const Polygon: React.FunctionComponent<ShapeProps> = ({ className, width, height, filter, dndDropRef }) => {
   const points: PointTuple[] = React.useMemo(
     () => [
       [width / 2, 0],
diff --git a/packages/react-topology/src/behavior/useAddBendpoint.tsx.bak b/packages/react-topology/src/behavior/useAddBendpoint.tsx.bak
index 6e6da9bb064..4ae510c13a2 100644
--- a/packages/react-topology/src/behavior/useAddBendpoint.tsx.bak
+++ b/packages/react-topology/src/behavior/useAddBendpoint.tsx.bak
@@ -50,7 +50,7 @@ export const WithBendpoint = <DropResult, CollectedProps, Props = {}>(
 ) => <P extends WithBendpointProps & CollectedProps & Props>(
   WrappedComponent: React.ComponentType<P>,
 ) => {
-  const Component: React.FC<Omit<P, keyof WithBendpointProps> & HocProps> = (props) => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithBendpointProps> & HocProps> = (props) => {
     const [dragProps, bendpointRef] = useBendpoint(props.point, spec, props);
     return <WrappedComponent {...props as any} bendpointRef={bendpointRef} {...dragProps} />;
   };
diff --git a/packages/react-topology/src/behavior/useAnchor.tsx b/packages/react-topology/src/behavior/useAnchor.tsx
index d668079f50f..a45ef58dfd1 100644
--- a/packages/react-topology/src/behavior/useAnchor.tsx
+++ b/packages/react-topology/src/behavior/useAnchor.tsx
@@ -28,7 +28,7 @@ export const useAnchor = (
 export const withAnchor = <P extends {} = {}>(anchor: Anchor, end?: AnchorEnd, type?: string) => (
   WrappedComponent: React.ComponentType<P>
 ) => {
-  const Component: React.FC<P> = props => {
+  const Component: React.FunctionComponent<P> = props => {
     useAnchor(
       React.useCallback(() => anchor, []),
       end,
diff --git a/packages/react-topology/src/behavior/useBendpoint.tsx b/packages/react-topology/src/behavior/useBendpoint.tsx
index 9e6999725ea..b634379404d 100644
--- a/packages/react-topology/src/behavior/useBendpoint.tsx
+++ b/packages/react-topology/src/behavior/useBendpoint.tsx
@@ -88,7 +88,7 @@ export const withBendpoint = <DropResult, CollectedProps, Props = {}>(
     'type'
   >
 ) => <P extends WithBendpointProps & CollectedProps & Props>(WrappedComponent: React.ComponentType<P>) => {
-  const Component: React.FC<Omit<P, keyof WithBendpointProps> & HocProps> = props => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithBendpointProps> & HocProps> = props => {
     const [dragProps, bendpointRef] = useBendpoint(props.point, spec as any, props);
     return <WrappedComponent {...(props as any)} bendpointRef={bendpointRef} {...dragProps} />;
   };
diff --git a/packages/react-topology/src/behavior/useDndDrag.tsx b/packages/react-topology/src/behavior/useDndDrag.tsx
index ad600f54032..0d55fcb2aea 100644
--- a/packages/react-topology/src/behavior/useDndDrag.tsx
+++ b/packages/react-topology/src/behavior/useDndDrag.tsx
@@ -314,7 +314,7 @@ export const withDndDrag = <
 >(
   spec: DragSourceSpec<DragObject, DragSpecOperationType<DragOperationWithType>, DropResult, CollectedProps, Props>
 ) => <P extends WithDndDragProps & CollectedProps & Props>(WrappedComponent: React.ComponentType<Partial<P>>) => {
-  const Component: React.FC<Omit<P, keyof WithDndDragProps & CollectedProps>> = props => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithDndDragProps & CollectedProps>> = props => {
     // TODO fix cast to any
     const [dndDragProps, dndDragRef] = useDndDrag(spec, props as any);
     return <WrappedComponent {...(props as any)} {...dndDragProps} dndDragRef={dndDragRef} />;
diff --git a/packages/react-topology/src/behavior/useDndDrop.tsx b/packages/react-topology/src/behavior/useDndDrop.tsx
index 3a62ac2865c..a19ce2b7284 100644
--- a/packages/react-topology/src/behavior/useDndDrop.tsx
+++ b/packages/react-topology/src/behavior/useDndDrop.tsx
@@ -185,7 +185,7 @@ export const withDndDrop = <
 >(
   spec: DropTargetSpec<DragObject, DropResult, CollectedProps, Props>
 ) => <P extends WithDndDropProps & CollectedProps & Props>(WrappedComponent: React.ComponentType<Partial<P>>) => {
-  const Component: React.FC<Omit<P, keyof WithDndDropProps & CollectedProps>> = props => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithDndDropProps & CollectedProps>> = props => {
     // TODO fix cast to any
     const [dndDropProps, dndDropRef] = useDndDrop(spec, props as any);
     return <WrappedComponent {...(props as any)} {...dndDropProps} dndDropRef={dndDropRef} />;
diff --git a/packages/react-topology/src/behavior/useDragNode.tsx b/packages/react-topology/src/behavior/useDragNode.tsx
index 258e18fc09b..9a5208f9b45 100644
--- a/packages/react-topology/src/behavior/useDragNode.tsx
+++ b/packages/react-topology/src/behavior/useDragNode.tsx
@@ -168,7 +168,7 @@ export const withDragNode = <
     item?: DragObject;
   }
 ) => <P extends WithDragNodeProps & CollectedProps & Props>(WrappedComponent: React.ComponentType<P>) => {
-  const Component: React.FC<Omit<P, keyof WithDragNodeProps>> = props => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithDragNodeProps>> = props => {
     // TODO fix cast to any
     const [dragNodeProps, dragNodeRef] = useDragNode(spec, props as any);
     return <WrappedComponent {...(props as any)} dragNodeRef={dragNodeRef} {...dragNodeProps} />;
diff --git a/packages/react-topology/src/behavior/usePanZoom.tsx b/packages/react-topology/src/behavior/usePanZoom.tsx
index e8754411c16..710c8b1594f 100644
--- a/packages/react-topology/src/behavior/usePanZoom.tsx
+++ b/packages/react-topology/src/behavior/usePanZoom.tsx
@@ -110,7 +110,7 @@ export interface WithPanZoomProps {
 }
 
 export const withPanZoom = () => <P extends WithPanZoomProps>(WrappedComponent: React.ComponentType<P>) => {
-  const Component: React.FC<Omit<P, keyof WithPanZoomProps>> = props => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithPanZoomProps>> = props => {
     const panZoomRef = usePanZoom();
     return <WrappedComponent {...(props as any)} panZoomRef={panZoomRef} />;
   };
diff --git a/packages/react-topology/src/behavior/usePolygonAnchor.tsx b/packages/react-topology/src/behavior/usePolygonAnchor.tsx
index 526bd4ab114..5b11e412179 100644
--- a/packages/react-topology/src/behavior/usePolygonAnchor.tsx
+++ b/packages/react-topology/src/behavior/usePolygonAnchor.tsx
@@ -31,7 +31,7 @@ export const withPolygonAnchor = <P extends {} = {}>(
   type?: string
 ) => (WrappedComponent: React.ComponentType<P>) => {
   const element = React.useContext(ElementContext);
-  const Component: React.FC<P> = props => {
+  const Component: React.FunctionComponent<P> = props => {
     usePolygonAnchor(getPoints(element as Node), end, type);
     return <WrappedComponent {...props} />;
   };
diff --git a/packages/react-topology/src/behavior/useReconnect.tsx b/packages/react-topology/src/behavior/useReconnect.tsx
index c0bee661a44..1a6d1f1779e 100644
--- a/packages/react-topology/src/behavior/useReconnect.tsx
+++ b/packages/react-topology/src/behavior/useReconnect.tsx
@@ -21,7 +21,7 @@ export const withSourceDrag = <
 >(
   spec: DragSourceSpec<DragObject, DragSpecOperationType<DragOperationWithType>, DropResult, CollectedProps, Props>
 ) => <P extends WithSourceDragProps & CollectedProps & Props>(WrappedComponent: React.ComponentType<P>) => {
-  const Component: React.FC<Omit<P, keyof WithSourceDragProps & CollectedProps>> = props => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithSourceDragProps & CollectedProps>> = props => {
     // TODO fix cast to any
     const [dndDragProps, dndDragRef] = useDndDrag(spec, props as any);
     return <WrappedComponent {...(props as any)} sourceDragRef={dndDragRef} {...dndDragProps} />;
@@ -42,7 +42,7 @@ export const withTargetDrag = <
 >(
   spec: DragSourceSpec<DragObject, DragSpecOperationType<DragOperationWithType>, DropResult, CollectedProps, Props>
 ) => <P extends WithSourceDragProps & CollectedProps & Props>(WrappedComponent: React.ComponentType<P>) => {
-  const Component: React.FC<Omit<P, keyof WithSourceDragProps & CollectedProps>> = props => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithSourceDragProps & CollectedProps>> = props => {
     // TODO fix cast to any
     const [dndDragProps, dndDragRef] = useDndDrag(spec, props as any);
     return <WrappedComponent {...(props as any)} targetDragRef={dndDragRef} {...dndDragProps} />;
diff --git a/packages/react-topology/src/behavior/useSelection.tsx b/packages/react-topology/src/behavior/useSelection.tsx
index 4476285c23d..359583865cb 100644
--- a/packages/react-topology/src/behavior/useSelection.tsx
+++ b/packages/react-topology/src/behavior/useSelection.tsx
@@ -83,7 +83,7 @@ export interface WithSelectionProps {
 export const withSelection = (options?: Options) => <P extends WithSelectionProps>(
   WrappedComponent: React.ComponentType<Partial<P>>
 ) => {
-  const Component: React.FC<Omit<P, keyof WithSelectionProps>> = props => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithSelectionProps>> = props => {
     const [selected, onSelect] = useSelection(options);
     return <WrappedComponent {...(props as any)} selected={selected} onSelect={onSelect} />;
   };
diff --git a/packages/react-topology/src/behavior/useSvgAnchor.tsx b/packages/react-topology/src/behavior/useSvgAnchor.tsx
index e0bca2a01a7..ef3f01ad0ad 100644
--- a/packages/react-topology/src/behavior/useSvgAnchor.tsx
+++ b/packages/react-topology/src/behavior/useSvgAnchor.tsx
@@ -36,7 +36,7 @@ export interface WithSvgAnchorProps {
 export const withSvgAnchor = (end?: AnchorEnd, type?: string) => <P extends WithSvgAnchorProps>() => (
   WrappedComponent: React.ComponentType<P>
 ) => {
-  const Component: React.FC<Omit<P, keyof WithSvgAnchorProps>> = props => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithSvgAnchorProps>> = props => {
     const svgAnchorRef = useSvgAnchor(end, type);
     return <WrappedComponent {...(props as any)} svgAnchorRef={svgAnchorRef} />;
   };
diff --git a/packages/react-topology/src/behavior/withContextMenu.tsx b/packages/react-topology/src/behavior/withContextMenu.tsx
index 418594cb498..7bc552d446d 100644
--- a/packages/react-topology/src/behavior/withContextMenu.tsx
+++ b/packages/react-topology/src/behavior/withContextMenu.tsx
@@ -17,7 +17,7 @@ export const withContextMenu = <E extends TopologyElement>(
   className?: string,
   atPoint: boolean = true
 ) => <P extends WithContextMenuProps>(WrappedComponent: React.ComponentType<Partial<P>>) => {
-  const Component: React.FC<Omit<P, keyof WithContextMenuProps>> = props => {
+  const Component: React.FunctionComponent<Omit<P, keyof WithContextMenuProps>> = props => {
     const element = React.useContext(ElementContext);
     const [reference, setReference] = React.useState<Reference | null>(null);
     const onContextMenu = React.useCallback((e: React.MouseEvent) => {
diff --git a/packages/react-topology/src/behavior/withCreateConnector.tsx b/packages/react-topology/src/behavior/withCreateConnector.tsx
index 4032ba08a7f..c012a65bb60 100644
--- a/packages/react-topology/src/behavior/withCreateConnector.tsx
+++ b/packages/react-topology/src/behavior/withCreateConnector.tsx
@@ -82,7 +82,7 @@ const DEFAULT_HANDLE_ANGLE = Math.PI / 180;
 const DEFAULT_HANDLE_ANGLE_TOP = 1.5 * Math.PI;
 const DEFAULT_HANDLE_LENGTH = 32;
 
-const CreateConnectorWidget: React.FC<CreateConnectorWidgetProps> = observer(props => {
+const CreateConnectorWidget: React.FunctionComponent<CreateConnectorWidgetProps> = observer(props => {
   const {
     element,
     onKeepAlive,
@@ -247,7 +247,7 @@ export const withCreateConnector = <P extends WithCreateConnectorProps & Element
   contextMenuClass?: string,
   options?: CreateConnectorOptions
 ) => (WrappedComponent: React.ComponentType<Partial<P>>) => {
-  const Component: React.FC<Omit<P, keyof WithCreateConnectorProps>> = props => {
+  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), []);
diff --git a/packages/react-topology/src/behavior/withRemoveConnector.tsx b/packages/react-topology/src/behavior/withRemoveConnector.tsx
index 524d40262da..cf8975b5bc2 100644
--- a/packages/react-topology/src/behavior/withRemoveConnector.tsx
+++ b/packages/react-topology/src/behavior/withRemoveConnector.tsx
@@ -28,7 +28,7 @@ export const withRemoveConnector = <P extends WithRemoveConnectorProps & Element
   onRemove: (edge: Edge) => void,
   renderRemove: RemoveRenderer = defaultRenderRemove
 ) => (WrappedComponent: React.ComponentType<P>) => {
-  const Component: React.FC<Omit<P, keyof WithRemoveConnectorProps>> = props => {
+  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), []);
diff --git a/packages/react-topology/src/components/ComputeElementDimensions.tsx b/packages/react-topology/src/components/ComputeElementDimensions.tsx
index 641bf839634..72661f02e55 100644
--- a/packages/react-topology/src/components/ComputeElementDimensions.tsx
+++ b/packages/react-topology/src/components/ComputeElementDimensions.tsx
@@ -8,7 +8,7 @@ interface ComputeElementDimensionsProps {
   element: Node;
 }
 
-const ComputeElementDimensions: React.FC<ComputeElementDimensionsProps> = ({ element, children }) => {
+const ComputeElementDimensions: React.FunctionComponent<ComputeElementDimensionsProps> = ({ element, children }) => {
   const gRef = React.useRef<SVGGElement>(null);
   React.useEffect(() => {
     if (gRef.current && !element.isDimensionsInitialized()) {
diff --git a/packages/react-topology/src/components/DefaultCreateConnector.tsx b/packages/react-topology/src/components/DefaultCreateConnector.tsx
index 7128762a62c..9170e7718da 100644
--- a/packages/react-topology/src/components/DefaultCreateConnector.tsx
+++ b/packages/react-topology/src/components/DefaultCreateConnector.tsx
@@ -18,7 +18,7 @@ interface DefaultCreateConnectorProps {
   tipContents?: React.ReactNode;
 }
 
-const DefaultCreateConnector: React.FC<DefaultCreateConnectorProps> = ({
+const DefaultCreateConnector: React.FunctionComponent<DefaultCreateConnectorProps> = ({
   startPoint,
   endPoint,
   hints,
diff --git a/packages/react-topology/src/components/DefaultRemoveConnector.tsx b/packages/react-topology/src/components/DefaultRemoveConnector.tsx
index f048198c5f5..53e0af292ad 100644
--- a/packages/react-topology/src/components/DefaultRemoveConnector.tsx
+++ b/packages/react-topology/src/components/DefaultRemoveConnector.tsx
@@ -25,7 +25,7 @@ function computeTooltipPosition(startPoint: Point, endPoint: Point): TooltipPosi
   return TooltipPosition.top;
 }
 
-const DefaultRemoveConnector: React.FC<DefaultRemoveConnectorProps> = ({
+const DefaultRemoveConnector: React.FunctionComponent<DefaultRemoveConnectorProps> = ({
   startPoint,
   endPoint,
   onRemove,
diff --git a/packages/react-topology/src/components/ElementWrapper.tsx b/packages/react-topology/src/components/ElementWrapper.tsx
index 43c51e20050..4db5168e3ee 100644
--- a/packages/react-topology/src/components/ElementWrapper.tsx
+++ b/packages/react-topology/src/components/ElementWrapper.tsx
@@ -11,7 +11,7 @@ interface ElementWrapperProps {
   element: GraphElement;
 }
 
-const NodeElementComponent: React.FC<{ element: Node }> = observer(({ element }) => {
+const NodeElementComponent: React.FunctionComponent<{ element: Node }> = observer(({ element }) => {
   const dndManager = useDndManager();
   const isDragging = dndManager.isDragging();
   const dragItem = dndManager.getItem();
@@ -24,7 +24,7 @@ const NodeElementComponent: React.FC<{ element: Node }> = observer(({ element })
 });
 
 // in a separate component so that changes to behaviors do not re-render children
-const ElementComponent: React.FC<ElementWrapperProps> = observer(({ element }) => {
+const ElementComponent: React.FunctionComponent<ElementWrapperProps> = observer(({ element }) => {
   const kind = element.getKind();
   const type = element.getType();
   const controller = element.getController();
@@ -38,7 +38,7 @@ const ElementComponent: React.FC<ElementWrapperProps> = observer(({ element }) =
   );
 });
 
-const ElementChildren: React.FC<ElementWrapperProps> = observer(({ element }) => (
+const ElementChildren: React.FunctionComponent<ElementWrapperProps> = observer(({ element }) => (
   <>
     {element
       .getChildren()
@@ -55,7 +55,7 @@ const ElementChildren: React.FC<ElementWrapperProps> = observer(({ element }) =>
   </>
 ));
 
-const ElementWrapper: React.FC<ElementWrapperProps> = observer(({ element }) => {
+const ElementWrapper: React.FunctionComponent<ElementWrapperProps> = observer(({ element }) => {
   if (!element.isVisible()) {
     if (!isNode(element) || element.isDimensionsInitialized()) {
       return null;
diff --git a/packages/react-topology/src/components/GraphComponent.tsx b/packages/react-topology/src/components/GraphComponent.tsx
index 89e7eb7ce1a..e19175946e7 100644
--- a/packages/react-topology/src/components/GraphComponent.tsx
+++ b/packages/react-topology/src/components/GraphComponent.tsx
@@ -19,7 +19,7 @@ type GraphComponentProps = ElementProps &
   WithContextMenuProps;
 
 // This inner Component will prevent the re-rendering of all children when the transform changes
-const ElementChildren: React.FC<ElementProps> = observer(({ element }) => (
+const ElementChildren: React.FunctionComponent<ElementProps> = observer(({ element }) => (
   <>
     {element.getEdges().map(e => (
       <ElementWrapper key={e.getId()} element={e} />
@@ -31,7 +31,7 @@ const ElementChildren: React.FC<ElementProps> = observer(({ element }) => (
 ));
 
 // This inner Component will prevent re-rendering layers when the transform changes
-const Inner: React.FC<ElementProps> = React.memo(
+const Inner: React.FunctionComponent<ElementProps> = React.memo(
   observer(({ element }) => (
     <LayersProvider layers={element.getLayers()}>
       <ElementChildren element={element} />
@@ -39,7 +39,7 @@ const Inner: React.FC<ElementProps> = React.memo(
   ))
 );
 
-const GraphComponent: React.FC<GraphComponentProps> = ({
+const GraphComponent: React.FunctionComponent<GraphComponentProps> = ({
   element,
   panZoomRef,
   dndDropRef,
diff --git a/packages/react-topology/src/components/SVGArrowMarker.tsx b/packages/react-topology/src/components/SVGArrowMarker.tsx
index bfb5eaf135d..dbd82d94cce 100644
--- a/packages/react-topology/src/components/SVGArrowMarker.tsx
+++ b/packages/react-topology/src/components/SVGArrowMarker.tsx
@@ -15,7 +15,7 @@ interface SVGArrowMarkerProps {
   className?: string;
 }
 
-const SVGArrowMarker: React.FC<SVGArrowMarkerProps> = ({ id, nodeSize, markerSize, className }) => (
+const SVGArrowMarker: React.FunctionComponent<SVGArrowMarkerProps> = ({ id, nodeSize, markerSize, className }) => (
   <SVGDefs id={id}>
     <marker
       id={id}
diff --git a/packages/react-topology/src/components/VisualizationProvider.tsx b/packages/react-topology/src/components/VisualizationProvider.tsx
index 84d53ab5bf8..d339570e4a9 100644
--- a/packages/react-topology/src/components/VisualizationProvider.tsx
+++ b/packages/react-topology/src/components/VisualizationProvider.tsx
@@ -8,7 +8,7 @@ interface VisualizationSurfaceProps {
   children?: React.ReactNode;
 }
 
-const VisualizationProvider: React.FC<VisualizationSurfaceProps> = ({ controller, children }) => {
+const VisualizationProvider: React.FunctionComponent<VisualizationSurfaceProps> = ({ controller, children }) => {
   const controllerRef = React.useRef<Controller>();
   if (controller && controllerRef.current !== controller) {
     controllerRef.current = controller;
diff --git a/packages/react-topology/src/components/VisualizationSurface.tsx b/packages/react-topology/src/components/VisualizationSurface.tsx
index d2a586f83b5..968e4cd7dd1 100644
--- a/packages/react-topology/src/components/VisualizationSurface.tsx
+++ b/packages/react-topology/src/components/VisualizationSurface.tsx
@@ -25,7 +25,7 @@ const stopEvent = (e: React.MouseEvent): void => {
   e.stopPropagation();
 };
 
-const VisualizationSurface: React.FC<VisualizationSurfaceProps> = ({ state }) => {
+const VisualizationSurface: React.FunctionComponent<VisualizationSurfaceProps> = ({ state }) => {
   const controller = useVisualizationController();
 
   React.useEffect(() => {
diff --git a/packages/react-topology/src/components/contextmenu/ContextMenu.tsx b/packages/react-topology/src/components/contextmenu/ContextMenu.tsx
index 51b7d1e8df3..b67717ea4e3 100644
--- a/packages/react-topology/src/components/contextmenu/ContextMenu.tsx
+++ b/packages/react-topology/src/components/contextmenu/ContextMenu.tsx
@@ -11,7 +11,12 @@ type ContextMenuProps = Pick<
   'container' | 'className' | 'open' | 'reference' | 'onRequestClose'
 >;
 
-const ContextMenu: React.FC<ContextMenuProps> = ({ children, open = true, onRequestClose, ...other }) => {
+const ContextMenu: React.FunctionComponent<ContextMenuProps> = ({
+  children,
+  open = true,
+  onRequestClose,
+  ...other
+}) => {
   const [isOpen, setOpen] = React.useState(!!open);
   React.useEffect(() => {
     setOpen(open);
diff --git a/packages/react-topology/src/components/contextmenu/ContextSubMenuItem.tsx b/packages/react-topology/src/components/contextmenu/ContextSubMenuItem.tsx
index 511cbe1e683..3aae8f8300b 100644
--- a/packages/react-topology/src/components/contextmenu/ContextSubMenuItem.tsx
+++ b/packages/react-topology/src/components/contextmenu/ContextSubMenuItem.tsx
@@ -11,7 +11,7 @@ interface ContextSubMenuItemProps {
   children: React.ReactNode[];
 }
 
-const ContextSubMenuItem: React.FC<ContextSubMenuItemProps> = ({ label, children, ...other }) => {
+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);
diff --git a/packages/react-topology/src/components/defs/__mocks__/SVGDefs.tsx b/packages/react-topology/src/components/defs/__mocks__/SVGDefs.tsx
index 7ba01e75d62..13621d7a576 100644
--- a/packages/react-topology/src/components/defs/__mocks__/SVGDefs.tsx
+++ b/packages/react-topology/src/components/defs/__mocks__/SVGDefs.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import SVGDefs from '../SVGDefs';
 
 // This mock simply renders the `defs` in place.
-const SvgDefsMock: React.FC<React.ComponentProps<typeof SVGDefs>> = ({ id, children }) => (
+const SvgDefsMock: React.FunctionComponent<React.ComponentProps<typeof SVGDefs>> = ({ id, children }) => (
   <defs id={id}>{children}</defs>
 );
 
diff --git a/packages/react-topology/src/components/edges/DefaultConnectorTag.tsx b/packages/react-topology/src/components/edges/DefaultConnectorTag.tsx
index 9074b658f3e..fb1f3b9c8c0 100644
--- a/packages/react-topology/src/components/edges/DefaultConnectorTag.tsx
+++ b/packages/react-topology/src/components/edges/DefaultConnectorTag.tsx
@@ -15,7 +15,7 @@ interface DefaultConnectorTagProps {
   paddingY?: number;
 }
 
-const DefaultConnectorTag: React.FC<DefaultConnectorTagProps> = ({
+const DefaultConnectorTag: React.FunctionComponent<DefaultConnectorTagProps> = ({
   className,
   startPoint,
   endPoint,
diff --git a/packages/react-topology/src/components/edges/DefaultEdge.tsx b/packages/react-topology/src/components/edges/DefaultEdge.tsx
index eff856f8411..6b91e2a176e 100644
--- a/packages/react-topology/src/components/edges/DefaultEdge.tsx
+++ b/packages/react-topology/src/components/edges/DefaultEdge.tsx
@@ -40,7 +40,7 @@ type BaseEdgeProps = {
   WithRemoveConnectorProps & WithSourceDragProps & WithTargetDragProps & WithSelectionProps & WithContextMenuProps
 >;
 
-const BaseEdge: React.FC<BaseEdgeProps> = ({
+const BaseEdge: React.FunctionComponent<BaseEdgeProps> = ({
   element,
   dragging,
   sourceDragRef,
diff --git a/packages/react-topology/src/components/edges/terminals/ConnectorArrow.tsx b/packages/react-topology/src/components/edges/terminals/ConnectorArrow.tsx
index 8ed01db5f22..56875b73ec2 100644
--- a/packages/react-topology/src/components/edges/terminals/ConnectorArrow.tsx
+++ b/packages/react-topology/src/components/edges/terminals/ConnectorArrow.tsx
@@ -18,7 +18,7 @@ interface ConnectorArrowProps {
 const pointsStringFromPoints = (points: [number, number][]): string =>
   _.reduce(points, (result: string, nextPoint: [number, number]) => `${result} ${nextPoint[0]},${nextPoint[1]}`, '');
 
-const ConnectorArrow: React.FC<ConnectorArrowProps> = ({
+const ConnectorArrow: React.FunctionComponent<ConnectorArrowProps> = ({
   startPoint,
   endPoint,
   className = '',
diff --git a/packages/react-topology/src/components/edges/terminals/ConnectorArrowAlt.tsx b/packages/react-topology/src/components/edges/terminals/ConnectorArrowAlt.tsx
index 2a4f6f9762a..efa6f013744 100644
--- a/packages/react-topology/src/components/edges/terminals/ConnectorArrowAlt.tsx
+++ b/packages/react-topology/src/components/edges/terminals/ConnectorArrowAlt.tsx
@@ -14,7 +14,7 @@ interface ConnectorArrowAltProps {
   dragRef?: ConnectDragSource;
 }
 
-const ConnectorArrowAlt: React.FC<ConnectorArrowAltProps> = ({
+const ConnectorArrowAlt: React.FunctionComponent<ConnectorArrowAltProps> = ({
   startPoint,
   endPoint,
   className = '',
diff --git a/packages/react-topology/src/components/edges/terminals/ConnectorCircle.tsx b/packages/react-topology/src/components/edges/terminals/ConnectorCircle.tsx
index eaf940dba0c..460a3065b56 100644
--- a/packages/react-topology/src/components/edges/terminals/ConnectorCircle.tsx
+++ b/packages/react-topology/src/components/edges/terminals/ConnectorCircle.tsx
@@ -14,7 +14,7 @@ interface ConnectorCircleProps {
   dragRef?: ConnectDragSource;
 }
 
-const ConnectorCircle: React.FC<ConnectorCircleProps> = ({
+const ConnectorCircle: React.FunctionComponent<ConnectorCircleProps> = ({
   startPoint,
   endPoint,
   className = '',
diff --git a/packages/react-topology/src/components/edges/terminals/ConnectorCross.tsx b/packages/react-topology/src/components/edges/terminals/ConnectorCross.tsx
index 02c17b40b31..e0127f75333 100644
--- a/packages/react-topology/src/components/edges/terminals/ConnectorCross.tsx
+++ b/packages/react-topology/src/components/edges/terminals/ConnectorCross.tsx
@@ -14,7 +14,7 @@ interface ConnectorCrossProps {
   dragRef?: ConnectDragSource;
 }
 
-const ConnectorCross: React.FC<ConnectorCrossProps> = ({
+const ConnectorCross: React.FunctionComponent<ConnectorCrossProps> = ({
   startPoint,
   endPoint,
   className = '',
diff --git a/packages/react-topology/src/components/edges/terminals/ConnectorSquare.tsx b/packages/react-topology/src/components/edges/terminals/ConnectorSquare.tsx
index e8621552eee..8ce4be97b56 100644
--- a/packages/react-topology/src/components/edges/terminals/ConnectorSquare.tsx
+++ b/packages/react-topology/src/components/edges/terminals/ConnectorSquare.tsx
@@ -14,7 +14,7 @@ interface ConnectorSquareProps {
   dragRef?: ConnectDragSource;
 }
 
-const ConnectorSquare: React.FC<ConnectorSquareProps> = ({
+const ConnectorSquare: React.FunctionComponent<ConnectorSquareProps> = ({
   startPoint,
   endPoint,
   className = '',
diff --git a/packages/react-topology/src/components/edges/terminals/DefaultConnectorTerminal.tsx b/packages/react-topology/src/components/edges/terminals/DefaultConnectorTerminal.tsx
index fda811c2919..ac7acb7e449 100644
--- a/packages/react-topology/src/components/edges/terminals/DefaultConnectorTerminal.tsx
+++ b/packages/react-topology/src/components/edges/terminals/DefaultConnectorTerminal.tsx
@@ -23,7 +23,7 @@ interface EdgeConnectorArrowProps {
   dragRef?: ConnectDragSource;
 }
 
-const DefaultConnectorTerminal: React.FC<EdgeConnectorArrowProps> = ({
+const DefaultConnectorTerminal: React.FunctionComponent<EdgeConnectorArrowProps> = ({
   className,
   edge,
   isTarget = true,
diff --git a/packages/react-topology/src/components/factories/RegisterComponentFactory.tsx b/packages/react-topology/src/components/factories/RegisterComponentFactory.tsx
index 2d308ca0180..e5f4535b05f 100644
--- a/packages/react-topology/src/components/factories/RegisterComponentFactory.tsx
+++ b/packages/react-topology/src/components/factories/RegisterComponentFactory.tsx
@@ -6,7 +6,7 @@ interface Props {
   factory: ComponentFactory;
 }
 
-const RegisterComponentFactory: React.FC<Props> = ({ factory }) => {
+const RegisterComponentFactory: React.FunctionComponent<Props> = ({ factory }) => {
   useComponentFactory(factory);
   return null;
 };
diff --git a/packages/react-topology/src/components/factories/RegisterElementFactory.tsx b/packages/react-topology/src/components/factories/RegisterElementFactory.tsx
index 38d8fba0a4c..aa95807a2b1 100644
--- a/packages/react-topology/src/components/factories/RegisterElementFactory.tsx
+++ b/packages/react-topology/src/components/factories/RegisterElementFactory.tsx
@@ -6,7 +6,7 @@ interface Props {
   factory: ElementFactory;
 }
 
-const RegisteElementFactory: React.FC<Props> = ({ factory }) => {
+const RegisteElementFactory: React.FunctionComponent<Props> = ({ factory }) => {
   useElementFactory(factory);
   return null;
 };
diff --git a/packages/react-topology/src/components/factories/RegisterLayoutFactory.tsx b/packages/react-topology/src/components/factories/RegisterLayoutFactory.tsx
index 846c41469cf..8f4043f473c 100644
--- a/packages/react-topology/src/components/factories/RegisterLayoutFactory.tsx
+++ b/packages/react-topology/src/components/factories/RegisterLayoutFactory.tsx
@@ -6,7 +6,7 @@ interface Props {
   factory: LayoutFactory;
 }
 
-const RegisterLayoutFactory: React.FC<Props> = ({ factory }) => {
+const RegisterLayoutFactory: React.FunctionComponent<Props> = ({ factory }) => {
   useLayoutFactory(factory);
   return null;
 };
diff --git a/packages/react-topology/src/components/groups/DefaultGroup.tsx b/packages/react-topology/src/components/groups/DefaultGroup.tsx
index 6e484d5a11d..efd0bf82504 100644
--- a/packages/react-topology/src/components/groups/DefaultGroup.tsx
+++ b/packages/react-topology/src/components/groups/DefaultGroup.tsx
@@ -31,7 +31,12 @@ type DefaultGroupProps = {
   badgeLocation?: BadgeLocation;
 } & Partial<CollapsibleGroupProps & WithSelectionProps & WithDndDropProps & WithDragNodeProps & WithContextMenuProps>;
 
-const DefaultGroup: React.FC<DefaultGroupProps> = ({ className, element, onCollapseChange, ...rest }) => {
+const DefaultGroup: React.FunctionComponent<DefaultGroupProps> = ({
+  className,
+  element,
+  onCollapseChange,
+  ...rest
+}) => {
   const handleCollapse = (group: Node, collapsed: boolean): void => {
     if (collapsed && rest.collapsedWidth !== undefined && rest.collapsedHeight !== undefined) {
       group.setBounds(group.getBounds().setSize(rest.collapsedWidth, rest.collapsedHeight));
diff --git a/packages/react-topology/src/components/groups/DefaultGroupCollapsed.tsx b/packages/react-topology/src/components/groups/DefaultGroupCollapsed.tsx
index b5864e5e766..a397a624fdf 100644
--- a/packages/react-topology/src/components/groups/DefaultGroupCollapsed.tsx
+++ b/packages/react-topology/src/components/groups/DefaultGroupCollapsed.tsx
@@ -44,7 +44,7 @@ type DefaultGroupCollapsedProps = {
   badgeLocation?: BadgeLocation;
 } & Partial<CollapsibleGroupProps & WithDragNodeProps & WithSelectionProps & WithDndDropProps & WithContextMenuProps>;
 
-const DefaultGroupCollapsed: React.FC<DefaultGroupCollapsedProps> = ({
+const DefaultGroupCollapsed: React.FunctionComponent<DefaultGroupCollapsedProps> = ({
   className,
   element,
   collapsible,
diff --git a/packages/react-topology/src/components/groups/DefaultGroupExpanded.tsx b/packages/react-topology/src/components/groups/DefaultGroupExpanded.tsx
index 13a5a42ef03..0127f7bd465 100644
--- a/packages/react-topology/src/components/groups/DefaultGroupExpanded.tsx
+++ b/packages/react-topology/src/components/groups/DefaultGroupExpanded.tsx
@@ -68,7 +68,7 @@ export function computeLabelLocation(points: PointWithSize[]): PointWithSize {
   ];
 }
 
-const DefaultGroupExpanded: React.FC<DefaultGroupExpandedProps> = ({
+const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> = ({
   className,
   element,
   collapsible,
diff --git a/packages/react-topology/src/components/groups/types.ts b/packages/react-topology/src/components/groups/types.ts
index 7d40a645eae..ed088eb39c4 100644
--- a/packages/react-topology/src/components/groups/types.ts
+++ b/packages/react-topology/src/components/groups/types.ts
@@ -7,6 +7,6 @@ export interface CollapsibleGroupProps {
   collapsedWidth?: number;
   collapsedHeight?: number;
   onCollapseChange?: (group: Node, collapsed: boolean) => void;
-  getCollapsedShape?: (node: Node) => React.FC<ShapeProps>;
+  getCollapsedShape?: (node: Node) => React.FunctionComponent<ShapeProps>;
   collapsedShadowOffset?: number; // defaults to 10
 }
diff --git a/packages/react-topology/src/components/layers/Layer.tsx b/packages/react-topology/src/components/layers/Layer.tsx
index 0ffc0c3a468..810f9840bb1 100644
--- a/packages/react-topology/src/components/layers/Layer.tsx
+++ b/packages/react-topology/src/components/layers/Layer.tsx
@@ -38,7 +38,7 @@ const compare = (a: ChildNode, b: ChildNode): number => {
   return ao.length === bo.length ? 0 : ao.length - bo.length;
 };
 
-const LayerDelegate: React.FC<LayerDelegateProps> = observer(({ id, children, orderKey }) => {
+const LayerDelegate: React.FunctionComponent<LayerDelegateProps> = observer(({ id, children, orderKey }) => {
   const getLayerNode = React.useContext(LayersContext);
   const layerNode = getLayerNode(id);
 
@@ -76,7 +76,7 @@ const LayerDelegate: React.FC<LayerDelegateProps> = observer(({ id, children, or
   return createPortal(<LayerContainer ref={nodeRef}>{children}</LayerContainer>, layerNode);
 });
 
-const Layer: React.FC<LayerProps> = ({ id, children, orderKey }) =>
+const Layer: React.FunctionComponent<LayerProps> = ({ id, children, orderKey }) =>
   id ? (
     <LayerDelegate id={id} orderKey={orderKey}>
       {children}
diff --git a/packages/react-topology/src/components/nodes/DefaultNode.tsx b/packages/react-topology/src/components/nodes/DefaultNode.tsx
index 3ee8aaf427a..3ee596ddea3 100644
--- a/packages/react-topology/src/components/nodes/DefaultNode.tsx
+++ b/packages/react-topology/src/components/nodes/DefaultNode.tsx
@@ -64,7 +64,7 @@ type DefaultNodeProps = {
   showStatusDecorator?: boolean;
   statusDecoratorTooltip?: React.ReactNode;
   onStatusDecoratorClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>, element: GraphElement) => void;
-  getCustomShape?: (node: Node) => React.FC<ShapeProps>;
+  getCustomShape?: (node: Node) => React.FunctionComponent<ShapeProps>;
   getShapeDecoratorCenter?: (quadrant: TopologyQuadrant, node: Node) => { x: number; y: number };
 } & Partial<
   WithSelectionProps &
@@ -75,7 +75,7 @@ type DefaultNodeProps = {
     WithContextMenuProps
 >;
 
-const DefaultNode: React.FC<DefaultNodeProps> = ({
+const DefaultNode: React.FunctionComponent<DefaultNodeProps> = ({
   className,
   element,
   selected,
diff --git a/packages/react-topology/src/components/nodes/NodeShadows.tsx b/packages/react-topology/src/components/nodes/NodeShadows.tsx
index e24de1f0ffd..b0b0f7cfb14 100644
--- a/packages/react-topology/src/components/nodes/NodeShadows.tsx
+++ b/packages/react-topology/src/components/nodes/NodeShadows.tsx
@@ -5,7 +5,7 @@ export const NODE_SHADOW_FILTER_ID = 'NodeShadowsFilterId';
 export const NODE_SHADOW_FILTER_ID_HOVER = 'NodeShadowsFilterId--hover';
 export const NODE_SHADOW_FILTER_ID_DANGER = 'NodeShadowsFilterId--danger';
 
-const NodeShadows: React.FC = () => (
+const NodeShadows: React.FunctionComponent = () => (
   <>
     <SvgDropShadowFilter id={NODE_SHADOW_FILTER_ID} />
     <SvgDropShadowFilter id={NODE_SHADOW_FILTER_ID_HOVER} dx={0} dy={3} stdDeviation={2} floodOpacity={0.2} />
diff --git a/packages/react-topology/src/components/nodes/labels/NodeLabel.tsx b/packages/react-topology/src/components/nodes/labels/NodeLabel.tsx
index 5e0628e5b7f..62d487cca3d 100644
--- a/packages/react-topology/src/components/nodes/labels/NodeLabel.tsx
+++ b/packages/react-topology/src/components/nodes/labels/NodeLabel.tsx
@@ -45,7 +45,7 @@ type NodeLabelProps = {
 /**
  * Renders a `<text>` component with a `<rect>` box behind.
  */
-const NodeLabel: React.FC<NodeLabelProps> = ({
+const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
   children,
   className,
   paddingX = 0,
diff --git a/packages/react-topology/src/components/nodes/shapes/Ellipse.tsx b/packages/react-topology/src/components/nodes/shapes/Ellipse.tsx
index fd1356163e4..d299e875683 100644
--- a/packages/react-topology/src/components/nodes/shapes/Ellipse.tsx
+++ b/packages/react-topology/src/components/nodes/shapes/Ellipse.tsx
@@ -7,7 +7,7 @@ import { ShapeProps } from './shapeUtils';
 
 type EllipseProps = ShapeProps;
 
-const Ellipse: React.FC<EllipseProps> = ({
+const Ellipse: React.FunctionComponent<EllipseProps> = ({
   className = css(styles.topologyNodeBackground),
   width,
   height,
diff --git a/packages/react-topology/src/components/nodes/shapes/Hexagon.tsx b/packages/react-topology/src/components/nodes/shapes/Hexagon.tsx
index afe5428fe17..fd13a1867fb 100644
--- a/packages/react-topology/src/components/nodes/shapes/Hexagon.tsx
+++ b/packages/react-topology/src/components/nodes/shapes/Hexagon.tsx
@@ -6,7 +6,7 @@ type HexagonProps = ShapeProps & {
   cornerRadius?: number;
 };
 
-const Hexagon: React.FC<HexagonProps> = props => (
+const Hexagon: React.FunctionComponent<HexagonProps> = props => (
   <SidedShape cornerRadius={props.cornerRadius ?? HEXAGON_CORNER_RADIUS} {...props} sides={6} />
 );
 
diff --git a/packages/react-topology/src/components/nodes/shapes/Octagon.tsx b/packages/react-topology/src/components/nodes/shapes/Octagon.tsx
index 2af35dcf122..5bb02b107ac 100644
--- a/packages/react-topology/src/components/nodes/shapes/Octagon.tsx
+++ b/packages/react-topology/src/components/nodes/shapes/Octagon.tsx
@@ -6,7 +6,7 @@ type OctagonProps = ShapeProps & {
   cornerRadius?: number;
 };
 
-const Octagon: React.FC<OctagonProps> = props => (
+const Octagon: React.FunctionComponent<OctagonProps> = props => (
   <SidedShape cornerRadius={props.cornerRadius ?? OCTAGON_CORNER_RADIUS} {...props} sides={8} />
 );
 
diff --git a/packages/react-topology/src/components/nodes/shapes/Rectangle.tsx b/packages/react-topology/src/components/nodes/shapes/Rectangle.tsx
index 9ab30f7bb9f..536d42f22d9 100644
--- a/packages/react-topology/src/components/nodes/shapes/Rectangle.tsx
+++ b/packages/react-topology/src/components/nodes/shapes/Rectangle.tsx
@@ -9,7 +9,7 @@ type RectangleProps = ShapeProps & {
   cornerRadius?: number;
 };
 
-const Rectangle: React.FC<RectangleProps> = ({
+const Rectangle: React.FunctionComponent<RectangleProps> = ({
   className = css(styles.topologyNodeBackground),
   width,
   height,
diff --git a/packages/react-topology/src/components/nodes/shapes/Rhombus.tsx b/packages/react-topology/src/components/nodes/shapes/Rhombus.tsx
index aeb856cdb2b..c8cf54d2c40 100644
--- a/packages/react-topology/src/components/nodes/shapes/Rhombus.tsx
+++ b/packages/react-topology/src/components/nodes/shapes/Rhombus.tsx
@@ -17,7 +17,7 @@ const getRhombusPoints = (width: number, height: number, padding: number): Point
   [-padding, height / 2]
 ];
 
-const Rhombus: React.FC<RhombusProps> = ({
+const Rhombus: React.FunctionComponent<RhombusProps> = ({
   className = css(styles.topologyNodeBackground),
   width,
   height,
diff --git a/packages/react-topology/src/components/nodes/shapes/SidedShape.tsx b/packages/react-topology/src/components/nodes/shapes/SidedShape.tsx
index 31ce5170aed..e74da83a5ad 100644
--- a/packages/react-topology/src/components/nodes/shapes/SidedShape.tsx
+++ b/packages/react-topology/src/components/nodes/shapes/SidedShape.tsx
@@ -9,7 +9,7 @@ type SidedProps = ShapeProps & {
   cornerRadius?: number;
 };
 
-const SidedShape: React.FC<SidedProps> = ({
+const SidedShape: React.FunctionComponent<SidedProps> = ({
   className = css(styles.topologyNodeBackground),
   width,
   height,
diff --git a/packages/react-topology/src/components/nodes/shapes/Stadium.tsx b/packages/react-topology/src/components/nodes/shapes/Stadium.tsx
index 2c2f2640d0e..24c5a691451 100644
--- a/packages/react-topology/src/components/nodes/shapes/Stadium.tsx
+++ b/packages/react-topology/src/components/nodes/shapes/Stadium.tsx
@@ -13,7 +13,7 @@ const getStadiumPoints = (width: number, radius: number): PointTuple[] => [
   [radius, radius]
 ];
 
-const Stadium: React.FC<ShapeProps> = ({
+const Stadium: React.FunctionComponent<ShapeProps> = ({
   className = css(styles.topologyNodeBackground),
   width,
   height,
diff --git a/packages/react-topology/src/components/nodes/shapes/Trapezoid.tsx b/packages/react-topology/src/components/nodes/shapes/Trapezoid.tsx
index a916a2b3474..74b892aa461 100644
--- a/packages/react-topology/src/components/nodes/shapes/Trapezoid.tsx
+++ b/packages/react-topology/src/components/nodes/shapes/Trapezoid.tsx
@@ -24,7 +24,7 @@ type TrapezoidProps = ShapeProps & {
   cornerRadius?: number;
 };
 
-const Trapezoid: React.FC<TrapezoidProps> = ({
+const Trapezoid: React.FunctionComponent<TrapezoidProps> = ({
   className = css(styles.topologyNodeBackground),
   width,
   height,
diff --git a/packages/react-topology/src/components/nodes/shapes/shapeUtils.ts b/packages/react-topology/src/components/nodes/shapes/shapeUtils.ts
index cd47d0a69bc..12e3d5d751c 100644
--- a/packages/react-topology/src/components/nodes/shapes/shapeUtils.ts
+++ b/packages/react-topology/src/components/nodes/shapes/shapeUtils.ts
@@ -72,7 +72,7 @@ export const getPathForSides = (numSides: number, size: number, padding = 0): st
   return getHullPath(points, padding);
 };
 
-export const getShapeComponent = (node: Node): React.FC<ShapeProps> => {
+export const getShapeComponent = (node: Node): React.FunctionComponent<ShapeProps> => {
   switch (node.getNodeShape()) {
     case NodeShape.circle:
     case NodeShape.ellipse:
diff --git a/packages/react-topology/src/components/popper/Popper.tsx b/packages/react-topology/src/components/popper/Popper.tsx
index aa808b6270a..87d42298b13 100644
--- a/packages/react-topology/src/components/popper/Popper.tsx
+++ b/packages/react-topology/src/components/popper/Popper.tsx
@@ -78,7 +78,7 @@ interface PopperProps {
 
 const DEFAULT_POPPER_OPTIONS: PopperOptions = {};
 
-const Popper: React.FC<PopperProps> = ({
+const Popper: React.FunctionComponent<PopperProps> = ({
   children,
   container,
   className,
diff --git a/packages/react-topology/src/components/popper/Portal.tsx b/packages/react-topology/src/components/popper/Portal.tsx
index a782aacd88a..0df2a615962 100644
--- a/packages/react-topology/src/components/popper/Portal.tsx
+++ b/packages/react-topology/src/components/popper/Portal.tsx
@@ -11,7 +11,7 @@ interface PortalProps {
 const getContainer = (container: GetContainer): Element | null | undefined =>
   typeof container === 'function' ? container() : container;
 
-const Portal: React.FC<PortalProps> = ({ children, container }) => {
+const Portal: React.FunctionComponent<PortalProps> = ({ children, container }) => {
   const [containerNode, setContainerNode] = React.useState<Element>();
 
   useIsomorphicLayoutEffect(() => {
diff --git a/packages/react-topology/src/components/svg/SvgDropShadowFilter.tsx b/packages/react-topology/src/components/svg/SvgDropShadowFilter.tsx
index 16e07196f09..5755a5e6d97 100644
--- a/packages/react-topology/src/components/svg/SvgDropShadowFilter.tsx
+++ b/packages/react-topology/src/components/svg/SvgDropShadowFilter.tsx
@@ -14,7 +14,7 @@ interface SvgDropShadowFilterProps {
   floodColor?: string;
 }
 
-const SvgDropShadowFilter: React.FC<SvgDropShadowFilterProps> = ({
+const SvgDropShadowFilter: React.FunctionComponent<SvgDropShadowFilterProps> = ({
   id,
   dx = 0,
   dy = 1,