From 2eee5195ccf006b5805e1b637605df2e5139ea8c Mon Sep 17 00:00:00 2001
From: Fouad <fmtabbara@hotmail.co.uk>
Date: Thu, 12 Jan 2023 17:15:31 +0000
Subject: [PATCH] React / React DOM / Types upgrade to version 18 (#2830)

* new react and reactdom packages in wallet

* new react and reactdom packages in root

* new react and reactdom packages in nym connect

* new react and reactdom packages in root

* update react and reactdom for explorer

* react and react-dom upgrade for ts-packages

remove unused import

fix linting error

* use custom FC typing

move typings folder

* fix type error
---
 explorer/package.json                         |  8 +--
 explorer/src/App.tsx                          |  2 +-
 explorer/src/components/ComponentError.tsx    |  2 +-
 explorer/src/components/ContentCard.tsx       |  2 +-
 .../src/components/CustomColumnHeading.tsx    |  2 +-
 explorer/src/components/DetailTable.tsx       |  2 +-
 explorer/src/components/Footer.tsx            |  2 +-
 .../src/components/MixNodes/BondBreakdown.tsx |  2 +-
 .../src/components/MixNodes/DetailSection.tsx |  2 +-
 .../MixNodes/Economics/EconomicsProgress.tsx  |  2 +-
 .../components/MixNodes/Economics/Table.tsx   |  2 +-
 explorer/src/components/MixNodes/Status.tsx   |  2 +-
 .../components/MixNodes/StatusDropdown.tsx    | 16 +++---
 explorer/src/components/MobileNav.tsx         |  6 +--
 explorer/src/components/Nav.tsx               |  4 +-
 explorer/src/components/Socials.tsx           |  2 +-
 explorer/src/components/StatsCard.tsx         |  9 +++-
 explorer/src/components/Switch.tsx            |  4 +-
 explorer/src/components/TableToolbar.tsx      |  2 +-
 explorer/src/components/Title.tsx             |  2 +-
 explorer/src/components/TwoColSmallTable.tsx  |  2 +-
 .../src/components/Universal-DataGrid.tsx     |  2 +-
 explorer/src/components/UptimeChart.tsx       |  2 +-
 explorer/src/components/WorldMap.tsx          |  2 +-
 explorer/src/context/main.tsx                 |  2 +-
 explorer/src/context/mixnode.tsx              |  3 +-
 explorer/src/errors/ErrorBoundaryContent.tsx  |  2 +-
 explorer/src/icons/GatewaysSVG.tsx            |  2 +-
 explorer/src/icons/LightSwitchSVG.tsx         |  2 +-
 explorer/src/icons/MixnodesSVG.tsx            |  2 +-
 explorer/src/icons/MobileDrawerClose.tsx      |  2 +-
 explorer/src/icons/NetworksSVG.tsx            |  2 +-
 explorer/src/icons/NodemapSVG.tsx             |  2 +-
 explorer/src/icons/OverviewSVG.tsx            |  2 +-
 explorer/src/icons/ValidatorsSVG.tsx          |  2 +-
 explorer/src/icons/socials/DiscordIcon.tsx    |  2 +-
 explorer/src/icons/socials/GitHubIcon.tsx     |  2 +-
 explorer/src/icons/socials/TelegramIcon.tsx   |  2 +-
 explorer/src/icons/socials/TwitterIcon.tsx    |  2 +-
 explorer/src/index.tsx                        | 30 +++++++-----
 explorer/src/pages/404/index.tsx              |  2 +-
 explorer/src/pages/GatewayDetail/index.tsx    |  4 +-
 explorer/src/pages/Gateways/index.tsx         |  2 +-
 explorer/src/pages/MixnodeDetail/index.tsx    |  6 +--
 explorer/src/pages/Mixnodes/index.tsx         |  2 +-
 explorer/src/pages/MixnodesMap/index.tsx      |  9 +++-
 explorer/src/pages/Overview/index.tsx         |  2 +-
 explorer/src/routes/index.tsx                 |  4 +-
 explorer/src/routes/network-components.tsx    |  4 +-
 explorer/src/theme/index.tsx                  |  2 +-
 explorer/src/typings/FC.d.ts                  |  1 +
 nym-connect/package.json                      |  8 +--
 nym-connect/src/App.tsx                       |  2 +-
 nym-connect/src/components/AppWindowFrame.tsx |  2 +-
 .../src/components/ConnectionButton.tsx       |  2 +-
 .../src/components/ConnectionStats.tsx        |  2 +-
 .../src/components/ConnectionStatus.tsx       |  4 +-
 .../Growth/TestAndEarnButtonArea.tsx          |  4 +-
 .../Growth/TestAndEarnCurrentDraw.tsx         | 10 ++--
 .../components/Growth/TestAndEarnDraws.tsx    |  6 +--
 .../Growth/TestAndEarnEnterWalletAddress.tsx  |  2 +-
 .../components/Growth/TestAndEarnError.tsx    |  2 +-
 .../Growth/TestAndEarnPopup.stories.tsx       | 14 +++---
 .../components/Growth/TestAndEarnPopup.tsx    |  4 +-
 .../components/Growth/TestAndEarnTakePart.tsx |  2 +-
 .../components/Growth/TestAndEarnWinner.tsx   |  4 +-
 .../Growth/TestAndEarnWinnerWalletAddress.tsx |  2 +-
 .../Growth/context/TestAndEarnContext.tsx     |  2 +-
 .../context/mocks/TestAndEarnContext.tsx      | 14 +++---
 .../src/components/IpAddressAndPort.tsx       |  2 +-
 nym-connect/src/components/NeedHelp.tsx       |  2 +-
 .../src/components/ServiceProviderPopup.tsx   |  2 +-
 .../components/ServiceProviderSelector.tsx    |  2 +-
 .../src/components/ServiceSelector.tsx        |  2 +-
 nym-connect/src/context/main.tsx              |  2 +-
 nym-connect/src/context/mocks/main.tsx        |  2 +-
 nym-connect/src/index.tsx                     | 34 +++++++------
 nym-connect/src/layouts/ConnectedLayout.tsx   |  2 +-
 nym-connect/src/layouts/DefaultLayout.tsx     |  2 +-
 nym-connect/src/theme/index.tsx               |  4 +-
 nym-connect/src/typings/FC.d.ts               |  1 +
 nym-wallet/package.json                       |  8 +--
 nym-wallet/src/components/ActionsMenu.tsx     | 12 ++---
 .../Bonding/modals/BondOversaturatedModal.tsx |  2 +-
 nym-wallet/src/components/ClientAddress.tsx   | 16 ++----
 nym-wallet/src/components/ConfirmTX.tsx       |  3 +-
 .../components/Delegation/DelegateBlocker.tsx |  2 +-
 .../components/Delegation/DelegateModal.tsx   |  2 +-
 .../Delegation/DelegationActions.tsx          |  4 +-
 .../components/Delegation/DelegationList.tsx  |  4 +-
 .../Delegation/DelegationModal.stories.tsx    |  2 +-
 .../components/Delegation/DelegationModal.tsx |  3 +-
 .../src/components/Delegation/Delegations.tsx |  2 +-
 .../components/Delegation/Modals.stories.tsx  |  2 +-
 .../components/Delegation/UndelegateModal.tsx |  2 +-
 .../src/components/Modals/ErrorModal.tsx      |  3 +-
 .../src/components/Modals/LoadingModal.tsx    |  2 +-
 .../src/components/Modals/ModalDivider.tsx    |  2 +-
 .../src/components/Modals/ModalListItem.tsx   |  2 +-
 .../components/Modals/SimpleModal.stories.tsx |  2 +-
 .../src/components/Modals/SimpleModal.tsx     |  3 +-
 nym-wallet/src/components/NetworkSelector.tsx |  2 +-
 nym-wallet/src/components/NymCard.tsx         |  3 +-
 .../Rewards/RedeemModal.stories.tsx           |  2 +-
 .../src/components/Rewards/RedeemModal.tsx    |  2 +-
 .../src/components/Rewards/RewardsSummary.tsx |  2 +-
 nym-wallet/src/components/SuccessResponse.tsx |  2 +-
 nym-wallet/src/components/Title.tsx           |  2 +-
 .../src/components/TokenPoolSelector.tsx      |  2 +-
 .../src/components/TransactionDetails.tsx     |  2 +-
 nym-wallet/src/components/textfields.tsx      |  4 +-
 nym-wallet/src/context/accounts.tsx           |  2 +-
 nym-wallet/src/context/auth.tsx               |  2 +-
 nym-wallet/src/context/bonding.tsx            |  2 +-
 nym-wallet/src/context/buy.tsx                |  2 +-
 nym-wallet/src/context/delegations.tsx        |  1 +
 nym-wallet/src/context/main.tsx               |  2 +-
 nym-wallet/src/context/mocks/accounts.tsx     |  2 +-
 nym-wallet/src/context/mocks/buy.tsx          |  2 +-
 nym-wallet/src/context/mocks/delegations.tsx  |  2 +-
 nym-wallet/src/context/mocks/main.tsx         |  2 +-
 nym-wallet/src/context/mocks/rewards.tsx      |  2 +-
 nym-wallet/src/context/rewards.tsx            |  2 +-
 nym-wallet/src/index.tsx                      |  9 ++--
 nym-wallet/src/layouts/AppLayout.tsx          |  2 +-
 nym-wallet/src/layouts/AuthLayout.tsx         |  2 +-
 nym-wallet/src/layouts/PageLayout.tsx         |  5 +-
 nym-wallet/src/pages/Admin/index.tsx          |  4 +-
 nym-wallet/src/pages/auth/pages/welcome.tsx   |  2 +-
 .../balance/components/vesting-timeline.tsx   |  4 +-
 .../src/pages/internal-docs/DocEntry.tsx      |  2 +-
 nym-wallet/src/pages/settings/tabs.tsx        |  4 +-
 nym-wallet/src/pages/terminal/index.tsx       |  7 +--
 nym-wallet/src/svg-icons/node.tsx             |  2 +-
 nym-wallet/src/theme/NymWalletTheme.tsx       |  5 +-
 nym-wallet/src/theme/index.tsx                |  4 +-
 nym-wallet/src/typings/FC.d.ts                |  1 +
 .../package.json                              |  7 +--
 .../src/App.tsx                               |  6 +--
 .../src/ThemeToggle.tsx                       |  2 +-
 .../src/context/index.tsx                     |  2 +-
 .../src/context/mixnet.tsx                    |  2 +-
 testnet-faucet/package.json                   |  4 +-
 testnet-faucet/src/context/index.tsx          |  5 +-
 testnet-faucet/src/theme/index.tsx            |  2 +-
 testnet-faucet/typings/FC.d.ts                |  1 +
 .../package.json                              |  4 +-
 ts-packages/mui-theme/README.md               |  8 +--
 ts-packages/mui-theme/package.json            |  6 +--
 ts-packages/mui-theme/src/theme/index.tsx     | 10 +++-
 ts-packages/mui-theme/src/typings/FC.d.ts     |  1 +
 ts-packages/react-components/package.json     | 19 ++++---
 .../account/WalletAddressFormField.tsx        |  2 +-
 .../components/clipboard/CopyToClipboard.tsx  |  2 +-
 .../src/components/coins/CoinMark.tsx         |  2 +-
 .../src/components/coins/CoinMarkTestnet.tsx  |  2 +-
 .../src/components/currency/Currency.tsx      |  2 +-
 .../components/currency/CurrencyAmount.tsx    |  4 +-
 .../components/currency/CurrencyFormField.tsx |  2 +-
 .../currency/CurrencyWithCoinMark.tsx         |  2 +-
 .../src/components/logo/NymIcon.tsx           |  2 +-
 .../src/components/logo/NymLogo.tsx           |  2 +-
 .../src/components/logo/NymWordmark.tsx       |  2 +-
 .../mixnodes/IdentityKeyFormField.tsx         |  2 +-
 .../components/networks/NetworkSelector.tsx   |  4 +-
 .../src/playground/Playground.tsx             |  2 +-
 .../src/playground/buttons.tsx                |  4 +-
 .../src/playground/checkboxes.tsx             |  2 +-
 .../react-components/src/playground/fonts.tsx |  2 +-
 .../src/playground/switches.tsx               |  2 +-
 .../react-components/src/playground/theme.tsx |  4 +-
 .../src/playground/theme/MUIThemeExplorer.tsx |  4 +-
 .../src/playground/theme/PaletteSwatches.tsx  |  6 +--
 .../react-components/src/typings/FC.d.ts      |  1 +
 .../README.md                                 |  6 +--
 .../package.json                              |  6 +--
 .../src/App.tsx                               |  6 +--
 .../src/ThemeToggle.tsx                       |  2 +-
 .../src/context/index.tsx                     |  2 +-
 .../src/typings/FC.d.ts                       |  1 +
 .../yarn-error.log                            |  4 +-
 ts-packages/webpack/package.json              |  4 +-
 yarn.lock                                     | 49 ++++++++++++-------
 183 files changed, 392 insertions(+), 326 deletions(-)
 create mode 100644 explorer/src/typings/FC.d.ts
 create mode 100644 nym-connect/src/typings/FC.d.ts
 create mode 100644 nym-wallet/src/typings/FC.d.ts
 create mode 100644 testnet-faucet/typings/FC.d.ts
 create mode 100644 ts-packages/mui-theme/src/typings/FC.d.ts
 create mode 100644 ts-packages/react-components/src/typings/FC.d.ts
 create mode 100644 ts-packages/react-webpack-with-theme-example/src/typings/FC.d.ts

diff --git a/explorer/package.json b/explorer/package.json
index 65ed064da2..916e9b0aeb 100644
--- a/explorer/package.json
+++ b/explorer/package.json
@@ -18,8 +18,8 @@
     "d3-scale": "^4.0.0",
     "date-fns": "^2.24.0",
     "i18n-iso-countries": "^6.8.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-google-charts": "^3.0.15",
     "react-identicons": "^1.2.5",
@@ -48,8 +48,8 @@
     "@types/geojson": "^7946.0.8",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
-    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "@types/react-simple-maps": "^1.0.6",
     "@types/react-tooltip": "^4.2.4",
     "@types/topojson-client": "^3.1.0",
diff --git a/explorer/src/App.tsx b/explorer/src/App.tsx
index 9ce60f06f9..4e6fcc41e8 100644
--- a/explorer/src/App.tsx
+++ b/explorer/src/App.tsx
@@ -4,7 +4,7 @@ import { MobileNav } from './components/MobileNav';
 import { Routes } from './routes/index';
 import { useIsMobile } from './hooks/useIsMobile';
 
-export const App: React.FC = () => {
+export const App: FCWithChildren = () => {
   const isMobile = useIsMobile();
 
   if (isMobile) {
diff --git a/explorer/src/components/ComponentError.tsx b/explorer/src/components/ComponentError.tsx
index 34ca4b9d19..00b448fb9e 100644
--- a/explorer/src/components/ComponentError.tsx
+++ b/explorer/src/components/ComponentError.tsx
@@ -1,7 +1,7 @@
 import { Typography } from '@mui/material';
 import * as React from 'react';
 
-export const ComponentError: React.FC<{ text: string }> = ({ text }) => (
+export const ComponentError: FCWithChildren<{ text: string }> = ({ text }) => (
   <Typography
     sx={{ marginTop: 2, color: 'primary.main', fontSize: 10 }}
     variant="body1"
diff --git a/explorer/src/components/ContentCard.tsx b/explorer/src/components/ContentCard.tsx
index bbe816429a..c78c719ca7 100644
--- a/explorer/src/components/ContentCard.tsx
+++ b/explorer/src/components/ContentCard.tsx
@@ -10,7 +10,7 @@ type ContentCardProps = {
   onClick?: ReactEventHandler;
 };
 
-export const ContentCard: React.FC<ContentCardProps> = ({
+export const ContentCard: FCWithChildren<ContentCardProps> = ({
   title,
   Icon,
   Action,
diff --git a/explorer/src/components/CustomColumnHeading.tsx b/explorer/src/components/CustomColumnHeading.tsx
index 4adcda4540..c15ef27f9b 100644
--- a/explorer/src/components/CustomColumnHeading.tsx
+++ b/explorer/src/components/CustomColumnHeading.tsx
@@ -4,7 +4,7 @@ import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import { useTheme } from '@mui/material/styles';
 import { Tooltip } from '@nymproject/react/tooltip/Tooltip';
 
-export const CustomColumnHeading: React.FC<{ headingTitle: string; tooltipInfo?: string }> = ({
+export const CustomColumnHeading: FCWithChildren<{ headingTitle: string; tooltipInfo?: string }> = ({
   headingTitle,
   tooltipInfo,
 }) => {
diff --git a/explorer/src/components/DetailTable.tsx b/explorer/src/components/DetailTable.tsx
index 75aaae36ab..17418de4f3 100644
--- a/explorer/src/components/DetailTable.tsx
+++ b/explorer/src/components/DetailTable.tsx
@@ -43,7 +43,7 @@ function formatCellValues(val: string | number, field: string) {
   return val;
 }
 
-export const DetailTable: React.FC<{
+export const DetailTable: FCWithChildren<{
   tableName: string;
   columnsData: ColumnsType[];
   rows: MixnodeRowType[] | GatewayEnrichedRowType[];
diff --git a/explorer/src/components/Footer.tsx b/explorer/src/components/Footer.tsx
index 2ee7c77198..c85ba47be4 100644
--- a/explorer/src/components/Footer.tsx
+++ b/explorer/src/components/Footer.tsx
@@ -4,7 +4,7 @@ import { Typography } from '@mui/material';
 import { Socials } from './Socials';
 import { useIsMobile } from '../hooks/useIsMobile';
 
-export const Footer: React.FC = () => {
+export const Footer: FCWithChildren = () => {
   const isMobile = useIsMobile();
 
   return (
diff --git a/explorer/src/components/MixNodes/BondBreakdown.tsx b/explorer/src/components/MixNodes/BondBreakdown.tsx
index 06009be05d..d7faa163fc 100644
--- a/explorer/src/components/MixNodes/BondBreakdown.tsx
+++ b/explorer/src/components/MixNodes/BondBreakdown.tsx
@@ -13,7 +13,7 @@ import { currencyToString } from '../../utils/currency';
 import { useMixnodeContext } from '../../context/mixnode';
 import { useIsMobile } from '../../hooks/useIsMobile';
 
-export const BondBreakdownTable: React.FC = () => {
+export const BondBreakdownTable: FCWithChildren = () => {
   const { mixNode, delegations, uniqDelegations } = useMixnodeContext();
   const [showDelegations, toggleShowDelegations] = React.useState<boolean>(false);
 
diff --git a/explorer/src/components/MixNodes/DetailSection.tsx b/explorer/src/components/MixNodes/DetailSection.tsx
index b338487fd2..dcf0f830b5 100644
--- a/explorer/src/components/MixNodes/DetailSection.tsx
+++ b/explorer/src/components/MixNodes/DetailSection.tsx
@@ -11,7 +11,7 @@ interface MixNodeDetailProps {
   mixnodeDescription: MixNodeDescriptionResponse;
 }
 
-export const MixNodeDetailSection: React.FC<MixNodeDetailProps> = ({ mixNodeRow, mixnodeDescription }) => {
+export const MixNodeDetailSection: FCWithChildren<MixNodeDetailProps> = ({ mixNodeRow, mixnodeDescription }) => {
   const theme = useTheme();
   const palette = [theme.palette.text.primary];
   const isMobile = useIsMobile();
diff --git a/explorer/src/components/MixNodes/Economics/EconomicsProgress.tsx b/explorer/src/components/MixNodes/Economics/EconomicsProgress.tsx
index 1779d8d18f..9f8525a754 100644
--- a/explorer/src/components/MixNodes/Economics/EconomicsProgress.tsx
+++ b/explorer/src/components/MixNodes/Economics/EconomicsProgress.tsx
@@ -6,7 +6,7 @@ import { Box } from '@mui/system';
 const parseToNumber = (value: number | undefined | string) =>
   typeof value === 'string' ? parseInt(value || '', 10) : value || 0;
 
-export const EconomicsProgress: React.FC<
+export const EconomicsProgress: FCWithChildren<
   LinearProgressProps & {
     threshold?: number;
   }
diff --git a/explorer/src/components/MixNodes/Economics/Table.tsx b/explorer/src/components/MixNodes/Economics/Table.tsx
index 5977847436..929445254a 100644
--- a/explorer/src/components/MixNodes/Economics/Table.tsx
+++ b/explorer/src/components/MixNodes/Economics/Table.tsx
@@ -66,7 +66,7 @@ const formatCellValues = (value: EconomicsRowsType, field: string) => {
   );
 };
 
-export const DelegatorsInfoTable: React.FC<UniversalTableProps<EconomicsInfoRowWithIndex>> = ({
+export const DelegatorsInfoTable: FCWithChildren<UniversalTableProps<EconomicsInfoRowWithIndex>> = ({
   tableName,
   columnsData,
   rows,
diff --git a/explorer/src/components/MixNodes/Status.tsx b/explorer/src/components/MixNodes/Status.tsx
index 88cfe6c1eb..a2da302c87 100644
--- a/explorer/src/components/MixNodes/Status.tsx
+++ b/explorer/src/components/MixNodes/Status.tsx
@@ -36,7 +36,7 @@ export const getMixNodeStatusText = (status: MixnodeStatus) => {
   }
 };
 
-export const MixNodeStatus: React.FC<MixNodeStatusProps> = ({ status }) => {
+export const MixNodeStatus: FCWithChildren<MixNodeStatusProps> = ({ status }) => {
   const theme = useTheme();
   const Icon = React.useMemo(() => getMixNodeIcon(status), [status]);
   const color = React.useMemo(() => getMixNodeStatusColor(theme, status), [status, theme]);
diff --git a/explorer/src/components/MixNodes/StatusDropdown.tsx b/explorer/src/components/MixNodes/StatusDropdown.tsx
index 18263edf6e..9cb34a2f0c 100644
--- a/explorer/src/components/MixNodes/StatusDropdown.tsx
+++ b/explorer/src/components/MixNodes/StatusDropdown.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { MenuItem } from '@mui/material';
 import Select from '@mui/material/Select';
-import { SelectInputProps } from '@mui/material/Select/SelectInput';
+import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
 import { SxProps } from '@mui/system';
 import { MixNodeStatus } from './Status';
 import { MixnodeStatus, MixnodeStatusWithAll } from '../../typeDefs/explorer-api';
@@ -16,14 +16,18 @@ interface MixNodeStatusDropdownProps {
   onSelectionChanged?: (status?: MixnodeStatusWithAll) => void;
 }
 
-export const MixNodeStatusDropdown: React.FC<MixNodeStatusDropdownProps> = ({ status, onSelectionChanged, sx }) => {
+export const MixNodeStatusDropdown: FCWithChildren<MixNodeStatusDropdownProps> = ({
+  status,
+  onSelectionChanged,
+  sx,
+}) => {
   const isMobile = useIsMobile();
   const [statusValue, setStatusValue] = React.useState<MixnodeStatusWithAll>(status || MixnodeStatusWithAll.all);
-  const onChange: SelectInputProps<MixnodeStatusWithAll>['onChange'] = React.useCallback(
-    ({ target: { value } }) => {
-      setStatusValue(value);
+  const onChange = React.useCallback(
+    (event: SelectChangeEvent) => {
+      setStatusValue(event.target.value as MixnodeStatusWithAll);
       if (onSelectionChanged) {
-        onSelectionChanged(value);
+        onSelectionChanged(event.target.value as MixnodeStatusWithAll);
       }
     },
     [onSelectionChanged],
diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
index cb44210e9d..ac03cb9c80 100644
--- a/explorer/src/components/MobileNav.tsx
+++ b/explorer/src/components/MobileNav.tsx
@@ -25,11 +25,7 @@ import { NYM_WEBSITE } from '../api/constants';
 import { ExpandableButton } from './Nav';
 import { DarkLightSwitchMobile } from './Switch';
 
-type MobileNavProps = {
-  children: React.ReactNode;
-};
-
-export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }: MobileNavProps) => {
+export const MobileNav: FCWithChildren = ({ children }) => {
   const theme = useTheme();
   const { navState, updateNavState } = useMainContext();
   const [drawerOpen, setDrawerOpen] = React.useState(false);
diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
index e2808871a0..2461263ff5 100644
--- a/explorer/src/components/Nav.tsx
+++ b/explorer/src/components/Nav.tsx
@@ -87,7 +87,7 @@ type ExpandableButtonType = {
   setToActive: (num: number) => void;
 };
 
-export const ExpandableButton: React.FC<ExpandableButtonType> = ({
+export const ExpandableButton: FCWithChildren<ExpandableButtonType> = ({
   id,
   url,
   setToActive,
@@ -230,7 +230,7 @@ ExpandableButton.defaultProps = {
   closeDrawer: undefined,
 };
 
-export const Nav: React.FC = ({ children }) => {
+export const Nav: FCWithChildren = ({ children }) => {
   const { updateNavState, navState } = useMainContext();
   const [drawerIsOpen, setDrawerToOpen] = React.useState(false);
   const [fixedOpen, setFixedOpen] = React.useState(false);
diff --git a/explorer/src/components/Socials.tsx b/explorer/src/components/Socials.tsx
index f359a24ac1..138b0e18eb 100644
--- a/explorer/src/components/Socials.tsx
+++ b/explorer/src/components/Socials.tsx
@@ -12,7 +12,7 @@ export const TWITTER_LINK = 'https://twitter.com/nymproject';
 export const GITHUB_LINK = 'https://github.com/nymtech';
 export const DISCORD_LINK = 'https://discord.gg/nym';
 
-export const Socials: React.FC<{ isFooter?: boolean }> = ({ isFooter }) => {
+export const Socials: FCWithChildren<{ isFooter?: boolean }> = ({ isFooter }) => {
   const theme = useTheme();
   const color = isFooter
     ? theme.palette.nym.networkExplorer.footer.socialIcons
diff --git a/explorer/src/components/StatsCard.tsx b/explorer/src/components/StatsCard.tsx
index a571441015..36355b1759 100644
--- a/explorer/src/components/StatsCard.tsx
+++ b/explorer/src/components/StatsCard.tsx
@@ -11,7 +11,14 @@ interface StatsCardProps {
   onClick?: () => void;
   color?: string;
 }
-export const StatsCard: React.FC<StatsCardProps> = ({ icon, title, count, onClick, errorMsg, color: colorProp }) => {
+export const StatsCard: FCWithChildren<StatsCardProps> = ({
+  icon,
+  title,
+  count,
+  onClick,
+  errorMsg,
+  color: colorProp,
+}) => {
   const theme = useTheme();
   const color = colorProp || theme.palette.text.primary;
   return (
diff --git a/explorer/src/components/Switch.tsx b/explorer/src/components/Switch.tsx
index 835100a1db..e5cbd47385 100644
--- a/explorer/src/components/Switch.tsx
+++ b/explorer/src/components/Switch.tsx
@@ -51,7 +51,7 @@ export const DarkLightSwitch = styled(Switch)(({ theme }) => ({
   },
 }));
 
-export const DarkLightSwitchMobile: React.FC = () => {
+export const DarkLightSwitchMobile: FCWithChildren = () => {
   const { toggleMode } = useMainContext();
   return (
     <Button onClick={() => toggleMode()} data-testid="switch-button">
@@ -60,7 +60,7 @@ export const DarkLightSwitchMobile: React.FC = () => {
   );
 };
 
-export const DarkLightSwitchDesktop: React.FC<{ defaultChecked: boolean }> = ({ defaultChecked }) => {
+export const DarkLightSwitchDesktop: FCWithChildren<{ defaultChecked: boolean }> = ({ defaultChecked }) => {
   const { toggleMode } = useMainContext();
   return (
     <Button sx={{ paddingLeft: 0 }} onClick={() => toggleMode()} data-testid="switch-button">
diff --git a/explorer/src/components/TableToolbar.tsx b/explorer/src/components/TableToolbar.tsx
index 7426433868..317ae51df5 100644
--- a/explorer/src/components/TableToolbar.tsx
+++ b/explorer/src/components/TableToolbar.tsx
@@ -16,7 +16,7 @@ type TableToolBarProps = {
   childrenAfter?: React.ReactNode;
 };
 
-export const TableToolbar: React.FC<TableToolBarProps> = ({
+export const TableToolbar: FCWithChildren<TableToolBarProps> = ({
   searchTerm,
   onChangeSearch,
   onChangePageSize,
diff --git a/explorer/src/components/Title.tsx b/explorer/src/components/Title.tsx
index b89c5bd48d..9380d2c9c5 100644
--- a/explorer/src/components/Title.tsx
+++ b/explorer/src/components/Title.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Typography } from '@mui/material';
 
-export const Title: React.FC<{ text: string }> = ({ text }) => (
+export const Title: FCWithChildren<{ text: string }> = ({ text }) => (
   <Typography
     variant="h5"
     sx={{
diff --git a/explorer/src/components/TwoColSmallTable.tsx b/explorer/src/components/TwoColSmallTable.tsx
index 6f8d8e059d..a211c29bdd 100644
--- a/explorer/src/components/TwoColSmallTable.tsx
+++ b/explorer/src/components/TwoColSmallTable.tsx
@@ -19,7 +19,7 @@ interface TableProps {
   loading: boolean;
 }
 
-export const TwoColSmallTable: React.FC<TableProps> = ({
+export const TwoColSmallTable: FCWithChildren<TableProps> = ({
   loading,
   title,
   icons,
diff --git a/explorer/src/components/Universal-DataGrid.tsx b/explorer/src/components/Universal-DataGrid.tsx
index d800f23675..9dd1718112 100644
--- a/explorer/src/components/Universal-DataGrid.tsx
+++ b/explorer/src/components/Universal-DataGrid.tsx
@@ -50,7 +50,7 @@ type DataGridProps = {
   rows: any;
   loading?: boolean;
 };
-export const UniversalDataGrid: React.FC<DataGridProps> = ({ rows, columns, loading, pagination, pageSize }) => {
+export const UniversalDataGrid: FCWithChildren<DataGridProps> = ({ rows, columns, loading, pagination, pageSize }) => {
   if (loading) return <LinearProgress />;
   if (!loading)
     return (
diff --git a/explorer/src/components/UptimeChart.tsx b/explorer/src/components/UptimeChart.tsx
index 51f2c9b62b..00a981a3af 100644
--- a/explorer/src/components/UptimeChart.tsx
+++ b/explorer/src/components/UptimeChart.tsx
@@ -17,7 +17,7 @@ type FormattedDateRecord = [string, number];
 type FormattedChartHeadings = string[];
 type FormattedChartData = [FormattedChartHeadings | FormattedDateRecord];
 
-export const UptimeChart: React.FC<ChartProps> = ({ title, xLabel, yLabel, uptimeStory, loading }) => {
+export const UptimeChart: FCWithChildren<ChartProps> = ({ title, xLabel, yLabel, uptimeStory, loading }) => {
   const [formattedChartData, setFormattedChartData] = React.useState<FormattedChartData>();
   const theme = useTheme();
   const color = theme.palette.text.primary;
diff --git a/explorer/src/components/WorldMap.tsx b/explorer/src/components/WorldMap.tsx
index 3c010524b5..7a86f34095 100644
--- a/explorer/src/components/WorldMap.tsx
+++ b/explorer/src/components/WorldMap.tsx
@@ -14,7 +14,7 @@ type MapProps = {
   loading: boolean;
 };
 
-export const WorldMap: React.FC<MapProps> = ({ countryData, userLocation, loading }) => {
+export const WorldMap: FCWithChildren<MapProps> = ({ countryData, userLocation, loading }) => {
   const { palette } = useTheme();
 
   const colorScale = React.useMemo(() => {
diff --git a/explorer/src/context/main.tsx b/explorer/src/context/main.tsx
index 42e89b32ee..182a2bcc89 100644
--- a/explorer/src/context/main.tsx
+++ b/explorer/src/context/main.tsx
@@ -46,7 +46,7 @@ export const MainContext = React.createContext<State>({
 
 export const useMainContext = (): React.ContextType<typeof MainContext> => React.useContext<State>(MainContext);
 
-export const MainContextProvider: React.FC = ({ children }) => {
+export const MainContextProvider: FCWithChildren = ({ children }) => {
   // light/dark mode
   const [mode, setMode] = React.useState<PaletteMode>('dark');
 
diff --git a/explorer/src/context/mixnode.tsx b/explorer/src/context/mixnode.tsx
index a710095811..36e43d568b 100644
--- a/explorer/src/context/mixnode.tsx
+++ b/explorer/src/context/mixnode.tsx
@@ -37,13 +37,14 @@ export const useMixnodeContext = (): React.ContextType<typeof MixnodeContext> =>
 
 interface MixnodeContextProviderProps {
   mixId: string;
+  children: React.ReactNode;
 }
 
 /**
  * Provides a state context for a mixnode by identity
  * @param mixId   The mixID of the mixnode
  */
-export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({ mixId, children }) => {
+export const MixnodeContextProvider: FCWithChildren<MixnodeContextProviderProps> = ({ mixId, children }) => {
   const [mixNode, fetchMixnodeById, clearMixnodeById] = useApiState<MixNodeResponseItem | undefined>(
     mixId,
     Api.fetchMixnodeByID,
diff --git a/explorer/src/errors/ErrorBoundaryContent.tsx b/explorer/src/errors/ErrorBoundaryContent.tsx
index 36df5e9106..0389588e26 100644
--- a/explorer/src/errors/ErrorBoundaryContent.tsx
+++ b/explorer/src/errors/ErrorBoundaryContent.tsx
@@ -4,7 +4,7 @@ import { Alert, AlertTitle, Container } from '@mui/material';
 import { NymThemeProvider } from '@nymproject/mui-theme';
 import { NymLogo } from '@nymproject/react/logo/NymLogo';
 
-export const ErrorBoundaryContent: React.FC<FallbackProps> = ({ error }) => (
+export const ErrorBoundaryContent: FCWithChildren<FallbackProps> = ({ error }) => (
   <NymThemeProvider mode="dark">
     <Container sx={{ py: 4 }}>
       <NymLogo height="75px" width="75px" />
diff --git a/explorer/src/icons/GatewaysSVG.tsx b/explorer/src/icons/GatewaysSVG.tsx
index ea46f3163f..00e4a21198 100644
--- a/explorer/src/icons/GatewaysSVG.tsx
+++ b/explorer/src/icons/GatewaysSVG.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 
-export const GatewaysSVG: React.FC = () => {
+export const GatewaysSVG: FCWithChildren = () => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
diff --git a/explorer/src/icons/LightSwitchSVG.tsx b/explorer/src/icons/LightSwitchSVG.tsx
index d5a0a82210..7a32590dfc 100644
--- a/explorer/src/icons/LightSwitchSVG.tsx
+++ b/explorer/src/icons/LightSwitchSVG.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 
-export const LightSwitchSVG: React.FC = () => {
+export const LightSwitchSVG: FCWithChildren = () => {
   const { palette } = useTheme();
   return (
     <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/explorer/src/icons/MixnodesSVG.tsx b/explorer/src/icons/MixnodesSVG.tsx
index ebb53644d3..56902cb0de 100644
--- a/explorer/src/icons/MixnodesSVG.tsx
+++ b/explorer/src/icons/MixnodesSVG.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 
-export const MixnodesSVG: React.FC = () => {
+export const MixnodesSVG: FCWithChildren = () => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
 
diff --git a/explorer/src/icons/MobileDrawerClose.tsx b/explorer/src/icons/MobileDrawerClose.tsx
index b03c21f99e..6c8ecfacbc 100644
--- a/explorer/src/icons/MobileDrawerClose.tsx
+++ b/explorer/src/icons/MobileDrawerClose.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export const MobileDrawerClose: React.FC = (props) => (
+export const MobileDrawerClose: FCWithChildren = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -5 24 24" width="25" height="25" {...props}>
     <path
       d="M0 12H13V10H0V12ZM0 7H10V5H0V7ZM0 0V2H13V0H0ZM18 9.59L14.42 6L18 2.41L16.59 1L11.59 6L16.59 11L18 9.59Z"
diff --git a/explorer/src/icons/NetworksSVG.tsx b/explorer/src/icons/NetworksSVG.tsx
index da062ba820..0db2b9bdfb 100644
--- a/explorer/src/icons/NetworksSVG.tsx
+++ b/explorer/src/icons/NetworksSVG.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 
-export const NetworkComponentsSVG: React.FC = () => {
+export const NetworkComponentsSVG: FCWithChildren = () => {
   const theme = useTheme();
   const color = theme.palette.nym.networkExplorer.nav.text;
   return (
diff --git a/explorer/src/icons/NodemapSVG.tsx b/explorer/src/icons/NodemapSVG.tsx
index baefa019e0..9486d64dcc 100644
--- a/explorer/src/icons/NodemapSVG.tsx
+++ b/explorer/src/icons/NodemapSVG.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 
-export const NodemapSVG: React.FC = () => {
+export const NodemapSVG: FCWithChildren = () => {
   const theme = useTheme();
   const color = theme.palette.nym.networkExplorer.nav.text;
   return (
diff --git a/explorer/src/icons/OverviewSVG.tsx b/explorer/src/icons/OverviewSVG.tsx
index fc96bebc82..2ced0bb17b 100644
--- a/explorer/src/icons/OverviewSVG.tsx
+++ b/explorer/src/icons/OverviewSVG.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 
-export const OverviewSVG: React.FC = () => {
+export const OverviewSVG: FCWithChildren = () => {
   const theme = useTheme();
   const color = theme.palette.nym.networkExplorer.nav.text;
 
diff --git a/explorer/src/icons/ValidatorsSVG.tsx b/explorer/src/icons/ValidatorsSVG.tsx
index cda3f07841..cf03f1c330 100644
--- a/explorer/src/icons/ValidatorsSVG.tsx
+++ b/explorer/src/icons/ValidatorsSVG.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 
-export const ValidatorsSVG: React.FC = () => {
+export const ValidatorsSVG: FCWithChildren = () => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
diff --git a/explorer/src/icons/socials/DiscordIcon.tsx b/explorer/src/icons/socials/DiscordIcon.tsx
index 6f45043928..11a9fd1c67 100644
--- a/explorer/src/icons/socials/DiscordIcon.tsx
+++ b/explorer/src/icons/socials/DiscordIcon.tsx
@@ -6,7 +6,7 @@ interface DiscordIconProps {
   color?: string;
 }
 
-export const DiscordIcon: React.FC<DiscordIconProps> = ({ size, color: colorProp }) => {
+export const DiscordIcon: FCWithChildren<DiscordIconProps> = ({ size, color: colorProp }) => {
   const theme = useTheme();
   const color = colorProp || theme.palette.text.primary;
   return (
diff --git a/explorer/src/icons/socials/GitHubIcon.tsx b/explorer/src/icons/socials/GitHubIcon.tsx
index 31d5da5237..a8fde9b0a9 100644
--- a/explorer/src/icons/socials/GitHubIcon.tsx
+++ b/explorer/src/icons/socials/GitHubIcon.tsx
@@ -6,7 +6,7 @@ interface GitHubIconProps {
   color?: string;
 }
 
-export const GitHubIcon: React.FC<GitHubIconProps> = ({ size, color: colorProp }) => {
+export const GitHubIcon: FCWithChildren<GitHubIconProps> = ({ size, color: colorProp }) => {
   const theme = useTheme();
   const color = colorProp || theme.palette.text.primary;
   return (
diff --git a/explorer/src/icons/socials/TelegramIcon.tsx b/explorer/src/icons/socials/TelegramIcon.tsx
index 690a4940ef..cf150a4a2f 100644
--- a/explorer/src/icons/socials/TelegramIcon.tsx
+++ b/explorer/src/icons/socials/TelegramIcon.tsx
@@ -6,7 +6,7 @@ interface TelegramIconProps {
   color?: string;
 }
 
-export const TelegramIcon: React.FC<TelegramIconProps> = ({ size, color: colorProp }) => {
+export const TelegramIcon: FCWithChildren<TelegramIconProps> = ({ size, color: colorProp }) => {
   const theme = useTheme();
   const color = colorProp || theme.palette.text.primary;
   return (
diff --git a/explorer/src/icons/socials/TwitterIcon.tsx b/explorer/src/icons/socials/TwitterIcon.tsx
index fd491ec17f..6f0b545f56 100644
--- a/explorer/src/icons/socials/TwitterIcon.tsx
+++ b/explorer/src/icons/socials/TwitterIcon.tsx
@@ -6,7 +6,7 @@ interface TwitterIconProps {
   color?: string;
 }
 
-export const TwitterIcon: React.FC<TwitterIconProps> = ({ size, color: colorProp }) => {
+export const TwitterIcon: FCWithChildren<TwitterIconProps> = ({ size, color: colorProp }) => {
   const theme = useTheme();
   const color = colorProp || theme.palette.text.primary;
   return (
diff --git a/explorer/src/index.tsx b/explorer/src/index.tsx
index c2df6abc15..49d85c30a2 100644
--- a/explorer/src/index.tsx
+++ b/explorer/src/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 import { App } from './App';
@@ -8,15 +8,19 @@ import './styles.css';
 import { NetworkExplorerThemeProvider } from './theme';
 import { ErrorBoundaryContent } from './errors/ErrorBoundaryContent';
 
-ReactDOM.render(
-  <ErrorBoundary FallbackComponent={ErrorBoundaryContent}>
-    <MainContextProvider>
-      <NetworkExplorerThemeProvider>
-        <Router>
-          <App />
-        </Router>
-      </NetworkExplorerThemeProvider>
-    </MainContextProvider>
-  </ErrorBoundary>,
-  document.getElementById('app'),
-);
+const elem = document.getElementById('app');
+
+if (elem) {
+  const root = createRoot(elem);
+  root.render(
+    <ErrorBoundary FallbackComponent={ErrorBoundaryContent}>
+      <MainContextProvider>
+        <NetworkExplorerThemeProvider>
+          <Router>
+            <App />
+          </Router>
+        </NetworkExplorerThemeProvider>
+      </MainContextProvider>
+    </ErrorBoundary>,
+  );
+}
diff --git a/explorer/src/pages/404/index.tsx b/explorer/src/pages/404/index.tsx
index 0adc103ba9..02f4247fc5 100644
--- a/explorer/src/pages/404/index.tsx
+++ b/explorer/src/pages/404/index.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { NymLogo } from '@nymproject/react/logo/NymLogo';
 import { useMainContext } from '../../context/main';
 
-export const Page404: React.FC = () => {
+export const Page404 = () => {
   const navigate = useNavigate();
   const { mode } = useMainContext();
   const theme = useTheme();
diff --git a/explorer/src/pages/GatewayDetail/index.tsx b/explorer/src/pages/GatewayDetail/index.tsx
index 3372ded2a7..752b1be58a 100644
--- a/explorer/src/pages/GatewayDetail/index.tsx
+++ b/explorer/src/pages/GatewayDetail/index.tsx
@@ -129,7 +129,7 @@ const PageGatewayDetailsWithState = ({ selectedGateway }: { selectedGateway: Gat
 /**
  * Guard component to handle loading and not found states
  */
-const PageGatewayDetailGuard: React.FC = () => {
+const PageGatewayDetailGuard: FCWithChildren = () => {
   const [selectedGateway, setSelectedGateway] = React.useState<GatewayResponseItem | undefined>();
   const { gateways } = useMainContext();
   const { id } = useParams<{ id: string | undefined }>();
@@ -170,7 +170,7 @@ const PageGatewayDetailGuard: React.FC = () => {
 /**
  * Wrapper component that adds the mixnode content based on the `id` in the address URL
  */
-export const PageGatewayDetail: React.FC = () => {
+export const PageGatewayDetail: FCWithChildren = () => {
   const { id } = useParams<{ id: string | undefined }>();
 
   if (!id) {
diff --git a/explorer/src/pages/Gateways/index.tsx b/explorer/src/pages/Gateways/index.tsx
index f35f7382b4..17f73a8db2 100644
--- a/explorer/src/pages/Gateways/index.tsx
+++ b/explorer/src/pages/Gateways/index.tsx
@@ -15,7 +15,7 @@ import { Tooltip } from '../../components/Tooltip';
 import { BIG_DIPPER } from '../../api/constants';
 import { splice } from '../../utils';
 
-export const PageGateways: React.FC = () => {
+export const PageGateways: FCWithChildren = () => {
   const { gateways } = useMainContext();
   const [filteredGateways, setFilteredGateways] = React.useState<GatewayResponse>([]);
   const [pageSize, setPageSize] = React.useState<string>('50');
diff --git a/explorer/src/pages/MixnodeDetail/index.tsx b/explorer/src/pages/MixnodeDetail/index.tsx
index 95e18ea603..776eda4504 100644
--- a/explorer/src/pages/MixnodeDetail/index.tsx
+++ b/explorer/src/pages/MixnodeDetail/index.tsx
@@ -62,7 +62,7 @@ const columns: ColumnsType[] = [
 /**
  * Shows mix node details
  */
-const PageMixnodeDetailWithState: React.FC = () => {
+const PageMixnodeDetailWithState: FCWithChildren = () => {
   const { mixNode, mixNodeRow, description, stats, status, uptimeStory, uniqDelegations } = useMixnodeContext();
 
   return (
@@ -181,7 +181,7 @@ const PageMixnodeDetailWithState: React.FC = () => {
 /**
  * Guard component to handle loading and not found states
  */
-const PageMixnodeDetailGuard: React.FC = () => {
+const PageMixnodeDetailGuard: FCWithChildren = () => {
   const { mixNode } = useMixnodeContext();
   const { id } = useParams<{ id: string | undefined }>();
 
@@ -215,7 +215,7 @@ const PageMixnodeDetailGuard: React.FC = () => {
 /**
  * Wrapper component that adds the mixnode content based on the `id` in the address URL
  */
-export const PageMixnodeDetail: React.FC = () => {
+export const PageMixnodeDetail: FCWithChildren = () => {
   const { id } = useParams<{ id: string | undefined }>();
 
   if (!id) {
diff --git a/explorer/src/pages/Mixnodes/index.tsx b/explorer/src/pages/Mixnodes/index.tsx
index c502799c54..7d2440b796 100644
--- a/explorer/src/pages/Mixnodes/index.tsx
+++ b/explorer/src/pages/Mixnodes/index.tsx
@@ -35,7 +35,7 @@ const getCellStyles = (theme: Theme, row: MixnodeRowType, textColor?: string): S
   ...getCellFontStyle(theme, row, textColor),
 });
 
-export const PageMixnodes: React.FC = () => {
+export const PageMixnodes: FCWithChildren = () => {
   const { mixnodes, fetchMixnodes } = useMainContext();
   const [filteredMixnodes, setFilteredMixnodes] = React.useState<MixNodeResponse>([]);
   const [pageSize, setPageSize] = React.useState<string>('10');
diff --git a/explorer/src/pages/MixnodesMap/index.tsx b/explorer/src/pages/MixnodesMap/index.tsx
index e2bd5210ff..c6148cb894 100644
--- a/explorer/src/pages/MixnodesMap/index.tsx
+++ b/explorer/src/pages/MixnodesMap/index.tsx
@@ -10,7 +10,7 @@ import { WorldMap } from '../../components/WorldMap';
 import { useMainContext } from '../../context/main';
 import { CountryDataRowType, countryDataToGridRow } from '../../utils';
 
-export const PageMixnodesMap: React.FC = () => {
+export const PageMixnodesMap: FCWithChildren = () => {
   const { countryData } = useMainContext();
   const [pageSize, setPageSize] = React.useState<string>('10');
   const [formattedCountries, setFormattedCountries] = React.useState<CountryDataRowType[]>([]);
@@ -115,5 +115,10 @@ export const PageMixnodesMap: React.FC = () => {
       </Box>
     );
   }
-  return <Alert severity="error">{countryData?.error}</Alert>;
+
+  if (countryData?.error) {
+    return <Alert severity="error">{countryData.error.message}</Alert>;
+  }
+
+  return null;
 };
diff --git a/explorer/src/pages/Overview/index.tsx b/explorer/src/pages/Overview/index.tsx
index 06e3d241bc..7213035542 100644
--- a/explorer/src/pages/Overview/index.tsx
+++ b/explorer/src/pages/Overview/index.tsx
@@ -15,7 +15,7 @@ import { ContentCard } from '../../components/ContentCard';
 import { StatsCard } from '../../components/StatsCard';
 import { Icons } from '../../components/Icons';
 
-export const PageOverview: React.FC = () => {
+export const PageOverview: FCWithChildren = () => {
   const theme = useTheme();
   const navigate = useNavigate();
   const { summaryOverview, gateways, validators, block, countryData } = useMainContext();
diff --git a/explorer/src/routes/index.tsx b/explorer/src/routes/index.tsx
index 2ac30a6d41..57e015495d 100644
--- a/explorer/src/routes/index.tsx
+++ b/explorer/src/routes/index.tsx
@@ -5,11 +5,11 @@ import { PageMixnodesMap } from '../pages/MixnodesMap';
 import { Page404 } from '../pages/404';
 import { NetworkComponentsRoutes } from './network-components';
 
-export const Routes: React.FC = () => (
+export const Routes: FCWithChildren = () => (
   <ReactRouterRoutes>
     <Route path="/" element={<PageOverview />} />
     <Route path="/network-components/*" element={<NetworkComponentsRoutes />} />
     <Route path="/nodemap" element={<PageMixnodesMap />} />
-    <Route path="*" element={Page404} />
+    <Route path="*" element={<Page404 />} />
   </ReactRouterRoutes>
 );
diff --git a/explorer/src/routes/network-components.tsx b/explorer/src/routes/network-components.tsx
index 0118641b2e..9bd51dbc33 100644
--- a/explorer/src/routes/network-components.tsx
+++ b/explorer/src/routes/network-components.tsx
@@ -6,14 +6,14 @@ import { PageGatewayDetail } from '../pages/GatewayDetail';
 import { PageMixnodeDetail } from '../pages/MixnodeDetail';
 import { PageMixnodes } from '../pages/Mixnodes';
 
-const ValidatorRoute: React.FC = () => {
+const ValidatorRoute: FCWithChildren = () => {
   const navigate = useNavigate();
   window.open(`${BIG_DIPPER}/validators`);
   navigate(-1);
   return null;
 };
 
-export const NetworkComponentsRoutes: React.FC = () => (
+export const NetworkComponentsRoutes: FCWithChildren = () => (
   <ReactRouterRoutes>
     <Route path="mixnodes/:status" element={<PageMixnodes />} />
     <Route path="mixnodes" element={<PageMixnodes />} />
diff --git a/explorer/src/theme/index.tsx b/explorer/src/theme/index.tsx
index 00b498fbc3..3542bd9c9a 100644
--- a/explorer/src/theme/index.tsx
+++ b/explorer/src/theme/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NymNetworkExplorerThemeProvider } from '@nymproject/mui-theme';
 import { useMainContext } from '../context/main';
 
-export const NetworkExplorerThemeProvider: React.FC = ({ children }) => {
+export const NetworkExplorerThemeProvider: FCWithChildren = ({ children }) => {
   const { mode } = useMainContext();
   return <NymNetworkExplorerThemeProvider mode={mode}>{children}</NymNetworkExplorerThemeProvider>;
 };
diff --git a/explorer/src/typings/FC.d.ts b/explorer/src/typings/FC.d.ts
new file mode 100644
index 0000000000..08ebdfa298
--- /dev/null
+++ b/explorer/src/typings/FC.d.ts
@@ -0,0 +1 @@
+declare type FCWithChildren<P = {}> = React.FC<React.PropsWithChildren<P>>;
diff --git a/nym-connect/package.json b/nym-connect/package.json
index 7b970b9d1b..88d9ad17f6 100644
--- a/nym-connect/package.json
+++ b/nym-connect/package.json
@@ -36,8 +36,8 @@
     "clsx": "^1.1.1",
     "luxon": "^2.3.0",
     "pretty-bytes": "^6.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.3",
     "react-hook-form": "^7.14.2",
     "react-markdown": "^8.0.4",
@@ -62,8 +62,8 @@
     "@types/jest": "^27.0.1",
     "@types/luxon": "^2.3.2",
     "@types/node": "^16.7.13",
-    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "@types/semver": "^7.3.8",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
diff --git a/nym-connect/src/App.tsx b/nym-connect/src/App.tsx
index 9d5afd1427..8779b92c90 100644
--- a/nym-connect/src/App.tsx
+++ b/nym-connect/src/App.tsx
@@ -8,7 +8,7 @@ import { ConnectedLayout } from './layouts/ConnectedLayout';
 import { HelpGuideLayout } from './layouts/HelpGuideLayout';
 import { useTauriEvents } from './utils';
 
-export const App: React.FC = () => {
+export const App: FCWithChildren = () => {
   const context = useClientContext();
   const [busy, setBusy] = React.useState<boolean>();
   const [showInfoModal, setShowInfoModal] = React.useState(false);
diff --git a/nym-connect/src/components/AppWindowFrame.tsx b/nym-connect/src/components/AppWindowFrame.tsx
index 3abc14a8e6..89a68f7f66 100644
--- a/nym-connect/src/components/AppWindowFrame.tsx
+++ b/nym-connect/src/components/AppWindowFrame.tsx
@@ -3,7 +3,7 @@ import { Box } from '@mui/material';
 import { CustomTitleBar } from './CustomTitleBar';
 import { AppVersion } from './AppVersion';
 
-export const AppWindowFrame: React.FC = ({ children }) => (
+export const AppWindowFrame: FCWithChildren = ({ children }) => (
   <Box
     sx={{
       display: 'grid',
diff --git a/nym-connect/src/components/ConnectionButton.tsx b/nym-connect/src/components/ConnectionButton.tsx
index 6d8a592681..74f4846519 100644
--- a/nym-connect/src/components/ConnectionButton.tsx
+++ b/nym-connect/src/components/ConnectionButton.tsx
@@ -51,7 +51,7 @@ const getStatusText = (status: ConnectionStatusKind, hover: boolean): string =>
   }
 };
 
-export const ConnectionButton: React.FC<{
+export const ConnectionButton: FCWithChildren<{
   status: ConnectionStatusKind;
   disabled?: boolean;
   busy?: boolean;
diff --git a/nym-connect/src/components/ConnectionStats.tsx b/nym-connect/src/components/ConnectionStats.tsx
index 102ab29a2c..f17833e66d 100644
--- a/nym-connect/src/components/ConnectionStats.tsx
+++ b/nym-connect/src/components/ConnectionStats.tsx
@@ -10,7 +10,7 @@ export interface ConnectionStatsItem {
 
 const FONT_SIZE = '14px';
 
-export const ConnectionStats: React.FC<{
+export const ConnectionStats: FCWithChildren<{
   stats: ConnectionStatsItem[];
 }> = ({ stats }) => (
   <Box color="rgba(255,255,255,0.6)" width="100%" display="flex" justifyContent="space-between">
diff --git a/nym-connect/src/components/ConnectionStatus.tsx b/nym-connect/src/components/ConnectionStatus.tsx
index c2f9add9ad..f05c746672 100644
--- a/nym-connect/src/components/ConnectionStatus.tsx
+++ b/nym-connect/src/components/ConnectionStatus.tsx
@@ -9,7 +9,7 @@ const FONT_SIZE = '10px';
 const FONT_WEIGHT = '600';
 const FONT_STYLE = 'normal';
 
-const ConnectionStatusContent: React.FC<{
+const ConnectionStatusContent: FCWithChildren<{
   status: ConnectionStatusKind;
 }> = ({ status }) => {
   switch (status) {
@@ -56,7 +56,7 @@ const ConnectionStatusContent: React.FC<{
   }
 };
 
-export const ConnectionStatus: React.FC<{
+export const ConnectionStatus: FCWithChildren<{
   status: ConnectionStatusKind;
   connectedSince?: DateTime;
   serviceProvider?: ServiceProvider;
diff --git a/nym-connect/src/components/Growth/TestAndEarnButtonArea.tsx b/nym-connect/src/components/Growth/TestAndEarnButtonArea.tsx
index ed6219e31f..e3f8372c60 100644
--- a/nym-connect/src/components/Growth/TestAndEarnButtonArea.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnButtonArea.tsx
@@ -8,7 +8,7 @@ import { useTestAndEarnContext } from './context/TestAndEarnContext';
 import { NymShipyardTheme } from '../../theme';
 import { ConnectionStatusKind } from '../../types';
 
-export const Wrapper: React.FC<{ disabled: boolean }> = ({ disabled, children }) => {
+export const Wrapper: FCWithChildren<{ disabled: boolean }> = ({ disabled, children }) => {
   if (disabled) {
     return (
       <Badge badgeContent="!" color="warning">
@@ -21,7 +21,7 @@ export const Wrapper: React.FC<{ disabled: boolean }> = ({ disabled, children })
   return <>{children}</>;
 };
 
-export const TestAndEarnButtonArea: React.FC = () => {
+export const TestAndEarnButtonArea: FCWithChildren = () => {
   const clientContext = useClientContext();
   const context = useTestAndEarnContext();
   const disabled = clientContext.connectionStatus !== ConnectionStatusKind.connected;
diff --git a/nym-connect/src/components/Growth/TestAndEarnCurrentDraw.tsx b/nym-connect/src/components/Growth/TestAndEarnCurrentDraw.tsx
index b9b029c414..f5bd5a7003 100644
--- a/nym-connect/src/components/Growth/TestAndEarnCurrentDraw.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnCurrentDraw.tsx
@@ -10,7 +10,7 @@ import { useTestAndEarnContext } from './context/TestAndEarnContext';
 import { DrawEntryStatus, DrawWithWordOfTheDay } from './context/types';
 import Content from './content/en.yaml';
 
-export const TestAndEarnCurrentDrawFuture: React.FC<{ draw?: DrawWithWordOfTheDay }> = ({ draw }) => {
+export const TestAndEarnCurrentDrawFuture: FCWithChildren<{ draw?: DrawWithWordOfTheDay }> = ({ draw }) => {
   const startsUtc = React.useMemo(() => draw && DateTime.fromISO(draw.start_utc), [draw?.start_utc]);
   const startsIn = React.useMemo(() => {
     if (draw && startsUtc) {
@@ -34,7 +34,7 @@ export const TestAndEarnCurrentDrawFuture: React.FC<{ draw?: DrawWithWordOfTheDa
   );
 };
 
-export const TestAndEarnCurrentDrawEnter: React.FC<{ draw?: DrawWithWordOfTheDay }> = ({ draw }) => {
+export const TestAndEarnCurrentDrawEnter: FCWithChildren<{ draw?: DrawWithWordOfTheDay }> = ({ draw }) => {
   const context = useTestAndEarnContext();
   const [busy, setBusy] = React.useState(false);
   const [error, setError] = React.useState<string>();
@@ -72,7 +72,7 @@ export const TestAndEarnCurrentDrawEnter: React.FC<{ draw?: DrawWithWordOfTheDay
   );
 };
 
-export const TestAndEarnCurrentDrawEntered: React.FC<{ draw?: DrawWithWordOfTheDay }> = ({ draw }) => {
+export const TestAndEarnCurrentDrawEntered: FCWithChildren<{ draw?: DrawWithWordOfTheDay }> = ({ draw }) => {
   if (!draw || !draw.entry) {
     return null;
   }
@@ -131,7 +131,7 @@ export const TestAndEarnCurrentDrawEntered: React.FC<{ draw?: DrawWithWordOfTheD
   );
 };
 
-export const TestAndEarnCurrentDraw: React.FC<{
+export const TestAndEarnCurrentDraw: FCWithChildren<{
   draw?: DrawWithWordOfTheDay;
   sx?: SxProps;
 }> = ({ draw, sx }) => {
@@ -171,7 +171,7 @@ export const TestAndEarnCurrentDraw: React.FC<{
   return null;
 };
 
-export const TestAndEarnCurrentDrawWithState: React.FC<{
+export const TestAndEarnCurrentDrawWithState: FCWithChildren<{
   sx?: SxProps;
 }> = ({ sx }) => {
   const context = useTestAndEarnContext();
diff --git a/nym-connect/src/components/Growth/TestAndEarnDraws.tsx b/nym-connect/src/components/Growth/TestAndEarnDraws.tsx
index 6dd9b8954a..929313982e 100644
--- a/nym-connect/src/components/Growth/TestAndEarnDraws.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnDraws.tsx
@@ -39,7 +39,7 @@ const statusToColor = (status: string): 'info' | 'success' | 'warning' | undefin
   }
 };
 
-const StatusText: React.FC<{ entry: DrawEntry }> = ({ entry }) => {
+const StatusText: FCWithChildren<{ entry: DrawEntry }> = ({ entry }) => {
   const context = useTestAndEarnContext();
   const [busy, setBusy] = React.useState(false);
   const [error, setError] = React.useState<string>();
@@ -132,7 +132,7 @@ const StatusText: React.FC<{ entry: DrawEntry }> = ({ entry }) => {
   }
 };
 
-export const TestAndEarnDraws: React.FC<{
+export const TestAndEarnDraws: FCWithChildren<{
   sx?: SxProps;
 }> = ({ sx }) => {
   const context = useTestAndEarnContext();
@@ -181,7 +181,7 @@ export const TestAndEarnDraws: React.FC<{
   );
 };
 
-export const TestAndEarnDrawsWithState: React.FC<{
+export const TestAndEarnDrawsWithState: FCWithChildren<{
   sx?: SxProps;
 }> = ({ sx }) => {
   const context = useTestAndEarnContext();
diff --git a/nym-connect/src/components/Growth/TestAndEarnEnterWalletAddress.tsx b/nym-connect/src/components/Growth/TestAndEarnEnterWalletAddress.tsx
index 80d7f2de5b..efafc67d50 100644
--- a/nym-connect/src/components/Growth/TestAndEarnEnterWalletAddress.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnEnterWalletAddress.tsx
@@ -5,7 +5,7 @@ import { Paper, Stack, Button, Box } from '@mui/material';
 import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
 import { useTestAndEarnContext } from './context/TestAndEarnContext';
 
-export const TestAndEarnEnterWalletAddress: React.FC<{
+export const TestAndEarnEnterWalletAddress: FCWithChildren<{
   initialValue?: string;
   placeholder?: string;
   onSubmit?: () => Promise<void> | void;
diff --git a/nym-connect/src/components/Growth/TestAndEarnError.tsx b/nym-connect/src/components/Growth/TestAndEarnError.tsx
index 3fcf4efb59..1ad4f94cc8 100644
--- a/nym-connect/src/components/Growth/TestAndEarnError.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnError.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Button } from '@mui/material';
 
-export const TestAndEarnError: React.FC<{ error?: string }> = ({ error = 'An error has occurred' }) => (
+export const TestAndEarnError: FCWithChildren<{ error?: string }> = ({ error = 'An error has occurred' }) => (
   <Box>
     <Box mb={4} fontWeight="bold">
       {error}
diff --git a/nym-connect/src/components/Growth/TestAndEarnPopup.stories.tsx b/nym-connect/src/components/Growth/TestAndEarnPopup.stories.tsx
index ac38ec1d4b..ec5da3282a 100644
--- a/nym-connect/src/components/Growth/TestAndEarnPopup.stories.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnPopup.stories.tsx
@@ -29,12 +29,12 @@ export default {
   component: TestAndEarnPopupContent,
 } as ComponentMeta<typeof TestAndEarnPopupContent>;
 
-const MacOSWindow: React.FC<{ width?: string | number; height?: string | number; title?: string }> = ({
-  title,
-  width,
-  height,
-  children,
-}) => (
+const MacOSWindow: FCWithChildren<{
+  width?: string | number;
+  height?: string | number;
+  title?: string;
+  children: React.ReactNode;
+}> = ({ title, width, height, children }) => (
   <Box sx={{ border: '1px solid #EEEEEE', width, height }}>
     <Box sx={{ background: '#EEEEEE', display: 'grid', gridTemplateColumns: 'auto auto', gridTemplateRows: 'auto' }}>
       <Box ml={1}>
@@ -67,7 +67,7 @@ const MacOSWindow: React.FC<{ width?: string | number; height?: string | number;
   </Box>
 );
 
-const Wrapper: React.FC<{ text: React.ReactNode }> = ({ text }) => (
+const Wrapper: FCWithChildren<{ text: React.ReactNode }> = ({ text }) => (
   <NymShipyardTheme>
     <Alert severity="info" sx={{ mb: 4 }}>
       {text}
diff --git a/nym-connect/src/components/Growth/TestAndEarnPopup.tsx b/nym-connect/src/components/Growth/TestAndEarnPopup.tsx
index 73e8008069..dc1148c1e5 100644
--- a/nym-connect/src/components/Growth/TestAndEarnPopup.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnPopup.tsx
@@ -15,7 +15,7 @@ enum Stages {
   registered = 'registered',
 }
 
-export const TestAndEarnPopupContent: React.FC<{
+export const TestAndEarnPopupContent: FCWithChildren<{
   stage?: string;
   connectionStatus?: ConnectionStatusKind;
   error?: string;
@@ -72,7 +72,7 @@ export const TestAndEarnPopupContent: React.FC<{
   }
 };
 
-export const TestAndEarnPopup: React.FC = () => {
+export const TestAndEarnPopup: FCWithChildren = () => {
   const clientContext = useClientContext();
   const context = useTestAndEarnContext();
 
diff --git a/nym-connect/src/components/Growth/TestAndEarnTakePart.tsx b/nym-connect/src/components/Growth/TestAndEarnTakePart.tsx
index c5b08975f2..b447c9c735 100644
--- a/nym-connect/src/components/Growth/TestAndEarnTakePart.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnTakePart.tsx
@@ -7,7 +7,7 @@ import { invoke } from '@tauri-apps/api';
 import { useTestAndEarnContext } from './context/TestAndEarnContext';
 import { ClientId, Registration } from './context/types';
 
-export const TestAndEarnTakePart: React.FC<{
+export const TestAndEarnTakePart: FCWithChildren<{
   websiteLinkUrl: string;
   websiteLinkText: string;
   content: string;
diff --git a/nym-connect/src/components/Growth/TestAndEarnWinner.tsx b/nym-connect/src/components/Growth/TestAndEarnWinner.tsx
index 600d8f6f4b..980e285a99 100644
--- a/nym-connect/src/components/Growth/TestAndEarnWinner.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnWinner.tsx
@@ -8,7 +8,7 @@ import { DrawEntry, DrawEntryStatus } from './context/types';
 import { TestAndEarnEnterWalletAddress } from './TestAndEarnEnterWalletAddress';
 import Content from './content/en.yaml';
 
-export const TestAndEarnWinner: React.FC<{
+export const TestAndEarnWinner: FCWithChildren<{
   sx?: SxProps;
   entry?: DrawEntry;
 }> = ({ sx, entry }) => {
@@ -100,7 +100,7 @@ export const TestAndEarnWinner: React.FC<{
   );
 };
 
-export const TestAndEarnWinnerWithState: React.FC<{
+export const TestAndEarnWinnerWithState: FCWithChildren<{
   sx?: SxProps;
 }> = ({ sx }) => {
   const context = useTestAndEarnContext();
diff --git a/nym-connect/src/components/Growth/TestAndEarnWinnerWalletAddress.tsx b/nym-connect/src/components/Growth/TestAndEarnWinnerWalletAddress.tsx
index 8592b651dd..f07593b828 100644
--- a/nym-connect/src/components/Growth/TestAndEarnWinnerWalletAddress.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnWinnerWalletAddress.tsx
@@ -3,7 +3,7 @@ import { Box, Button, Card, CardContent, CardMedia, Typography } from '@mui/mate
 import { SxProps } from '@mui/system';
 import Content from './content/TestAndEarn/WinnerEntersWalletAddress.mdx';
 
-export const TestAndEarnWinnerWalletAddress: React.FC<{
+export const TestAndEarnWinnerWalletAddress: FCWithChildren<{
   sx?: SxProps;
 }> = ({ sx }) => (
   <Box>
diff --git a/nym-connect/src/components/Growth/context/TestAndEarnContext.tsx b/nym-connect/src/components/Growth/context/TestAndEarnContext.tsx
index f70e8a407d..a28fd221e2 100644
--- a/nym-connect/src/components/Growth/context/TestAndEarnContext.tsx
+++ b/nym-connect/src/components/Growth/context/TestAndEarnContext.tsx
@@ -44,7 +44,7 @@ export const TestAndEarnContext = createContext(defaultValue);
 const CLIENT_ID_KEY = 'tne_client_id';
 const REGISTRATION_KEY = 'tne_registration';
 
-export const TestAndEarnContextProvider = ({ children }: { children: React.ReactNode }) => {
+export const TestAndEarnContextProvider: FCWithChildren = ({ children }) => {
   const clientContext = useClientContext();
   const [loadedOnce, setLoadedOnce] = useState(false);
   const [loading, setLoading] = useState(true);
diff --git a/nym-connect/src/components/Growth/context/mocks/TestAndEarnContext.tsx b/nym-connect/src/components/Growth/context/mocks/TestAndEarnContext.tsx
index 215367d643..b4388ddb72 100644
--- a/nym-connect/src/components/Growth/context/mocks/TestAndEarnContext.tsx
+++ b/nym-connect/src/components/Growth/context/mocks/TestAndEarnContext.tsx
@@ -21,7 +21,7 @@ const mockValues_NotRegistered: TTestAndEarnContext = {
   ...methodDefaults,
 };
 
-export const MockTestAndEarnProvider_NotRegistered = ({ children }: { children: React.ReactNode }) => (
+export const MockTestAndEarnProvider_NotRegistered: FCWithChildren = ({ children }) => (
   <TestAndEarnContext.Provider value={mockValues_NotRegistered}>{children}</TestAndEarnContext.Provider>
 );
 
@@ -43,7 +43,7 @@ const mockValues_Registered: TTestAndEarnContext = {
   },
 };
 
-export const MockTestAndEarnProvider_Registered = ({ children }: { children: React.ReactNode }) => (
+export const MockTestAndEarnProvider_Registered: FCWithChildren = ({ children }) => (
   <TestAndEarnContext.Provider value={mockValues_Registered}>{children}</TestAndEarnContext.Provider>
 );
 
@@ -137,7 +137,7 @@ const mockValues_RegisteredWithAllDrawsAndEntry: TTestAndEarnContext = {
   },
 };
 
-export const MockTestAndEarnProvider_RegisteredWithAllDraws = ({ children }: { children: React.ReactNode }) => (
+export const MockTestAndEarnProvider_RegisteredWithAllDraws: FCWithChildren = ({ children }) => (
   <TestAndEarnContext.Provider value={mockValues_RegisteredWithAllDrawsAndEntry}>
     {children}
   </TestAndEarnContext.Provider>
@@ -150,7 +150,7 @@ const mockValues_RegisteredWithDrawsNoCurrent: TTestAndEarnContext = {
   },
 };
 
-export const MockTestAndEarnProvider_RegisteredWithDrawsNoCurrent = ({ children }: { children: React.ReactNode }) => (
+export const MockTestAndEarnProvider_RegisteredWithDrawsNoCurrent: FCWithChildren = ({ children }) => (
   <TestAndEarnContext.Provider value={mockValues_RegisteredWithDrawsNoCurrent}>{children}</TestAndEarnContext.Provider>
 );
 
@@ -162,7 +162,7 @@ const mockValues_RegisteredWithDraws: TTestAndEarnContext = {
   },
 };
 
-export const MockTestAndEarnProvider_RegisteredWithDraws = ({ children }: { children: React.ReactNode }) => (
+export const MockTestAndEarnProvider_RegisteredWithDraws: FCWithChildren = ({ children }) => (
   <TestAndEarnContext.Provider value={mockValues_RegisteredWithDraws}>{children}</TestAndEarnContext.Provider>
 );
 
@@ -177,7 +177,7 @@ const mockValues_RegisteredWithDrawsAndEntry: TTestAndEarnContext = {
   },
 };
 
-export const MockTestAndEarnProvider_RegisteredWithDrawsAndEntry = ({ children }: { children: React.ReactNode }) => (
+export const MockTestAndEarnProvider_RegisteredWithDrawsAndEntry: FCWithChildren = ({ children }) => (
   <TestAndEarnContext.Provider value={mockValues_RegisteredWithDrawsAndEntry}>{children}</TestAndEarnContext.Provider>
 );
 
@@ -257,6 +257,6 @@ const mockValues_RegisteredAndError: TTestAndEarnContext = {
   error: 'Error message text will go here',
 };
 
-export const MockTestAndEarnProvider_RegisteredAndError = ({ children }: { children: React.ReactNode }) => (
+export const MockTestAndEarnProvider_RegisteredAndError: FCWithChildren = ({ children }) => (
   <TestAndEarnContext.Provider value={mockValues_RegisteredAndError}>{children}</TestAndEarnContext.Provider>
 );
diff --git a/nym-connect/src/components/IpAddressAndPort.tsx b/nym-connect/src/components/IpAddressAndPort.tsx
index 8d7d79c1f2..4e7618ed87 100644
--- a/nym-connect/src/components/IpAddressAndPort.tsx
+++ b/nym-connect/src/components/IpAddressAndPort.tsx
@@ -14,7 +14,7 @@ const IpAddressAndPortContainer = styled('div')({
   },
 });
 
-export const IpAddressAndPort: React.FC<{
+export const IpAddressAndPort: FCWithChildren<{
   label: string;
   ipAddress: string;
   port: number;
diff --git a/nym-connect/src/components/NeedHelp.tsx b/nym-connect/src/components/NeedHelp.tsx
index ce30e0883c..12d9587a5f 100644
--- a/nym-connect/src/components/NeedHelp.tsx
+++ b/nym-connect/src/components/NeedHelp.tsx
@@ -4,7 +4,7 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
 const HELP_URL = 'https://docs.nymtech.net';
 
-export const NeedHelp: React.FC = () => (
+export const NeedHelp: FCWithChildren = () => (
   <Box sx={{ display: 'grid', placeItems: 'center' }}>
     <Button component="a" href={HELP_URL} target="_blank" sx={{ fontSize: '12px', fontWeight: '600' }} color="info">
       <HelpOutlineIcon color="inherit" fontSize="inherit" fontWeight="inherit" />
diff --git a/nym-connect/src/components/ServiceProviderPopup.tsx b/nym-connect/src/components/ServiceProviderPopup.tsx
index 27ecfba127..79a47c375a 100644
--- a/nym-connect/src/components/ServiceProviderPopup.tsx
+++ b/nym-connect/src/components/ServiceProviderPopup.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Autocomplete, Box, Chip, Dialog, DialogProps, TextField, Typography } from '@mui/material';
 import { ServiceProvider, Service, Services } from '../types/directory';
 
-export const ServiceProviderPopup: React.FC<
+export const ServiceProviderPopup: FCWithChildren<
   DialogProps & { services: Services; onServiceProviderChanged: (sp?: ServiceProvider, s?: Service) => void }
 > = ({ services, onServiceProviderChanged, ...dialogProps }) => {
   const options = services.flatMap((s) =>
diff --git a/nym-connect/src/components/ServiceProviderSelector.tsx b/nym-connect/src/components/ServiceProviderSelector.tsx
index 16086aa5e1..52bdfece50 100644
--- a/nym-connect/src/components/ServiceProviderSelector.tsx
+++ b/nym-connect/src/components/ServiceProviderSelector.tsx
@@ -11,7 +11,7 @@ type ServiceWithRandomSp = {
 
 const defaultServiceValue = { id: '', description: '', items: [] };
 
-export const ServiceProviderSelector: React.FC<{
+export const ServiceProviderSelector: FCWithChildren<{
   onChange?: (serviceProvider?: ServiceProvider) => void;
   services?: Services;
   currentSp?: ServiceProvider;
diff --git a/nym-connect/src/components/ServiceSelector.tsx b/nym-connect/src/components/ServiceSelector.tsx
index 895188cd23..5eb8361d3c 100644
--- a/nym-connect/src/components/ServiceSelector.tsx
+++ b/nym-connect/src/components/ServiceSelector.tsx
@@ -14,7 +14,7 @@ import { Service, ServiceProvider, Services } from '../types/directory';
 import { useTauriEvents } from '../utils';
 import { ServiceProviderPopup } from './ServiceProviderPopup';
 
-export const ServiceSelector: React.FC<{
+export const ServiceSelector: FCWithChildren<{
   onChange?: (serviceProvider?: ServiceProvider) => void;
   services?: Services;
   currentSp?: ServiceProvider;
diff --git a/nym-connect/src/context/main.tsx b/nym-connect/src/context/main.tsx
index 3258978ff8..44181a8b19 100644
--- a/nym-connect/src/context/main.tsx
+++ b/nym-connect/src/context/main.tsx
@@ -40,7 +40,7 @@ export type TClientContext = {
 
 export const ClientContext = createContext({} as TClientContext);
 
-export const ClientContextProvider = ({ children }: { children: React.ReactNode }) => {
+export const ClientContextProvider: FCWithChildren = ({ children }) => {
   const [mode, setMode] = useState<ModeType>('dark');
   const [connectionStatus, setConnectionStatus] = useState<ConnectionStatusKind>(ConnectionStatusKind.disconnected);
   const [connectionStats, setConnectionStats] = useState<ConnectionStatsItem[]>();
diff --git a/nym-connect/src/context/mocks/main.tsx b/nym-connect/src/context/mocks/main.tsx
index 9b09b6dc71..0205d88791 100644
--- a/nym-connect/src/context/mocks/main.tsx
+++ b/nym-connect/src/context/mocks/main.tsx
@@ -20,7 +20,7 @@ const mockValues: TClientContext = {
   startDisconnecting: async () => {},
 };
 
-export const MockProvider: React.FC<{
+export const MockProvider: FCWithChildren<{
   children?: React.ReactNode;
   connectionStatus?: ConnectionStatusKind;
 }> = ({ connectionStatus = ConnectionStatusKind.disconnected, children }) => (
diff --git a/nym-connect/src/index.tsx b/nym-connect/src/index.tsx
index bd41e06822..8f682fd98b 100644
--- a/nym-connect/src/index.tsx
+++ b/nym-connect/src/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ClientContextProvider } from './context/main';
 import { ErrorFallback } from './components/Error';
@@ -8,19 +8,21 @@ import { App } from './App';
 import { AppWindowFrame } from './components/AppWindowFrame';
 import { TestAndEarnContextProvider } from './components/Growth/context/TestAndEarnContext';
 
-const root = document.getElementById('root');
+const elem = document.getElementById('root');
 
-ReactDOM.render(
-  <ErrorBoundary FallbackComponent={ErrorFallback}>
-    <ClientContextProvider>
-      <TestAndEarnContextProvider>
-        <NymMixnetTheme mode="dark">
-          <AppWindowFrame>
-            <App />
-          </AppWindowFrame>
-        </NymMixnetTheme>
-      </TestAndEarnContextProvider>
-    </ClientContextProvider>
-  </ErrorBoundary>,
-  root,
-);
+if (elem) {
+  const root = createRoot(elem);
+  root.render(
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ClientContextProvider>
+        <TestAndEarnContextProvider>
+          <NymMixnetTheme mode="dark">
+            <AppWindowFrame>
+              <App />
+            </AppWindowFrame>
+          </NymMixnetTheme>
+        </TestAndEarnContextProvider>
+      </ClientContextProvider>
+    </ErrorBoundary>,
+  );
+}
diff --git a/nym-connect/src/layouts/ConnectedLayout.tsx b/nym-connect/src/layouts/ConnectedLayout.tsx
index 9cf37b9f12..28b2ace488 100644
--- a/nym-connect/src/layouts/ConnectedLayout.tsx
+++ b/nym-connect/src/layouts/ConnectedLayout.tsx
@@ -11,7 +11,7 @@ import { IpAddressAndPort } from '../components/IpAddressAndPort';
 import { ServiceProvider } from '../types/directory';
 import { TestAndEarnButtonArea } from '../components/Growth/TestAndEarnButtonArea';
 
-export const ConnectedLayout: React.FC<{
+export const ConnectedLayout: FCWithChildren<{
   status: ConnectionStatusKind;
   stats: ConnectionStatsItem[];
   ipAddress: string;
diff --git a/nym-connect/src/layouts/DefaultLayout.tsx b/nym-connect/src/layouts/DefaultLayout.tsx
index 5c414a5bc1..ad4c5f018e 100644
--- a/nym-connect/src/layouts/DefaultLayout.tsx
+++ b/nym-connect/src/layouts/DefaultLayout.tsx
@@ -12,7 +12,7 @@ import { Services } from '../types/directory';
 import { TestAndEarnButtonArea } from '../components/Growth/TestAndEarnButtonArea';
 import { AppVersion } from '../components/AppVersion';
 
-export const DefaultLayout: React.FC<{
+export const DefaultLayout: FCWithChildren<{
   error?: Error;
   status: ConnectionStatusKind;
   services?: Services;
diff --git a/nym-connect/src/theme/index.tsx b/nym-connect/src/theme/index.tsx
index 08f5c62924..7eb23af5df 100644
--- a/nym-connect/src/theme/index.tsx
+++ b/nym-connect/src/theme/index.tsx
@@ -7,7 +7,7 @@ import '../../../assets/fonts/non-variable/fonts.css';
 /**
  * Provides the theme for Nym Connect by reacting to the light/dark mode choice stored in the app context.
  */
-export const NymMixnetTheme: React.FC<{ mode: 'light' | 'dark' }> = ({ children, mode }) => {
+export const NymMixnetTheme: FCWithChildren<{ mode: 'light' | 'dark' }> = ({ children, mode }) => {
   const theme = React.useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
   return (
     <ThemeProvider theme={theme}>
@@ -17,7 +17,7 @@ export const NymMixnetTheme: React.FC<{ mode: 'light' | 'dark' }> = ({ children,
   );
 };
 
-export const NymShipyardTheme: React.FC<{ mode?: 'light' | 'dark' }> = ({ children, mode = 'dark' }) => {
+export const NymShipyardTheme: FCWithChildren<{ mode?: 'light' | 'dark' }> = ({ children, mode = 'dark' }) => {
   const theme = React.useMemo(() => createTheme(getDesignTokens(mode, true)), [mode]);
   return (
     <ThemeProvider theme={theme}>
diff --git a/nym-connect/src/typings/FC.d.ts b/nym-connect/src/typings/FC.d.ts
new file mode 100644
index 0000000000..08ebdfa298
--- /dev/null
+++ b/nym-connect/src/typings/FC.d.ts
@@ -0,0 +1 @@
+declare type FCWithChildren<P = {}> = React.FC<React.PropsWithChildren<P>>;
diff --git a/nym-wallet/package.json b/nym-wallet/package.json
index 891d73b53f..4ad1f93eea 100644
--- a/nym-wallet/package.json
+++ b/nym-wallet/package.json
@@ -42,8 +42,8 @@
     "notistack": "^2.0.3",
     "npm-run-all": "^4.1.5",
     "qrcode.react": "^1.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.3",
     "react-hook-form": "^7.14.2",
     "react-router-dom": "6",
@@ -72,8 +72,8 @@
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/qrcode.react": "^1.0.2",
-    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "@types/semver": "^7.3.8",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
diff --git a/nym-wallet/src/components/ActionsMenu.tsx b/nym-wallet/src/components/ActionsMenu.tsx
index 227af88407..f9a6ef035d 100644
--- a/nym-wallet/src/components/ActionsMenu.tsx
+++ b/nym-wallet/src/components/ActionsMenu.tsx
@@ -2,12 +2,12 @@ import React, { useRef } from 'react';
 import { MoreVertSharp } from '@mui/icons-material';
 import { IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
 
-export const ActionsMenu: React.FC<{ open: boolean; onOpen: () => void; onClose: () => void }> = ({
-  children,
-  open,
-  onOpen,
-  onClose,
-}) => {
+export const ActionsMenu: FCWithChildren<{
+  open: boolean;
+  children: React.ReactNode;
+  onOpen: () => void;
+  onClose: () => void;
+}> = ({ children, open, onOpen, onClose }) => {
   const anchorEl: any = useRef<HTMLElement>();
 
   return (
diff --git a/nym-wallet/src/components/Bonding/modals/BondOversaturatedModal.tsx b/nym-wallet/src/components/Bonding/modals/BondOversaturatedModal.tsx
index be3ea33869..86d6b990b9 100644
--- a/nym-wallet/src/components/Bonding/modals/BondOversaturatedModal.tsx
+++ b/nym-wallet/src/components/Bonding/modals/BondOversaturatedModal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Stack, Typography } from '@mui/material';
 import { SimpleModal } from 'src/components/Modals/SimpleModal';
 
-export const BondOversaturatedModal: React.FC<{
+export const BondOversaturatedModal: FCWithChildren<{
   open: boolean;
   saturationPercentage: string;
   onClose?: () => void;
diff --git a/nym-wallet/src/components/ClientAddress.tsx b/nym-wallet/src/components/ClientAddress.tsx
index 14298b0349..a7039ca8d4 100644
--- a/nym-wallet/src/components/ClientAddress.tsx
+++ b/nym-wallet/src/components/ClientAddress.tsx
@@ -4,20 +4,14 @@ import { AppContext } from '../context/main';
 import { CopyToClipboard } from './CopyToClipboard';
 import { splice } from '../utils';
 
-const AddressTooltip: FC<{ visible?: boolean; address?: string; children: React.ReactElement<any, any> }> = ({
-  visible,
-  address,
-  children,
-}) => {
-  if (!visible) {
-    return children;
-  }
-  if (!address) {
-    return children;
+const AddressTooltip: FCWithChildren<{ visible?: boolean; address?: string }> = ({ visible, address, children }) => {
+  if (!visible || !address) {
+    return <>{children}</>;
   }
+
   return (
     <Tooltip title={address} arrow>
-      {children}
+      <>{children}</>
     </Tooltip>
   );
 };
diff --git a/nym-wallet/src/components/ConfirmTX.tsx b/nym-wallet/src/components/ConfirmTX.tsx
index 01c5ff0743..2e3d386f83 100644
--- a/nym-wallet/src/components/ConfirmTX.tsx
+++ b/nym-wallet/src/components/ConfirmTX.tsx
@@ -15,7 +15,7 @@ const storybookStyles = (theme: Theme, isStorybook?: boolean, backdropProps?: ob
       }
     : {};
 
-export const ConfirmTx: React.FC<{
+export const ConfirmTx: FCWithChildren<{
   open: boolean;
   header: string;
   subheader?: string;
@@ -24,6 +24,7 @@ export const ConfirmTx: React.FC<{
   onClose?: () => void;
   onPrev: () => void;
   isStorybook?: boolean;
+  children?: React.ReactNode;
 }> = ({ open, fee, onConfirm, onClose, header, subheader, onPrev, children, isStorybook }) => {
   const theme = useTheme();
   return (
diff --git a/nym-wallet/src/components/Delegation/DelegateBlocker.tsx b/nym-wallet/src/components/Delegation/DelegateBlocker.tsx
index fc5f5144eb..816c293a2f 100644
--- a/nym-wallet/src/components/Delegation/DelegateBlocker.tsx
+++ b/nym-wallet/src/components/Delegation/DelegateBlocker.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { SxProps } from '@mui/material';
 import { SimpleModal } from '../Modals/SimpleModal';
 
-export const OverSaturatedBlockerModal: React.FC<{
+export const OverSaturatedBlockerModal: FCWithChildren<{
   open: boolean;
   onClose?: () => void;
   header?: string;
diff --git a/nym-wallet/src/components/Delegation/DelegateModal.tsx b/nym-wallet/src/components/Delegation/DelegateModal.tsx
index a6c1bb0dbf..ad549e206a 100644
--- a/nym-wallet/src/components/Delegation/DelegateModal.tsx
+++ b/nym-wallet/src/components/Delegation/DelegateModal.tsx
@@ -18,7 +18,7 @@ import { ErrorModal } from '../Modals/ErrorModal';
 
 const MIN_AMOUNT_TO_DELEGATE = 10;
 
-export const DelegateModal: React.FC<{
+export const DelegateModal: FCWithChildren<{
   open: boolean;
   onClose: () => void;
   onOk?: (
diff --git a/nym-wallet/src/components/Delegation/DelegationActions.tsx b/nym-wallet/src/components/Delegation/DelegationActions.tsx
index 0784114d9d..628a893443 100644
--- a/nym-wallet/src/components/Delegation/DelegationActions.tsx
+++ b/nym-wallet/src/components/Delegation/DelegationActions.tsx
@@ -10,7 +10,7 @@ export type DelegationListItemActions = 'delegate' | 'undelegate' | 'redeem' | '
 const BUTTON_SIZE = '32px';
 const MIN_WIDTH = '150px';
 
-export const DelegationActions: React.FC<{
+export const DelegationActions: FCWithChildren<{
   onActionClick?: (action: DelegationListItemActions) => void;
   isPending?: DelegateListItemPending;
   disableRedeemingRewards?: boolean;
@@ -64,7 +64,7 @@ export const DelegationActions: React.FC<{
   );
 };
 
-export const DelegationsActionsMenu: React.FC<{
+export const DelegationsActionsMenu: FCWithChildren<{
   onActionClick?: (action: DelegationListItemActions) => void;
   disableRedeemingRewards?: boolean;
   disableDelegateMore?: boolean | null;
diff --git a/nym-wallet/src/components/Delegation/DelegationList.tsx b/nym-wallet/src/components/Delegation/DelegationList.tsx
index a6c2ac1bcf..1e9599b8f1 100644
--- a/nym-wallet/src/components/Delegation/DelegationList.tsx
+++ b/nym-wallet/src/components/Delegation/DelegationList.tsx
@@ -45,7 +45,7 @@ const headCells: HeadCell[] = [
   { id: 'unclaimed_rewards', label: 'Reward', sortable: true, align: 'left' },
 ];
 
-const EnhancedTableHead: React.FC<EnhancedTableProps> = ({ order, orderBy, onRequestSort }) => {
+const EnhancedTableHead: FCWithChildren<EnhancedTableProps> = ({ order, orderBy, onRequestSort }) => {
   const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
     onRequestSort(event, property);
   };
@@ -87,7 +87,7 @@ const sortByUnbondedMixnodeFirst = (a: DelegationWithEvent) => {
   return 1;
 };
 
-export const DelegationList: React.FC<{
+export const DelegationList: FCWithChildren<{
   isLoading?: boolean;
   items: TDelegations;
   onItemActionClick?: (item: DelegationWithEverything, action: DelegationListItemActions) => void;
diff --git a/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx b/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx
index 8694938a63..bba93fca5a 100644
--- a/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx
+++ b/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx
@@ -30,7 +30,7 @@ const transactionForDarkTheme = {
   hash: '11ED7B9E21534A9421834F52FED5103DC6E982949C06335F5E12EFC71DAF0CF0',
 };
 
-const Content: React.FC<{ children: React.ReactElement<any, any>; handleClick: () => void }> = ({
+const Content: FCWithChildren<{ children: React.ReactElement<any, any>; handleClick: () => void }> = ({
   children,
   handleClick,
 }) => (
diff --git a/nym-wallet/src/components/Delegation/DelegationModal.tsx b/nym-wallet/src/components/Delegation/DelegationModal.tsx
index e0facddf1d..adc4588c84 100644
--- a/nym-wallet/src/components/Delegation/DelegationModal.tsx
+++ b/nym-wallet/src/components/Delegation/DelegationModal.tsx
@@ -36,12 +36,13 @@ export type DelegationModalProps = {
   }[];
 };
 
-export const DelegationModal: React.FC<
+export const DelegationModal: FCWithChildren<
   DelegationModalProps & {
     open: boolean;
     onClose: () => void;
     sx?: SxProps;
     backdropProps?: object;
+    children?: React.ReactNode;
   }
 > = ({ status, action, message, transactions, open, onClose, children, sx, backdropProps }) => {
   if (status === 'loading') return <LoadingModal sx={sx} backdropProps={backdropProps} />;
diff --git a/nym-wallet/src/components/Delegation/Delegations.tsx b/nym-wallet/src/components/Delegation/Delegations.tsx
index 0a6781e44a..82c40c9e19 100644
--- a/nym-wallet/src/components/Delegation/Delegations.tsx
+++ b/nym-wallet/src/components/Delegation/Delegations.tsx
@@ -5,7 +5,7 @@ import { Link } from '@nymproject/react/link/Link';
 import { DelegationList } from './DelegationList';
 import { DelegationListItemActions } from './DelegationActions';
 
-export const Delegations: React.FC<{
+export const Delegations: FCWithChildren<{
   isLoading?: boolean;
   items: DelegationWithEverything[];
   explorerUrl: string;
diff --git a/nym-wallet/src/components/Delegation/Modals.stories.tsx b/nym-wallet/src/components/Delegation/Modals.stories.tsx
index 218194841b..630d023217 100644
--- a/nym-wallet/src/components/Delegation/Modals.stories.tsx
+++ b/nym-wallet/src/components/Delegation/Modals.stories.tsx
@@ -15,7 +15,7 @@ export default {
   title: 'Delegation/Components/Action Modals',
 };
 
-const Background: React.FC<{ onOpen: () => void }> = ({ onOpen }) => {
+const Background: FCWithChildren<{ onOpen: () => void }> = ({ onOpen }) => {
   const theme = useTheme();
   return (
     <Paper elevation={0} sx={{ px: 4, pt: 2, pb: 4 }}>
diff --git a/nym-wallet/src/components/Delegation/UndelegateModal.tsx b/nym-wallet/src/components/Delegation/UndelegateModal.tsx
index 99715d7425..368b9d6fce 100644
--- a/nym-wallet/src/components/Delegation/UndelegateModal.tsx
+++ b/nym-wallet/src/components/Delegation/UndelegateModal.tsx
@@ -8,7 +8,7 @@ import { ModalFee } from '../Modals/ModalFee';
 import { ModalListItem } from '../Modals/ModalListItem';
 import { SimpleModal } from '../Modals/SimpleModal';
 
-export const UndelegateModal: React.FC<{
+export const UndelegateModal: FCWithChildren<{
   open: boolean;
   onClose?: () => void;
   onOk?: (mixId: number, identityKey: string, usesVestingContractTokens: boolean, fee?: FeeDetails) => void;
diff --git a/nym-wallet/src/components/Modals/ErrorModal.tsx b/nym-wallet/src/components/Modals/ErrorModal.tsx
index 42d66c634a..d46c51d415 100644
--- a/nym-wallet/src/components/Modals/ErrorModal.tsx
+++ b/nym-wallet/src/components/Modals/ErrorModal.tsx
@@ -2,13 +2,14 @@ import React from 'react';
 import { Box, Button, Modal, SxProps, Typography } from '@mui/material';
 import { modalStyle } from './styles';
 
-export const ErrorModal: React.FC<{
+export const ErrorModal: FCWithChildren<{
   open: boolean;
   title?: string;
   message?: string;
   sx?: SxProps;
   backdropProps?: object;
   onClose: () => void;
+  children?: React.ReactNode;
 }> = ({ children, open, title, message, sx, backdropProps, onClose }) => (
   <Modal open={open} onClose={onClose} BackdropProps={backdropProps}>
     <Box
diff --git a/nym-wallet/src/components/Modals/LoadingModal.tsx b/nym-wallet/src/components/Modals/LoadingModal.tsx
index eda3d407a4..522d976f65 100644
--- a/nym-wallet/src/components/Modals/LoadingModal.tsx
+++ b/nym-wallet/src/components/Modals/LoadingModal.tsx
@@ -13,7 +13,7 @@ const modalStyle: SxProps = {
   p: 4,
 };
 
-export const LoadingModal: React.FC<{
+export const LoadingModal: FCWithChildren<{
   sx?: SxProps;
   backdropProps?: object;
 }> = ({ sx, backdropProps }) => (
diff --git a/nym-wallet/src/components/Modals/ModalDivider.tsx b/nym-wallet/src/components/Modals/ModalDivider.tsx
index 5bae3a8b50..6258e0bfac 100644
--- a/nym-wallet/src/components/Modals/ModalDivider.tsx
+++ b/nym-wallet/src/components/Modals/ModalDivider.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, SxProps } from '@mui/material';
 
-export const ModalDivider: React.FC<{
+export const ModalDivider: FCWithChildren<{
   sx?: SxProps;
 }> = ({ sx }) => <Box borderTop="1px solid" borderColor="rgba(141, 147, 153, 0.2)" my={1} sx={sx} />;
diff --git a/nym-wallet/src/components/Modals/ModalListItem.tsx b/nym-wallet/src/components/Modals/ModalListItem.tsx
index 1bf70c2384..7e5194a21c 100644
--- a/nym-wallet/src/components/Modals/ModalListItem.tsx
+++ b/nym-wallet/src/components/Modals/ModalListItem.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Box, Stack, Typography, TypographyProps } from '@mui/material';
 import { ModalDivider } from './ModalDivider';
 
-export const ModalListItem: React.FC<{
+export const ModalListItem: FCWithChildren<{
   label: string;
   divider?: boolean;
   hidden?: boolean;
diff --git a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx b/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
index 994cf7eb48..921e9a3c5a 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
@@ -16,7 +16,7 @@ export default {
   component: SimpleModal,
 } as ComponentMeta<typeof SimpleModal>;
 
-const BasePage: React.FC<{ children: React.ReactElement<any, any>; handleClick: () => void }> = ({
+const BasePage: FCWithChildren<{ children: React.ReactElement<any, any>; handleClick: () => void }> = ({
   children,
   handleClick,
 }) => (
diff --git a/nym-wallet/src/components/Modals/SimpleModal.tsx b/nym-wallet/src/components/Modals/SimpleModal.tsx
index 591354ffe5..7fdeb328b2 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.tsx
@@ -6,7 +6,7 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { StyledBackButton } from 'src/components/StyledBackButton';
 import { modalStyle } from './styles';
 
-export const SimpleModal: React.FC<{
+export const SimpleModal: FCWithChildren<{
   open: boolean;
   hideCloseIcon?: boolean;
   displayErrorIcon?: boolean;
@@ -25,6 +25,7 @@ export const SimpleModal: React.FC<{
   okDisabled?: boolean;
   sx?: SxProps;
   backdropProps?: object;
+  children?: React.ReactNode;
 }> = ({
   open,
   hideCloseIcon,
diff --git a/nym-wallet/src/components/NetworkSelector.tsx b/nym-wallet/src/components/NetworkSelector.tsx
index 00da844d3b..d17330f679 100644
--- a/nym-wallet/src/components/NetworkSelector.tsx
+++ b/nym-wallet/src/components/NetworkSelector.tsx
@@ -11,7 +11,7 @@ const networks: { networkName: Network; name: string }[] = [
   { networkName: 'QA', name: 'QA' },
 ];
 
-const NetworkItem: React.FC<{ title: string; isSelected: boolean; onSelect: () => void }> = ({
+const NetworkItem: FCWithChildren<{ title: string; isSelected: boolean; onSelect: () => void }> = ({
   title,
   isSelected,
   onSelect,
diff --git a/nym-wallet/src/components/NymCard.tsx b/nym-wallet/src/components/NymCard.tsx
index d3377a5fa9..768f0811ab 100644
--- a/nym-wallet/src/components/NymCard.tsx
+++ b/nym-wallet/src/components/NymCard.tsx
@@ -10,7 +10,7 @@ const CardContentNoPadding = styled(CardContent)(() => ({
   },
 }));
 
-export const NymCard: React.FC<{
+export const NymCard: FCWithChildren<{
   title: string | React.ReactElement;
   subheader?: string | React.ReactChild;
   Action?: React.ReactNode;
@@ -20,6 +20,7 @@ export const NymCard: React.FC<{
   dataTestid?: string;
   sx?: SxProps;
   sxTitle?: SxProps;
+  children: React.ReactNode;
 }> = ({ title, subheader, Action, Icon, noPadding, borderless, children, dataTestid, sx, sxTitle }) => (
   <Card variant="outlined" sx={{ overflow: 'auto', ...(borderless && { border: 'none', dropShadow: 'none' }), ...sx }}>
     <CardHeader
diff --git a/nym-wallet/src/components/Rewards/RedeemModal.stories.tsx b/nym-wallet/src/components/Rewards/RedeemModal.stories.tsx
index 875c347689..0cf6e56567 100644
--- a/nym-wallet/src/components/Rewards/RedeemModal.stories.tsx
+++ b/nym-wallet/src/components/Rewards/RedeemModal.stories.tsx
@@ -15,7 +15,7 @@ export default {
   component: RedeemModal,
 } as ComponentMeta<typeof RedeemModal>;
 
-const Content: React.FC<{
+const Content: FCWithChildren<{
   setOpen: (value: boolean) => void;
 }> = ({ setOpen }) => (
   <Paper elevation={0} sx={{ px: 4, pt: 2, pb: 4 }}>
diff --git a/nym-wallet/src/components/Rewards/RedeemModal.tsx b/nym-wallet/src/components/Rewards/RedeemModal.tsx
index 07d361aec0..9d80a5d048 100644
--- a/nym-wallet/src/components/Rewards/RedeemModal.tsx
+++ b/nym-wallet/src/components/Rewards/RedeemModal.tsx
@@ -9,7 +9,7 @@ import { SimpleModal } from '../Modals/SimpleModal';
 import { FeeWarning } from '../FeeWarning';
 import { ModalListItem } from '../Modals/ModalListItem';
 
-export const RedeemModal: React.FC<{
+export const RedeemModal: FCWithChildren<{
   open: boolean;
   onClose?: () => void;
   onOk?: (mixId: number, identityKey: string, fee?: FeeDetails) => void;
diff --git a/nym-wallet/src/components/Rewards/RewardsSummary.tsx b/nym-wallet/src/components/Rewards/RewardsSummary.tsx
index 3cbc7b1fc5..aa25ce8af9 100644
--- a/nym-wallet/src/components/Rewards/RewardsSummary.tsx
+++ b/nym-wallet/src/components/Rewards/RewardsSummary.tsx
@@ -3,7 +3,7 @@ import { CircularProgress, Stack, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { InfoTooltip } from '../InfoToolTip';
 
-export const RewardsSummary: React.FC<{
+export const RewardsSummary: FCWithChildren<{
   isLoading?: boolean;
   totalDelegation?: string;
   totalRewards?: string;
diff --git a/nym-wallet/src/components/SuccessResponse.tsx b/nym-wallet/src/components/SuccessResponse.tsx
index 2f3e2d4075..e8e9451c46 100644
--- a/nym-wallet/src/components/SuccessResponse.tsx
+++ b/nym-wallet/src/components/SuccessResponse.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Stack, Typography } from '@mui/material';
 
-export const SuccessReponse: React.FC<{
+export const SuccessReponse: FCWithChildren<{
   title: string;
   subtitle: string | React.ReactNode;
   caption: string | React.ReactNode;
diff --git a/nym-wallet/src/components/Title.tsx b/nym-wallet/src/components/Title.tsx
index 530b9deed8..fbc0997c3e 100644
--- a/nym-wallet/src/components/Title.tsx
+++ b/nym-wallet/src/components/Title.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, SxProps, Typography } from '@mui/material';
 
-export const Title: React.FC<{ title: string | React.ReactNode; Icon?: React.ReactNode; sx?: SxProps }> = ({
+export const Title: FCWithChildren<{ title: string | React.ReactNode; Icon?: React.ReactNode; sx?: SxProps }> = ({
   title,
   Icon,
   sx,
diff --git a/nym-wallet/src/components/TokenPoolSelector.tsx b/nym-wallet/src/components/TokenPoolSelector.tsx
index b289e90392..1ef768bbb3 100644
--- a/nym-wallet/src/components/TokenPoolSelector.tsx
+++ b/nym-wallet/src/components/TokenPoolSelector.tsx
@@ -4,7 +4,7 @@ import { AppContext } from '../context/main';
 
 export type TPoolOption = 'balance' | 'locked';
 
-export const TokenPoolSelector: React.FC<{ disabled: boolean; onSelect: (pool: TPoolOption) => void }> = ({
+export const TokenPoolSelector: FCWithChildren<{ disabled: boolean; onSelect: (pool: TPoolOption) => void }> = ({
   disabled,
   onSelect,
 }) => {
diff --git a/nym-wallet/src/components/TransactionDetails.tsx b/nym-wallet/src/components/TransactionDetails.tsx
index 6efbe2747d..7136a78db5 100644
--- a/nym-wallet/src/components/TransactionDetails.tsx
+++ b/nym-wallet/src/components/TransactionDetails.tsx
@@ -3,7 +3,7 @@ import { Card, Grid, Typography } from '@mui/material';
 
 export type TTransactionDetails = Array<{ primary: string; secondary: string }>;
 
-export const TransactionDetails: React.FC<{ details: TTransactionDetails }> = ({ details }) => (
+export const TransactionDetails: FCWithChildren<{ details: TTransactionDetails }> = ({ details }) => (
   <Card variant="outlined" sx={{ width: '100%', p: 2 }}>
     {details.map(({ primary, secondary }, i) => (
       <Grid container sx={{ mt: i !== 0 ? 1 : 0 }} key={primary}>
diff --git a/nym-wallet/src/components/textfields.tsx b/nym-wallet/src/components/textfields.tsx
index afcbcfedb7..94cc2577a6 100644
--- a/nym-wallet/src/components/textfields.tsx
+++ b/nym-wallet/src/components/textfields.tsx
@@ -5,7 +5,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { Error } from './Error';
 
-export const MnemonicInput: React.FC<{
+export const MnemonicInput: FCWithChildren<{
   mnemonic: string;
   error?: string;
   onUpdateMnemonic: (mnemonic: string) => void;
@@ -37,7 +37,7 @@ export const MnemonicInput: React.FC<{
   );
 };
 
-export const PasswordInput: React.FC<{
+export const PasswordInput: FCWithChildren<{
   password: string;
   error?: string;
   label?: string;
diff --git a/nym-wallet/src/context/accounts.tsx b/nym-wallet/src/context/accounts.tsx
index 9725a9570c..e3937ff8ad 100644
--- a/nym-wallet/src/context/accounts.tsx
+++ b/nym-wallet/src/context/accounts.tsx
@@ -28,7 +28,7 @@ export type TAccountMnemonic = { value?: string; accountName?: string };
 
 export const AccountsContext = createContext({} as TAccounts);
 
-export const AccountsProvider: React.FC = ({ children }) => {
+export const AccountsProvider: FCWithChildren = ({ children }) => {
   const [accounts, setAccounts] = useState<AccountEntry[]>([]);
   const [selectedAccount, setSelectedAccount] = useState<AccountEntry>();
   const [accountToEdit, setAccountToEdit] = useState<AccountEntry>();
diff --git a/nym-wallet/src/context/auth.tsx b/nym-wallet/src/context/auth.tsx
index 12798ef134..1172e93f1b 100644
--- a/nym-wallet/src/context/auth.tsx
+++ b/nym-wallet/src/context/auth.tsx
@@ -21,7 +21,7 @@ const mnemonicToArray = (mnemonic: string): TMnemonicWords =>
     .split(' ')
     .reduce((a, c: string, index) => [...a, { name: c, index: index + 1, disabled: false }], [] as TMnemonicWords);
 
-export const AuthProvider: React.FC = ({ children }) => {
+export const AuthProvider: FCWithChildren = ({ children }) => {
   const [password, setPassword] = useState('');
   const [mnemonic, setMnemonic] = useState('');
   const [mnemonicWords, setMnemonicWords] = useState<TMnemonicWords>([]);
diff --git a/nym-wallet/src/context/bonding.tsx b/nym-wallet/src/context/bonding.tsx
index 94bf5271ca..c8a64b98b5 100644
--- a/nym-wallet/src/context/bonding.tsx
+++ b/nym-wallet/src/context/bonding.tsx
@@ -136,7 +136,7 @@ export const BondingContext = createContext<TBondingContext>({
   },
 });
 
-export const BondingContextProvider = ({ children }: { children?: React.ReactNode }): JSX.Element => {
+export const BondingContextProvider: FCWithChildren = ({ children }): JSX.Element => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>();
   const [bondedNode, setBondedNode] = useState<TBondedMixnode | TBondedGateway>();
diff --git a/nym-wallet/src/context/buy.tsx b/nym-wallet/src/context/buy.tsx
index 855f5e988a..4444268591 100644
--- a/nym-wallet/src/context/buy.tsx
+++ b/nym-wallet/src/context/buy.tsx
@@ -16,7 +16,7 @@ export const BuyContext = createContext<TBuyContext>({
   refresh: async () => undefined,
 });
 
-export const BuyContextProvider = ({ children }: { children?: React.ReactNode }): JSX.Element => {
+export const BuyContextProvider: FCWithChildren = ({ children }): JSX.Element => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string>();
 
diff --git a/nym-wallet/src/context/delegations.tsx b/nym-wallet/src/context/delegations.tsx
index 678b60c305..2324b141da 100644
--- a/nym-wallet/src/context/delegations.tsx
+++ b/nym-wallet/src/context/delegations.tsx
@@ -64,6 +64,7 @@ export const DelegationContext = createContext<TDelegationContext>({
 
 export const DelegationContextProvider: FC<{
   network?: Network;
+  children: React.ReactNode;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
 }> = ({ network, children }) => {
   const [isLoading, setIsLoading] = useState(true);
diff --git a/nym-wallet/src/context/main.tsx b/nym-wallet/src/context/main.tsx
index f8956f9298..5b4290d9b3 100644
--- a/nym-wallet/src/context/main.tsx
+++ b/nym-wallet/src/context/main.tsx
@@ -65,7 +65,7 @@ export type TAppContext = {
 
 export const AppContext = createContext({} as TAppContext);
 
-export const AppProvider = ({ children }: { children: React.ReactNode }) => {
+export const AppProvider: FCWithChildren = ({ children }) => {
   const [clientDetails, setClientDetails] = useState<Account>();
   const [storedAccounts, setStoredAccounts] = useState<AccountEntry[]>();
   const [mixnodeDetails, setMixnodeDetails] = useState<MixNodeDetails | null>(null);
diff --git a/nym-wallet/src/context/mocks/accounts.tsx b/nym-wallet/src/context/mocks/accounts.tsx
index 7a3ff838e1..4186c8df34 100644
--- a/nym-wallet/src/context/mocks/accounts.tsx
+++ b/nym-wallet/src/context/mocks/accounts.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { AccountEntry } from '@nymproject/types';
 import { AccountsContext, TAccountMnemonic, TAccountsDialog } from '../accounts';
 
-export const MockAccountsProvider: React.FC = ({ children }) => {
+export const MockAccountsProvider: FCWithChildren = ({ children }) => {
   const [accounts, setAccounts] = useState<AccountEntry[]>([{ id: 'Account_1', address: 'abc123' }]);
   const [selectedAccount, setSelectedAccount] = useState<AccountEntry | undefined>({
     id: 'Account_1',
diff --git a/nym-wallet/src/context/mocks/buy.tsx b/nym-wallet/src/context/mocks/buy.tsx
index 0d7bca418d..934b9f54d9 100644
--- a/nym-wallet/src/context/mocks/buy.tsx
+++ b/nym-wallet/src/context/mocks/buy.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { BuyContext } from '../buy';
 import { mockSleep } from './utils';
 
-export const MockBuyContextProvider = ({ children }: { children?: React.ReactNode }): JSX.Element => {
+export const MockBuyContextProvider: FCWithChildren = ({ children }): JSX.Element => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string>();
 
diff --git a/nym-wallet/src/context/mocks/delegations.tsx b/nym-wallet/src/context/mocks/delegations.tsx
index bc216fd7bf..58c5ea61cb 100644
--- a/nym-wallet/src/context/mocks/delegations.tsx
+++ b/nym-wallet/src/context/mocks/delegations.tsx
@@ -63,7 +63,7 @@ let mockDelegations: DelegationWithEverything[] = [
   },
 ];
 
-export const MockDelegationContextProvider: FC<{}> = ({ children }) => {
+export const MockDelegationContextProvider: FCWithChildren = ({ children }) => {
   const [trigger, setTrigger] = useState<Date>(new Date());
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string>();
diff --git a/nym-wallet/src/context/mocks/main.tsx b/nym-wallet/src/context/mocks/main.tsx
index c9f32dedd8..0a073c47d8 100644
--- a/nym-wallet/src/context/mocks/main.tsx
+++ b/nym-wallet/src/context/mocks/main.tsx
@@ -2,7 +2,7 @@ import React, { FC, useMemo } from 'react';
 import type { TAppContext } from '../main';
 import { AppContext } from '../main';
 
-export const MockMainContextProvider: FC<{}> = ({ children }) => {
+export const MockMainContextProvider: FCWithChildren = ({ children }) => {
   const memoizedValue = useMemo<TAppContext>(
     () => ({
       mode: 'light',
diff --git a/nym-wallet/src/context/mocks/rewards.tsx b/nym-wallet/src/context/mocks/rewards.tsx
index 01730c40af..fff2cbb21e 100644
--- a/nym-wallet/src/context/mocks/rewards.tsx
+++ b/nym-wallet/src/context/mocks/rewards.tsx
@@ -4,7 +4,7 @@ import { RewardsContext, TRewardsTransaction } from '../rewards';
 import { useDelegationContext } from '../delegations';
 import { mockSleep } from './utils';
 
-export const MockRewardsContextProvider: FC = ({ children }) => {
+export const MockRewardsContextProvider: FCWithChildren = ({ children }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string>();
   const [totalRewards, setTotalRewards] = useState<undefined | string>();
diff --git a/nym-wallet/src/context/rewards.tsx b/nym-wallet/src/context/rewards.tsx
index 2636849bb3..b65e2c6768 100644
--- a/nym-wallet/src/context/rewards.tsx
+++ b/nym-wallet/src/context/rewards.tsx
@@ -24,7 +24,7 @@ export const RewardsContext = createContext<TRewardsContext>({
   },
 });
 
-export const RewardsContextProvider: FC<{}> = ({ children }) => {
+export const RewardsContextProvider: FCWithChildren = ({ children }) => {
   const { isLoading, totalRewards, refresh } = useDelegationContext();
   const [error, setError] = useState<string>();
 
diff --git a/nym-wallet/src/index.tsx b/nym-wallet/src/index.tsx
index b585c8c3d3..b1b5a1053c 100644
--- a/nym-wallet/src/index.tsx
+++ b/nym-wallet/src/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { SnackbarProvider } from 'notistack';
@@ -38,6 +38,9 @@ const App = () => {
   );
 };
 
-const root = document.getElementById('root');
+const elem = document.getElementById('root');
 
-ReactDOM.render(<App />, root);
+if (elem) {
+  const root = createRoot(elem);
+  root.render(<App />);
+}
diff --git a/nym-wallet/src/layouts/AppLayout.tsx b/nym-wallet/src/layouts/AppLayout.tsx
index 807c369801..64b186b445 100644
--- a/nym-wallet/src/layouts/AppLayout.tsx
+++ b/nym-wallet/src/layouts/AppLayout.tsx
@@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles';
 import { AppContext } from 'src/context';
 import { AppBar, LoadingPage, Nav } from '../components';
 
-export const ApplicationLayout: React.FC = ({ children }) => {
+export const ApplicationLayout: FCWithChildren = ({ children }) => {
   const theme = useTheme();
   const { isLoading, appVersion } = useContext(AppContext);
 
diff --git a/nym-wallet/src/layouts/AuthLayout.tsx b/nym-wallet/src/layouts/AuthLayout.tsx
index 0f182301e4..6e951b136e 100644
--- a/nym-wallet/src/layouts/AuthLayout.tsx
+++ b/nym-wallet/src/layouts/AuthLayout.tsx
@@ -5,7 +5,7 @@ import { AppContext } from 'src/context';
 import { LoadingPage } from 'src/components';
 import { Step } from '../pages/auth/components/step';
 
-export const AuthLayout: React.FC = ({ children }) => {
+export const AuthLayout: FCWithChildren = ({ children }) => {
   const { isLoading } = useContext(AppContext);
 
   return isLoading ? (
diff --git a/nym-wallet/src/layouts/PageLayout.tsx b/nym-wallet/src/layouts/PageLayout.tsx
index 9f55d3da3c..3ab5d5f995 100644
--- a/nym-wallet/src/layouts/PageLayout.tsx
+++ b/nym-wallet/src/layouts/PageLayout.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { Box } from '@mui/material';
 
-export const PageLayout: React.FC<{ position?: 'flex-start' | 'flex-end' }> = ({ position, children }) => (
+export const PageLayout: FCWithChildren<{ position?: 'flex-start' | 'flex-end'; children: React.ReactNode }> = ({
+  position,
+  children,
+}) => (
   <Box
     sx={{
       maxHeight: 'calc(100% - 65px)',
diff --git a/nym-wallet/src/pages/Admin/index.tsx b/nym-wallet/src/pages/Admin/index.tsx
index b3a8c157c5..978360f254 100644
--- a/nym-wallet/src/pages/Admin/index.tsx
+++ b/nym-wallet/src/pages/Admin/index.tsx
@@ -7,7 +7,7 @@ import { getContractParams, setContractParams } from '../../requests';
 import { PageLayout } from '../../layouts';
 import { AppContext } from '../../context';
 
-const AdminForm: React.FC<{
+const AdminForm: FCWithChildren<{
   params: TauriContractStateParams;
 }> = ({ params }) => {
   const {
@@ -80,7 +80,7 @@ const AdminForm: React.FC<{
   );
 };
 
-export const Admin: React.FC = () => {
+export const Admin: FCWithChildren = () => {
   const { isAdminAddress, network } = useContext(AppContext);
   const [isLoading, setIsLoading] = useState(false);
   const [params, setParams] = useState<TauriContractStateParams>();
diff --git a/nym-wallet/src/pages/auth/pages/welcome.tsx b/nym-wallet/src/pages/auth/pages/welcome.tsx
index 9f48e47058..e5bb19a264 100644
--- a/nym-wallet/src/pages/auth/pages/welcome.tsx
+++ b/nym-wallet/src/pages/auth/pages/welcome.tsx
@@ -4,7 +4,7 @@ import { Button, Stack } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { SubtitleSlick, Title } from '../components';
 
-export const WelcomeContent: React.FC<{}> = () => {
+export const WelcomeContent: FCWithChildren<{}> = () => {
   const navigate = useNavigate();
 
   return (
diff --git a/nym-wallet/src/pages/balance/components/vesting-timeline.tsx b/nym-wallet/src/pages/balance/components/vesting-timeline.tsx
index 5b5230604e..b1a0f663ce 100644
--- a/nym-wallet/src/pages/balance/components/vesting-timeline.tsx
+++ b/nym-wallet/src/pages/balance/components/vesting-timeline.tsx
@@ -7,7 +7,7 @@ import { AppContext } from '../../../context';
 
 const calculateMarkerPosition = (arrLength: number, index: number) => (1 / arrLength) * 100 * index;
 
-const Marker: React.FC<{ tooltipText: string; color: string; position: string }> = ({
+const Marker: FCWithChildren<{ tooltipText: string; color: string; position: string }> = ({
   tooltipText,
   color,
   position,
@@ -17,7 +17,7 @@ const Marker: React.FC<{ tooltipText: string; color: string; position: string }>
   </Tooltip>
 );
 
-export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ percentageComplete }) => {
+export const VestingTimeline: FCWithChildren<{ percentageComplete: number }> = ({ percentageComplete }) => {
   const {
     userBalance: { currentVestingPeriod, vestingAccountInfo },
   } = useContext(AppContext);
diff --git a/nym-wallet/src/pages/internal-docs/DocEntry.tsx b/nym-wallet/src/pages/internal-docs/DocEntry.tsx
index 43c26b6491..22374cc92c 100644
--- a/nym-wallet/src/pages/internal-docs/DocEntry.tsx
+++ b/nym-wallet/src/pages/internal-docs/DocEntry.tsx
@@ -34,7 +34,7 @@ function collectArgs(functionName: string, args: ArgDef[]) {
   return invokeArgs;
 }
 
-export const DocEntry: React.FC<DocEntryProps> = (props) => {
+export const DocEntry: FCWithChildren<DocEntryProps> = (props) => {
   const [card, setCard] = React.useState(<Card />);
 
   const onClick = () => {
diff --git a/nym-wallet/src/pages/settings/tabs.tsx b/nym-wallet/src/pages/settings/tabs.tsx
index 07a4ab07cb..13d28f3da1 100644
--- a/nym-wallet/src/pages/settings/tabs.tsx
+++ b/nym-wallet/src/pages/settings/tabs.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tab, Tabs as MuiTabs, Box } from '@mui/material';
 
-export const Tabs: React.FC<{
+export const Tabs: FCWithChildren<{
   tabs: string[];
   selectedTab: number;
   disabled: boolean;
@@ -24,4 +24,4 @@ export const Tabs: React.FC<{
   </MuiTabs>
 );
 
-export const TabPanel: React.FC = ({ children }) => <Box sx={{ p: 4 }}>{children}</Box>;
+export const TabPanel: FCWithChildren = ({ children }) => <Box sx={{ p: 4 }}>{children}</Box>;
diff --git a/nym-wallet/src/pages/terminal/index.tsx b/nym-wallet/src/pages/terminal/index.tsx
index 3bd322318e..d027e782b9 100644
--- a/nym-wallet/src/pages/terminal/index.tsx
+++ b/nym-wallet/src/pages/terminal/index.tsx
@@ -10,8 +10,9 @@ import { AppContext } from '../../context/main';
 import { NymCard } from '../../components';
 import { getCurrentInterval, getAllPendingDelegations, getMixNodeDelegationsForCurrentAccount } from '../../requests';
 
-const TerminalSection: React.FC<{
+const TerminalSection: FCWithChildren<{
   heading: React.ReactNode;
+  children: React.ReactNode;
 }> = ({ heading, children }) => {
   const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
 
@@ -32,7 +33,7 @@ const TerminalSection: React.FC<{
   );
 };
 
-const TerminalInner: React.FC = () => {
+const TerminalInner: FCWithChildren = () => {
   const { network, userBalance, clientDetails, handleShowTerminal, appEnv } = useContext(AppContext);
   const [mixnodeDelegations, setMixnodeDelegations] = useState<any>();
   const [pendingEvents, setPendingEvents] = useState<any>();
@@ -184,7 +185,7 @@ const TerminalInner: React.FC = () => {
   );
 };
 
-export const Terminal: React.FC = () => {
+export const Terminal: FCWithChildren = () => {
   const { showTerminal } = useContext(AppContext);
 
   // this is a guard component, that only mounts the terminal component when shown
diff --git a/nym-wallet/src/svg-icons/node.tsx b/nym-wallet/src/svg-icons/node.tsx
index e0ae33eb34..906cc286b8 100644
--- a/nym-wallet/src/svg-icons/node.tsx
+++ b/nym-wallet/src/svg-icons/node.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export const Node: React.FC<SvgIconProps> = ({ color, ...props }) => (
+export const Node: FCWithChildren<SvgIconProps> = ({ color, ...props }) => (
   <SvgIcon {...props}>
     <path
       fillRule="evenodd"
diff --git a/nym-wallet/src/theme/NymWalletTheme.tsx b/nym-wallet/src/theme/NymWalletTheme.tsx
index 78672ff72c..4cb08eb645 100644
--- a/nym-wallet/src/theme/NymWalletTheme.tsx
+++ b/nym-wallet/src/theme/NymWalletTheme.tsx
@@ -4,7 +4,10 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { getDesignTokens } from './theme';
 import '@assets/fonts/non-variable/fonts.css';
 
-export const NymWalletThemeWithMode: React.FC<{ mode: PaletteMode }> = ({ mode, children }) => {
+export const NymWalletThemeWithMode: FCWithChildren<{ mode: PaletteMode; children: React.ReactNode }> = ({
+  mode,
+  children,
+}) => {
   const theme = React.useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
   return (
     <ThemeProvider theme={theme}>
diff --git a/nym-wallet/src/theme/index.tsx b/nym-wallet/src/theme/index.tsx
index b2dd6f2c65..007e1f4761 100644
--- a/nym-wallet/src/theme/index.tsx
+++ b/nym-wallet/src/theme/index.tsx
@@ -9,12 +9,12 @@ import { NymWalletThemeWithMode } from './NymWalletTheme';
  * Provides the theme for the Network Explorer by reacting to the light/dark mode choice stored in the app context.
  */
 
-export const NymWalletTheme: React.FC = ({ children }) => {
+export const NymWalletTheme: FCWithChildren = ({ children }) => {
   const { mode } = useContext(AppContext);
   return <NymWalletThemeWithMode mode={mode}>{children}</NymWalletThemeWithMode>;
 };
 
-export const AuthTheme: React.FC = ({ children }) => {
+export const AuthTheme: FCWithChildren = ({ children }) => {
   const theme = createTheme(getDesignTokens('dark'));
   return (
     <ThemeProvider theme={theme}>
diff --git a/nym-wallet/src/typings/FC.d.ts b/nym-wallet/src/typings/FC.d.ts
new file mode 100644
index 0000000000..08ebdfa298
--- /dev/null
+++ b/nym-wallet/src/typings/FC.d.ts
@@ -0,0 +1 @@
+declare type FCWithChildren<P = {}> = React.FC<React.PropsWithChildren<P>>;
diff --git a/sdk/typescript/examples/react-webpack-with-theme-example/package.json b/sdk/typescript/examples/react-webpack-with-theme-example/package.json
index 7889c6d339..e3f767dfed 100644
--- a/sdk/typescript/examples/react-webpack-with-theme-example/package.json
+++ b/sdk/typescript/examples/react-webpack-with-theme-example/package.json
@@ -11,8 +11,8 @@
     "@nymproject/mui-theme": "^1.0.0",
     "@nymproject/react": "^1.0.0",
     "@nymproject/sdk": "1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-mui-dropzone": "^4.0.6",
     "use-clipboard-copy": "^0.2.0"
@@ -31,7 +31,8 @@
     "@testing-library/react": "^12.0.0",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
-    "@types/react": "^17.0.34",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "babel-loader": "^8.3.0",
diff --git a/sdk/typescript/examples/react-webpack-with-theme-example/src/App.tsx b/sdk/typescript/examples/react-webpack-with-theme-example/src/App.tsx
index 73c028d062..633a6ede8c 100644
--- a/sdk/typescript/examples/react-webpack-with-theme-example/src/App.tsx
+++ b/sdk/typescript/examples/react-webpack-with-theme-example/src/App.tsx
@@ -32,7 +32,7 @@ import { ThemeToggle } from './ThemeToggle';
 import { AppContextProvider, useAppContext } from './context';
 import { MixnetContextProvider, parseBinaryMessageHeaders, useMixnetContext } from './context/mixnet';
 
-export const AppTheme: React.FC = ({ children }) => {
+export const AppTheme: FCWithChildren = ({ children }) => {
   const { mode } = useAppContext();
 
   return <NymThemeProvider mode={mode}>{children}</NymThemeProvider>;
@@ -52,7 +52,7 @@ interface UploadState {
   files: File[];
 }
 
-export const Content: React.FC = () => {
+export const Content: FCWithChildren = () => {
   const theme = useTheme();
   const { isReady, address, connect, events, sendTextMessage, sendBinaryMessage } = useMixnetContext();
   const copy = useClipboard();
@@ -405,7 +405,7 @@ export const Content: React.FC = () => {
   );
 };
 
-export const App: React.FC = () => (
+export const App: FCWithChildren = () => (
   <AppContextProvider>
     <MixnetContextProvider>
       <AppTheme>
diff --git a/sdk/typescript/examples/react-webpack-with-theme-example/src/ThemeToggle.tsx b/sdk/typescript/examples/react-webpack-with-theme-example/src/ThemeToggle.tsx
index e52ed5dce5..2739f429e9 100644
--- a/sdk/typescript/examples/react-webpack-with-theme-example/src/ThemeToggle.tsx
+++ b/sdk/typescript/examples/react-webpack-with-theme-example/src/ThemeToggle.tsx
@@ -4,7 +4,7 @@ import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import { useAppContext } from './context';
 
-export const ThemeToggle: React.FC = () => {
+export const ThemeToggle: FCWithChildren = () => {
   const { mode, toggleMode } = useAppContext();
   return (
     <Button variant="outlined" color="secondary" onClick={toggleMode} sx={{ display: 'flex', alignItems: 'centre' }}>
diff --git a/sdk/typescript/examples/react-webpack-with-theme-example/src/context/index.tsx b/sdk/typescript/examples/react-webpack-with-theme-example/src/context/index.tsx
index 6c7b0ffdc6..92f620a1e5 100644
--- a/sdk/typescript/examples/react-webpack-with-theme-example/src/context/index.tsx
+++ b/sdk/typescript/examples/react-webpack-with-theme-example/src/context/index.tsx
@@ -18,7 +18,7 @@ export const useAppContext = (): State => {
   return context;
 };
 
-export const AppContextProvider: React.FC = ({ children }) => {
+export const AppContextProvider: FCWithChildren = ({ children }) => {
   // light/dark mode
   const [mode, setMode] = React.useState<PaletteMode>('dark');
 
diff --git a/sdk/typescript/examples/react-webpack-with-theme-example/src/context/mixnet.tsx b/sdk/typescript/examples/react-webpack-with-theme-example/src/context/mixnet.tsx
index 6704796b48..919402f779 100644
--- a/sdk/typescript/examples/react-webpack-with-theme-example/src/context/mixnet.tsx
+++ b/sdk/typescript/examples/react-webpack-with-theme-example/src/context/mixnet.tsx
@@ -33,7 +33,7 @@ export const useMixnetContext = (): State => {
   return context;
 };
 
-export const MixnetContextProvider: React.FC = ({ children }) => {
+export const MixnetContextProvider: FCWithChildren = ({ children }) => {
   const [isReady, setReady] = React.useState<boolean>(false);
   const [address, setAddress] = React.useState<string>();
 
diff --git a/testnet-faucet/package.json b/testnet-faucet/package.json
index d27f594537..e6d896622d 100644
--- a/testnet-faucet/package.json
+++ b/testnet-faucet/package.json
@@ -14,8 +14,8 @@
     "@mui/icons-material": "^5.1.1",
     "@mui/material": "^5.1.1",
     "@nymproject/nym-validator-client": "^0.18.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.20.1",
     "yup": "^0.32.11"
   },
diff --git a/testnet-faucet/src/context/index.tsx b/testnet-faucet/src/context/index.tsx
index 7ee97f4c22..74d7af06d2 100644
--- a/testnet-faucet/src/context/index.tsx
+++ b/testnet-faucet/src/context/index.tsx
@@ -5,7 +5,8 @@ import ClientValidator, {
 import { handleError } from '../utils'
 import { useCookie } from '..//hooks/useCookie'
 
-const { VALIDATOR_ADDRESS, MNEMONIC, TESTNET_URL_1, ACCOUNT_ADDRESS } = process.env;
+const { VALIDATOR_ADDRESS, MNEMONIC, TESTNET_URL_1, ACCOUNT_ADDRESS } =
+  process.env
 
 export const urls = {
   blockExplorer: 'https://sandbox-blocks.nymtech.net',
@@ -40,7 +41,7 @@ export enum EnumRequestType {
 
 export const GlobalContext = createContext({} as TGlobalContext)
 
-export const GlobalContextProvider: React.FC = ({ children }) => {
+export const GlobalContextProvider: FCWithChildren = ({ children }) => {
   const [validator, setValidator] = useState<ClientValidator>()
   const [loadingState, setLoadingState] = useState<TLoadingState>({
     isLoading: false,
diff --git a/testnet-faucet/src/theme/index.tsx b/testnet-faucet/src/theme/index.tsx
index c207d66110..dff02c9aba 100644
--- a/testnet-faucet/src/theme/index.tsx
+++ b/testnet-faucet/src/theme/index.tsx
@@ -3,7 +3,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { CssBaseline } from '@mui/material'
 import { getDesignTokens } from './theme'
 
-export const NymThemeProvider: React.FC = ({ children }) => {
+export const NymThemeProvider: FCWithChildren = ({ children }) => {
   const theme = createTheme(getDesignTokens('dark'))
   return (
     <ThemeProvider theme={theme}>
diff --git a/testnet-faucet/typings/FC.d.ts b/testnet-faucet/typings/FC.d.ts
new file mode 100644
index 0000000000..926141e0cb
--- /dev/null
+++ b/testnet-faucet/typings/FC.d.ts
@@ -0,0 +1 @@
+declare type FCWithChildren<P = {}> = React.FC<React.PropsWithChildren<P>>
diff --git a/ts-packages/eslint-config-react-typescript/package.json b/ts-packages/eslint-config-react-typescript/package.json
index 6593977ead..804075f705 100644
--- a/ts-packages/eslint-config-react-typescript/package.json
+++ b/ts-packages/eslint-config-react-typescript/package.json
@@ -19,8 +19,8 @@
     "eslint-plugin-react": ">= 7",
     "eslint-plugin-react-hooks": ">= 4",
     "eslint-plugin-storybook": "*",
-    "react": "17",
-    "react-dom": "17"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "eslint": "^8.10.0",
diff --git a/ts-packages/mui-theme/README.md b/ts-packages/mui-theme/README.md
index e90e701aca..50e2fb5077 100644
--- a/ts-packages/mui-theme/README.md
+++ b/ts-packages/mui-theme/README.md
@@ -3,6 +3,7 @@
 This package provides an extension to the MUI theme system to use Nym branding.
 
 If you are unfamiliar with Material UI theming, please read the following first:
+
 - https://mui.com/customization/theming/
 - https://mui.com/customization/palette/
 - https://mui.com/customization/dark-mode/#dark-mode-with-custom-palette
@@ -13,6 +14,7 @@ This package also provides a [template file](./template/mui-theme.d.ts) to add t
 
 Read the following if you are unfamiliar with module augmentation and declaration merging. Then
 look at the recommendations from Material UI docs for implementation:
+
 - https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
 - https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
 - https://mui.com/customization/palette/#adding-new-colors
@@ -22,7 +24,7 @@ look at the recommendations from Material UI docs for implementation:
 You can see an example of how to use this theme in [react-webpack-with-theme-example](../react-webpack-with-theme-example/src/App.tsx):
 
 ```typescript jsx
-export const App: React.FC = () => (
+export const App: FCWithChildren = () => (
   <AppContextProvider>
     <AppTheme>
       <Content />
@@ -30,13 +32,13 @@ export const App: React.FC = () => (
   </AppContextProvider>
 );
 
-export const AppTheme: React.FC = ({ children }) => {
+export const AppTheme: FCWithChildren = ({ children }) => {
   const { mode } = useAppContext();
 
   return <NymThemeProvider mode={mode}>{children}</NymThemeProvider>;
 };
 
-export const Content: React.FC = () => {
+export const Content: FCWithChildren = () => {
   ...
   <Typography sx={{ color: (theme) => theme.palette.nym.networkExplorer.mixnodes.status.active }}>
     The quick brown fox jumps over the white fence
diff --git a/ts-packages/mui-theme/package.json b/ts-packages/mui-theme/package.json
index 5f24054f80..61fd88c460 100644
--- a/ts-packages/mui-theme/package.json
+++ b/ts-packages/mui-theme/package.json
@@ -5,8 +5,8 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "peerDependencies": {
-    "react": "17",
-    "react-dom": "17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "@mui/material": "^5.0.1",
     "@mui/styles": "^5.0.1"
   },
@@ -30,7 +30,7 @@
     "ts-jest": "^27.0.5",
     "jest": "^27.1.0",
     "babel-plugin-root-import": "^5.1.0",
-    "@types/react": "^17.0.34",
+    "@types/react": "^18.0.26",
     "rimraf": "^3.0.2"
   },
   "scripts": {
diff --git a/ts-packages/mui-theme/src/theme/index.tsx b/ts-packages/mui-theme/src/theme/index.tsx
index 45a872a809..61bc7b1c96 100644
--- a/ts-packages/mui-theme/src/theme/index.tsx
+++ b/ts-packages/mui-theme/src/theme/index.tsx
@@ -8,7 +8,10 @@ import { getNetworkExplorerDesignTokens } from './network-explorer';
  * Provides the theme for the Nym Components by reacting to the light/dark mode choice.
  *
  */
-export const NymThemeProvider: React.FC<{ mode: PaletteMode }> = ({ mode, children }) => {
+export const NymThemeProvider: FCWithChildren<{ mode: PaletteMode; children: React.ReactNode }> = ({
+  mode,
+  children,
+}) => {
   const theme = React.useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
 
   return (
@@ -25,7 +28,10 @@ export const NymThemeProvider: React.FC<{ mode: PaletteMode }> = ({ mode, childr
  * TODO: remove this provider and theme tokens to unify theme
  *
  */
-export const NymNetworkExplorerThemeProvider: React.FC<{ mode: PaletteMode }> = ({ mode, children }) => {
+export const NymNetworkExplorerThemeProvider: FCWithChildren<{ mode: PaletteMode; children: React.ReactNode }> = ({
+  mode,
+  children,
+}) => {
   const theme = React.useMemo(() => createTheme(getNetworkExplorerDesignTokens(mode)), [mode]);
 
   return (
diff --git a/ts-packages/mui-theme/src/typings/FC.d.ts b/ts-packages/mui-theme/src/typings/FC.d.ts
new file mode 100644
index 0000000000..08ebdfa298
--- /dev/null
+++ b/ts-packages/mui-theme/src/typings/FC.d.ts
@@ -0,0 +1 @@
+declare type FCWithChildren<P = {}> = React.FC<React.PropsWithChildren<P>>;
diff --git a/ts-packages/react-components/package.json b/ts-packages/react-components/package.json
index 24011b0149..e3a9483d72 100644
--- a/ts-packages/react-components/package.json
+++ b/ts-packages/react-components/package.json
@@ -11,9 +11,15 @@
   },
   "typesVersions": {
     "*": {
-      "*": ["dist/components/*"],
-      "hooks/*": ["dist/hooks/*"],
-      "playground/*": ["dist/playground/*"]
+      "*": [
+        "dist/components/*"
+      ],
+      "hooks/*": [
+        "dist/hooks/*"
+      ],
+      "playground/*": [
+        "dist/playground/*"
+      ]
     }
   },
   "peerDependencies": {
@@ -24,8 +30,8 @@
     "@mui/styles": ">= 5",
     "@mui/system": ">= 5",
     "@nymproject/mui-theme": "1",
-    "react": "17",
-    "react-dom": "17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "@nymproject/nym-validator-client": "^0.18.0",
     "@nymproject/types": "1",
     "base58": "4",
@@ -48,7 +54,8 @@
     "@storybook/testing-library": "^0.0.9",
     "@svgr/webpack": "^6.1.1",
     "@types/flat": "^5.0.2",
-    "@types/react": "^17.0.39",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "babel-loader": "^8.2.3",
diff --git a/ts-packages/react-components/src/components/account/WalletAddressFormField.tsx b/ts-packages/react-components/src/components/account/WalletAddressFormField.tsx
index 147f7c8b99..a928bd007a 100644
--- a/ts-packages/react-components/src/components/account/WalletAddressFormField.tsx
+++ b/ts-packages/react-components/src/components/account/WalletAddressFormField.tsx
@@ -6,7 +6,7 @@ import { validateWalletAddress } from '@nymproject/types';
 import DoneIcon from '@mui/icons-material/Done';
 import { SxProps } from '@mui/system';
 
-export const WalletAddressFormField: React.FC<{
+export const WalletAddressFormField: FCWithChildren<{
   showTickOnValid?: boolean;
   fullWidth?: boolean;
   required?: boolean;
diff --git a/ts-packages/react-components/src/components/clipboard/CopyToClipboard.tsx b/ts-packages/react-components/src/components/clipboard/CopyToClipboard.tsx
index 2bcc6852fc..7050bd57ed 100644
--- a/ts-packages/react-components/src/components/clipboard/CopyToClipboard.tsx
+++ b/ts-packages/react-components/src/components/clipboard/CopyToClipboard.tsx
@@ -5,7 +5,7 @@ import DoneIcon from '@mui/icons-material/Done';
 import { Tooltip } from '@mui/material';
 import { SxProps } from '@mui/system';
 
-export const CopyToClipboard: React.FC<{
+export const CopyToClipboard: FCWithChildren<{
   value: string;
   tooltip?: React.ReactNode;
   onCopy?: (value: string) => void;
diff --git a/ts-packages/react-components/src/components/coins/CoinMark.tsx b/ts-packages/react-components/src/components/coins/CoinMark.tsx
index d313fdb369..c788ee1797 100644
--- a/ts-packages/react-components/src/components/coins/CoinMark.tsx
+++ b/ts-packages/react-components/src/components/coins/CoinMark.tsx
@@ -3,7 +3,7 @@ import { PaletteMode, useTheme } from '@mui/material';
 import TokenLight from '@assets/token/token-light.svg';
 import TokenDark from '@assets/token/token-dark.svg';
 
-export const CoinMark: React.FC<{
+export const CoinMark: FCWithChildren<{
   mode?: PaletteMode;
   width?: number | string;
   height?: number | string;
diff --git a/ts-packages/react-components/src/components/coins/CoinMarkTestnet.tsx b/ts-packages/react-components/src/components/coins/CoinMarkTestnet.tsx
index 3e32db176a..5f18999347 100644
--- a/ts-packages/react-components/src/components/coins/CoinMarkTestnet.tsx
+++ b/ts-packages/react-components/src/components/coins/CoinMarkTestnet.tsx
@@ -3,7 +3,7 @@ import { PaletteMode, useTheme } from '@mui/material';
 import TokenLight from '@assets/token/token-light-testnet.svg';
 import TokenDark from '@assets/token/token-dark-testnet.svg';
 
-export const CoinMarkTestnet: React.FC<{
+export const CoinMarkTestnet: FCWithChildren<{
   mode?: PaletteMode;
   width?: number | string;
   height?: number | string;
diff --git a/ts-packages/react-components/src/components/currency/Currency.tsx b/ts-packages/react-components/src/components/currency/Currency.tsx
index 6f740a3916..6c2f394dc0 100644
--- a/ts-packages/react-components/src/components/currency/Currency.tsx
+++ b/ts-packages/react-components/src/components/currency/Currency.tsx
@@ -4,7 +4,7 @@ import { Stack, SxProps, Typography } from '@mui/material';
 import { CurrencyWithCoinMark } from './CurrencyWithCoinMark';
 import { CURRENCY_AMOUNT_SPACING, CurrencyAmount } from './CurrencyAmount';
 
-export const Currency: React.FC<{
+export const Currency: FCWithChildren<{
   majorAmount?: DecCoin;
   showDenom?: boolean;
   showCoinMark?: boolean;
diff --git a/ts-packages/react-components/src/components/currency/CurrencyAmount.tsx b/ts-packages/react-components/src/components/currency/CurrencyAmount.tsx
index 534e79bf7c..948bd9d663 100644
--- a/ts-packages/react-components/src/components/currency/CurrencyAmount.tsx
+++ b/ts-packages/react-components/src/components/currency/CurrencyAmount.tsx
@@ -36,7 +36,7 @@ const toChunks = (value: String, size: number = 3): Array<string> => {
   return chunks.map((chars) => chars.join(''));
 };
 
-export const CurrencyAmountString: React.FC<{
+export const CurrencyAmountString: FCWithChildren<{
   majorAmount?: string;
   showSeparators?: boolean;
   sx?: SxProps;
@@ -93,7 +93,7 @@ export const CurrencyAmountString: React.FC<{
   );
 };
 
-export const CurrencyAmount: React.FC<{
+export const CurrencyAmount: FCWithChildren<{
   majorAmount?: DecCoin;
   showSeparators?: boolean;
   sx?: SxProps;
diff --git a/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx b/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
index d4449a8d40..1adea08132 100644
--- a/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
+++ b/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
@@ -8,7 +8,7 @@ import { CoinMark } from '../coins/CoinMark';
 const MAX_VALUE = 1_000_000_000_000_000;
 const MIN_VALUE = 0.000001;
 
-export const CurrencyFormField: React.FC<{
+export const CurrencyFormField: FCWithChildren<{
   autoFocus?: boolean;
   required?: boolean;
   fullWidth?: boolean;
diff --git a/ts-packages/react-components/src/components/currency/CurrencyWithCoinMark.tsx b/ts-packages/react-components/src/components/currency/CurrencyWithCoinMark.tsx
index 3431a975be..674ba507a9 100644
--- a/ts-packages/react-components/src/components/currency/CurrencyWithCoinMark.tsx
+++ b/ts-packages/react-components/src/components/currency/CurrencyWithCoinMark.tsx
@@ -6,7 +6,7 @@ import { CoinMark } from '../coins/CoinMark';
 import { CoinMarkTestnet } from '../coins/CoinMarkTestnet';
 import { CurrencyAmount } from './CurrencyAmount';
 
-export const CurrencyWithCoinMark: React.FC<{
+export const CurrencyWithCoinMark: FCWithChildren<{
   majorAmount?: DecCoin;
   fontSize?: number;
   prefix?: boolean;
diff --git a/ts-packages/react-components/src/components/logo/NymIcon.tsx b/ts-packages/react-components/src/components/logo/NymIcon.tsx
index 06d984120a..f7d887dffa 100644
--- a/ts-packages/react-components/src/components/logo/NymIcon.tsx
+++ b/ts-packages/react-components/src/components/logo/NymIcon.tsx
@@ -2,4 +2,4 @@ import * as React from 'react';
 import Logo from '@assets/logo/logo-circle-small.svg';
 import { LogoProps } from './LogoProps';
 
-export const NymIcon: React.FC<LogoProps> = ({ height, width }) => <Logo height={height} width={width} />;
+export const NymIcon: FCWithChildren<LogoProps> = ({ height, width }) => <Logo height={height} width={width} />;
diff --git a/ts-packages/react-components/src/components/logo/NymLogo.tsx b/ts-packages/react-components/src/components/logo/NymLogo.tsx
index 27ae65d064..28f6534629 100644
--- a/ts-packages/react-components/src/components/logo/NymLogo.tsx
+++ b/ts-packages/react-components/src/components/logo/NymLogo.tsx
@@ -2,4 +2,4 @@ import * as React from 'react';
 import Logo from '@assets/logo/logo-circle.svg';
 import { LogoProps } from './LogoProps';
 
-export const NymLogo: React.FC<LogoProps> = ({ height, width }) => <Logo height={height} width={width} />;
+export const NymLogo: FCWithChildren<LogoProps> = ({ height, width }) => <Logo height={height} width={width} />;
diff --git a/ts-packages/react-components/src/components/logo/NymWordmark.tsx b/ts-packages/react-components/src/components/logo/NymWordmark.tsx
index e2b96e0b3d..cbdc48bdf8 100644
--- a/ts-packages/react-components/src/components/logo/NymWordmark.tsx
+++ b/ts-packages/react-components/src/components/logo/NymWordmark.tsx
@@ -3,7 +3,7 @@ import Wordmark from '@assets/logo/logo-wordmark.svg';
 import { useTheme } from '@mui/material';
 import { LogoProps } from './LogoProps';
 
-export const NymWordmark: React.FC<LogoProps & { fill?: string }> = ({ height, width, fill }) => {
+export const NymWordmark: FCWithChildren<LogoProps & { fill?: string }> = ({ height, width, fill }) => {
   const theme = useTheme();
   return <Wordmark height={height} width={width} fill={fill || theme.palette.text.primary} />;
 };
diff --git a/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx b/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx
index 94fa6ae382..ec721408bf 100644
--- a/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx
+++ b/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx
@@ -6,7 +6,7 @@ import { validateKey } from '@nymproject/types';
 import DoneIcon from '@mui/icons-material/Done';
 import { SxProps } from '@mui/system';
 
-export const IdentityKeyFormField: React.FC<{
+export const IdentityKeyFormField: FCWithChildren<{
   showTickOnValid?: boolean;
   fullWidth?: boolean;
   required?: boolean;
diff --git a/ts-packages/react-components/src/components/networks/NetworkSelector.tsx b/ts-packages/react-components/src/components/networks/NetworkSelector.tsx
index b578b7fa73..0bcf3ea7bd 100644
--- a/ts-packages/react-components/src/components/networks/NetworkSelector.tsx
+++ b/ts-packages/react-components/src/components/networks/NetworkSelector.tsx
@@ -11,7 +11,7 @@ const networks: { networkName: Network; name: string }[] = [
   { networkName: 'QA', name: 'QA' },
 ];
 
-const NetworkItem: React.FC<{ title: string; isSelected: boolean; onSelect: () => void }> = ({
+const NetworkItem: FCWithChildren<{ title: string; isSelected: boolean; onSelect: () => void }> = ({
   title,
   isSelected,
   onSelect,
@@ -22,7 +22,7 @@ const NetworkItem: React.FC<{ title: string; isSelected: boolean; onSelect: () =
   </ListItem>
 );
 
-export const NetworkSelector: React.FC<{
+export const NetworkSelector: FCWithChildren<{
   network?: Network;
   onSwitchNetwork?: (newNetwork: Network) => void;
 }> = ({ network, onSwitchNetwork }) => {
diff --git a/ts-packages/react-components/src/playground/Playground.tsx b/ts-packages/react-components/src/playground/Playground.tsx
index e9d137ea42..43a66355a9 100644
--- a/ts-packages/react-components/src/playground/Playground.tsx
+++ b/ts-packages/react-components/src/playground/Playground.tsx
@@ -5,7 +5,7 @@ import { PlaygroundBasicSwitches } from './switches';
 import { PlaygroundFonts } from './fonts';
 import { PlaygroundTheme } from './theme';
 
-export const Playground: React.FC = () => (
+export const Playground: FCWithChildren = () => (
   <>
     <h2>Buttons</h2>
     <PlaygroundButtons />
diff --git a/ts-packages/react-components/src/playground/buttons.tsx b/ts-packages/react-components/src/playground/buttons.tsx
index ca12674da0..226ac527cd 100644
--- a/ts-packages/react-components/src/playground/buttons.tsx
+++ b/ts-packages/react-components/src/playground/buttons.tsx
@@ -1,7 +1,7 @@
-import { Button, Stack } from '@mui/material';
 import * as React from 'react';
+import { Button, Stack } from '@mui/material';
 
-export const PlaygroundButtons: React.FC = () => (
+export const PlaygroundButtons: FCWithChildren = () => (
   <Stack spacing={2} direction="row">
     <Button variant="text">Text</Button>
     <Button variant="contained">Contained</Button>
diff --git a/ts-packages/react-components/src/playground/checkboxes.tsx b/ts-packages/react-components/src/playground/checkboxes.tsx
index 90a020e2e0..a903fc1f59 100644
--- a/ts-packages/react-components/src/playground/checkboxes.tsx
+++ b/ts-packages/react-components/src/playground/checkboxes.tsx
@@ -3,7 +3,7 @@ import Checkbox from '@mui/material/Checkbox';
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
-export const PlaygroundCheckboxes: React.FC = () => (
+export const PlaygroundCheckboxes: FCWithChildren = () => (
   <div>
     <Checkbox {...label} defaultChecked />
     <Checkbox {...label} />
diff --git a/ts-packages/react-components/src/playground/fonts.tsx b/ts-packages/react-components/src/playground/fonts.tsx
index 5bbd822905..a7347c0191 100644
--- a/ts-packages/react-components/src/playground/fonts.tsx
+++ b/ts-packages/react-components/src/playground/fonts.tsx
@@ -4,7 +4,7 @@ const CONTENT = 'The quick brown fox jumped over the white fence';
 
 const WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
 
-export const PlaygroundFonts: React.FC = () => (
+export const PlaygroundFonts: FCWithChildren = () => (
   <div style={{ fontFamily: 'Open Sans' }}>
     {WEIGHTS.map((fontWeight) => (
       <div key={`weight-${fontWeight}`}>
diff --git a/ts-packages/react-components/src/playground/switches.tsx b/ts-packages/react-components/src/playground/switches.tsx
index edda1654a9..dde14e1e2b 100644
--- a/ts-packages/react-components/src/playground/switches.tsx
+++ b/ts-packages/react-components/src/playground/switches.tsx
@@ -3,7 +3,7 @@ import Switch from '@mui/material/Switch';
 
 const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
-export const PlaygroundBasicSwitches: React.FC = () => (
+export const PlaygroundBasicSwitches: FCWithChildren = () => (
   <div>
     <Switch {...label} defaultChecked />
     <Switch {...label} />
diff --git a/ts-packages/react-components/src/playground/theme.tsx b/ts-packages/react-components/src/playground/theme.tsx
index 609dd86aa9..8bab62e51b 100644
--- a/ts-packages/react-components/src/playground/theme.tsx
+++ b/ts-packages/react-components/src/playground/theme.tsx
@@ -3,7 +3,7 @@ import { useTheme } from '@mui/material';
 import { MUIThemeExplorer } from './theme/MUIThemeExplorer';
 import { PaletteSwatches, PaletteSwatchesList } from './theme/PaletteSwatches';
 
-export const PlaygroundTheme: React.FC = () => {
+export const PlaygroundTheme: FCWithChildren = () => {
   const theme = useTheme();
   return (
     <>
@@ -15,7 +15,7 @@ export const PlaygroundTheme: React.FC = () => {
   );
 };
 
-export const PlaygroundPalette: React.FC = () => {
+export const PlaygroundPalette: FCWithChildren = () => {
   const theme = useTheme();
   return <PaletteSwatchesList theme={theme} />;
 };
diff --git a/ts-packages/react-components/src/playground/theme/MUIThemeExplorer.tsx b/ts-packages/react-components/src/playground/theme/MUIThemeExplorer.tsx
index e395969a72..82b64dae9c 100644
--- a/ts-packages/react-components/src/playground/theme/MUIThemeExplorer.tsx
+++ b/ts-packages/react-components/src/playground/theme/MUIThemeExplorer.tsx
@@ -7,7 +7,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import { Box } from '@mui/material';
 
-const MUIThemeExplorerItem: React.FC<{
+const MUIThemeExplorerItem: FCWithChildren<{
   path: string;
   parentKey: string;
   theme: Theme;
@@ -82,7 +82,7 @@ const MUIThemeExplorerItem: React.FC<{
   return null;
 };
 
-export const MUIThemeExplorer: React.FC<{
+export const MUIThemeExplorer: FCWithChildren<{
   theme: Theme;
 }> = ({ theme }) => (
   <TreeView
diff --git a/ts-packages/react-components/src/playground/theme/PaletteSwatches.tsx b/ts-packages/react-components/src/playground/theme/PaletteSwatches.tsx
index 8b2d91115c..9e194941d2 100644
--- a/ts-packages/react-components/src/playground/theme/PaletteSwatches.tsx
+++ b/ts-packages/react-components/src/playground/theme/PaletteSwatches.tsx
@@ -5,7 +5,7 @@ import flatten from 'flat';
 
 const SWATCH_SIZE = '40px';
 
-const PaletteSwatch: React.FC<{
+const PaletteSwatch: FCWithChildren<{
   theme: Theme;
   path: string;
   value: string;
@@ -29,7 +29,7 @@ const PaletteSwatch: React.FC<{
   </>
 );
 
-export const PaletteSwatches: React.FC<{
+export const PaletteSwatches: FCWithChildren<{
   theme: Theme;
 }> = ({ theme }) => {
   const swatches = React.useMemo<any>(() => flatten(theme.palette), [theme.palette]);
@@ -46,7 +46,7 @@ export const PaletteSwatches: React.FC<{
   );
 };
 
-export const PaletteSwatchesList: React.FC<{
+export const PaletteSwatchesList: FCWithChildren<{
   theme: Theme;
 }> = ({ theme }) => {
   const swatches = React.useMemo<any>(() => flatten(theme.palette), [theme.palette]);
diff --git a/ts-packages/react-components/src/typings/FC.d.ts b/ts-packages/react-components/src/typings/FC.d.ts
new file mode 100644
index 0000000000..08ebdfa298
--- /dev/null
+++ b/ts-packages/react-components/src/typings/FC.d.ts
@@ -0,0 +1 @@
+declare type FCWithChildren<P = {}> = React.FC<React.PropsWithChildren<P>>;
diff --git a/ts-packages/react-webpack-with-theme-example/README.md b/ts-packages/react-webpack-with-theme-example/README.md
index 37a3029f11..a95d916957 100644
--- a/ts-packages/react-webpack-with-theme-example/README.md
+++ b/ts-packages/react-webpack-with-theme-example/README.md
@@ -51,7 +51,7 @@ Storybook is available in [@nymproject/react](../react-components/src/stories/In
 The [Nym theme](../mui-theme/src/theme/theme.ts) provides a theme provider that you can add as follows:
 
 ```typescript jsx
-export const App: React.FC = () => (
+export const App: FCWithChildren = () => (
   <AppContextProvider>
     <AppTheme>
       <Content />
@@ -59,13 +59,13 @@ export const App: React.FC = () => (
   </AppContextProvider>
 );
 
-export const AppTheme: React.FC = ({ children }) => {
+export const AppTheme: FCWithChildren = ({ children }) => {
   const { mode } = useAppContext();
 
   return <NymThemeProvider mode={mode}>{children}</NymThemeProvider>;
 };
 
-export const Content: React.FC = () => {
+export const Content: FCWithChildren = () => {
 ...
 }
 ```
diff --git a/ts-packages/react-webpack-with-theme-example/package.json b/ts-packages/react-webpack-with-theme-example/package.json
index fc05cce9c6..078ebc27cb 100644
--- a/ts-packages/react-webpack-with-theme-example/package.json
+++ b/ts-packages/react-webpack-with-theme-example/package.json
@@ -4,8 +4,8 @@
   "version": "1.0.0",
   "license": "Apache-2.0",
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "@mui/material": "^5.0.1",
     "@mui/styles": "^5.0.1",
     "@mui/icons-material": "^5.5.0",
@@ -27,7 +27,7 @@
     "@testing-library/react": "^12.0.0",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
-    "@types/react": "^17.0.34",
+    "@types/react": "^18.0.26",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "babel-loader": "^8.3.0",
diff --git a/ts-packages/react-webpack-with-theme-example/src/App.tsx b/ts-packages/react-webpack-with-theme-example/src/App.tsx
index 80ca1cc33a..6f70787807 100644
--- a/ts-packages/react-webpack-with-theme-example/src/App.tsx
+++ b/ts-packages/react-webpack-with-theme-example/src/App.tsx
@@ -8,13 +8,13 @@ import { useTheme } from '@mui/material/styles';
 import { ThemeToggle } from './ThemeToggle';
 import { AppContextProvider, useAppContext } from './context';
 
-export const AppTheme: React.FC = ({ children }) => {
+export const AppTheme: FCWithChildren = ({ children }) => {
   const { mode } = useAppContext();
 
   return <NymThemeProvider mode={mode}>{children}</NymThemeProvider>;
 };
 
-export const Content: React.FC = () => {
+export const Content: FCWithChildren = () => {
   const { mode } = useAppContext();
   const theme = useTheme();
   const isMounted = useIsMounted();
@@ -70,7 +70,7 @@ export const Content: React.FC = () => {
   );
 };
 
-export const App: React.FC = () => (
+export const App: FCWithChildren = () => (
   <AppContextProvider>
     <AppTheme>
       <Content />
diff --git a/ts-packages/react-webpack-with-theme-example/src/ThemeToggle.tsx b/ts-packages/react-webpack-with-theme-example/src/ThemeToggle.tsx
index e52ed5dce5..2739f429e9 100644
--- a/ts-packages/react-webpack-with-theme-example/src/ThemeToggle.tsx
+++ b/ts-packages/react-webpack-with-theme-example/src/ThemeToggle.tsx
@@ -4,7 +4,7 @@ import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import { useAppContext } from './context';
 
-export const ThemeToggle: React.FC = () => {
+export const ThemeToggle: FCWithChildren = () => {
   const { mode, toggleMode } = useAppContext();
   return (
     <Button variant="outlined" color="secondary" onClick={toggleMode} sx={{ display: 'flex', alignItems: 'centre' }}>
diff --git a/ts-packages/react-webpack-with-theme-example/src/context/index.tsx b/ts-packages/react-webpack-with-theme-example/src/context/index.tsx
index 6c7b0ffdc6..92f620a1e5 100644
--- a/ts-packages/react-webpack-with-theme-example/src/context/index.tsx
+++ b/ts-packages/react-webpack-with-theme-example/src/context/index.tsx
@@ -18,7 +18,7 @@ export const useAppContext = (): State => {
   return context;
 };
 
-export const AppContextProvider: React.FC = ({ children }) => {
+export const AppContextProvider: FCWithChildren = ({ children }) => {
   // light/dark mode
   const [mode, setMode] = React.useState<PaletteMode>('dark');
 
diff --git a/ts-packages/react-webpack-with-theme-example/src/typings/FC.d.ts b/ts-packages/react-webpack-with-theme-example/src/typings/FC.d.ts
new file mode 100644
index 0000000000..08ebdfa298
--- /dev/null
+++ b/ts-packages/react-webpack-with-theme-example/src/typings/FC.d.ts
@@ -0,0 +1 @@
+declare type FCWithChildren<P = {}> = React.FC<React.PropsWithChildren<P>>;
diff --git a/ts-packages/react-webpack-with-theme-example/yarn-error.log b/ts-packages/react-webpack-with-theme-example/yarn-error.log
index bfac813326..fa53412aed 100644
--- a/ts-packages/react-webpack-with-theme-example/yarn-error.log
+++ b/ts-packages/react-webpack-with-theme-example/yarn-error.log
@@ -28,8 +28,8 @@ npm manifest:
     "version": "1.0.0",
     "license": "Apache-2.0",
     "dependencies": {
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2",
+      "react": "^18.2.0",
+     "react-dom": "^18.2.0",
       "@mui/material": "^5.0.1",
       "@mui/styles": "^5.0.1",
       "@nymproject/mui-theme" : "^1.0.0",
diff --git a/ts-packages/webpack/package.json b/ts-packages/webpack/package.json
index a75218889d..800eab8ab0 100644
--- a/ts-packages/webpack/package.json
+++ b/ts-packages/webpack/package.json
@@ -5,8 +5,8 @@
   "license": "Apache-2.0",
   "main": "index.js",
   "peerDependencies": {
-    "react": "17",
-    "react-dom": "17"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
diff --git a/yarn.lock b/yarn.lock
index 467c692143..de1a069b7a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5198,13 +5198,20 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@*", "@types/react-dom@^17.0.9":
+"@types/react-dom@*":
   version "17.0.13"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
   integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^18.0.10":
+  version "18.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352"
+  integrity sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-is@^16.7.1 || ^17.0.0":
   version "17.0.3"
   resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
@@ -5243,7 +5250,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^17.0.34", "@types/react@^17.0.39":
+"@types/react@*":
   version "17.0.39"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
   integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
@@ -5252,6 +5259,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.0.26":
+  version "18.0.26"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
+  integrity sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/retry@^0.12.0":
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.1.tgz#d8f1c0d0dc23afad6dc16a9e993a0865774b4065"
@@ -16292,14 +16308,13 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
 react-dropzone@^10.2.1:
   version "10.2.2"
@@ -16559,13 +16574,12 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 read-cmd-shim@^2.0.0:
   version "2.0.0"
@@ -17271,13 +17285,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@2.7.0:
   version "2.7.0"