diff --git a/package.json b/package.json
index 1c740c61ba..0adacae9c2 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,10 @@
     "packages/sites/*"
   ],
   "resolutions": {
-    "@types/react": "<18",
-    "@types/react-dom": "<18",
-    "react": "<18",
-    "react-dom": "<18",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
diff --git a/packages/configs/cra-template/template.json b/packages/configs/cra-template/template.json
index 1ab80a82d1..d47b0e7690 100644
--- a/packages/configs/cra-template/template.json
+++ b/packages/configs/cra-template/template.json
@@ -1,8 +1,8 @@
 {
   "package": {
     "dependencies": {
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2",
+      "react": "^18.3.1",
+      "react-dom": "^18.3.1",
       "@veupathdb/wdk-client": "workspace:^",
       "@veupathdb/web-common": "workspace:^"
     },
@@ -23,8 +23,8 @@
       "@testing-library/react": "12.1.2",
       "@testing-library/user-event": "13.5.0",
       "@types/node": "^14.0.0",
-      "@types/react": "^17.0.38",
-      "@types/react-dom": "^17.0.11",
+      "@types/react": "^18.3.1",
+      "@types/react-dom": "^18.3.0",
       "@types/react-router-dom": "^5.3.3",
       "@veupathdb/browserslist-config": "workspace:^",
       "@veupathdb/components": "workspace:^",
diff --git a/packages/libs/blast-summary-view/package.json b/packages/libs/blast-summary-view/package.json
index d8a13a1dd3..9d99f30f02 100644
--- a/packages/libs/blast-summary-view/package.json
+++ b/packages/libs/blast-summary-view/package.json
@@ -47,10 +47,10 @@
     "@babel/core": "^7.17.9",
     "@babel/plugin-syntax-flow": "^7.14.5",
     "@babel/plugin-transform-react-jsx": "^7.14.9",
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/react": "^11.10.0",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@emotion/utils": "^1.1.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
@@ -60,8 +60,8 @@
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",
     "@types/node": "^14.0.0",
-    "@types/react": "^17.0.47",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@veupathdb/browserslist-config": "workspace:^",
@@ -81,14 +81,14 @@
     "eslint-config-react-app": "^7.0.0",
     "ify-loader": "^1.1.0",
     "jquery": "1.9.1",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "path-browserify": "^1.0.1",
     "popper.js": "^1.16.1",
     "postcss": "^8.1.0",
     "querystring-es3": "^0.2.1",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-app-rewired": "^2.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.1.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.3.0",
diff --git a/packages/libs/components/package.json b/packages/libs/components/package.json
index e9be2fb6fb..c8d6c7cdf3 100755
--- a/packages/libs/components/package.json
+++ b/packages/libs/components/package.json
@@ -75,7 +75,7 @@
     "@babel/core": "^7.17.9",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
-    "@emotion/react": "^11.10.0",
+    "@emotion/react": "^11.11.4",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -99,8 +99,8 @@
     "@types/leaflet": "^1.7.9",
     "@types/lodash": "^4.14.164",
     "@types/md5": "^2.2.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-leaflet": "^2.5.2",
     "@types/react-plotly.js": "^2.2.4",
     "@types/stats-lite": "^2.2.0",
@@ -116,8 +116,8 @@
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "npm-run-all": "^4.1.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-query": "^3.39.3",
     "stats-lite": "^2.2.0",
     "storybook": "^6.5.14",
diff --git a/packages/libs/components/src/plots/PlotlyPlot.tsx b/packages/libs/components/src/plots/PlotlyPlot.tsx
index 442a4e4b3d..a59d7b6a06 100755
--- a/packages/libs/components/src/plots/PlotlyPlot.tsx
+++ b/packages/libs/components/src/plots/PlotlyPlot.tsx
@@ -8,7 +8,7 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from 'react';
-import { PlotParams } from 'react-plotly.js';
+import { Figure, PlotParams } from 'react-plotly.js';
 import { legendSpecification } from '../utils/plotly';
 import Spinner from '../components/Spinner';
 import { PlotRef } from '../types/plots';
@@ -220,7 +220,7 @@ function PlotlyPlot<T>(
 
   // ellipsis with tooltip for legend, legend title, and independent axis tick labels
   const onRender = useCallback(
-    (figure, graphDiv: Readonly<HTMLElement>) => {
+    (figure: Figure, graphDiv: Readonly<HTMLElement>) => {
       onPlotlyRender && onPlotlyRender(figure, graphDiv);
       // legend tooltip
       // remove pre-existing title to avoid duplicates
@@ -344,7 +344,7 @@ function PlotlyPlot<T>(
   );
 
   const onInitialized = useCallback(
-    (figure, graphDiv: Readonly<HTMLElement>) => {
+    (figure: Figure, graphDiv: Readonly<HTMLElement>) => {
       onRender(figure, graphDiv);
       sharedPlotCreation.run();
     },
diff --git a/packages/libs/components/src/plots/facetedPlots/FacetedPiePlot.tsx b/packages/libs/components/src/plots/facetedPlots/FacetedPiePlot.tsx
index 5a22195eb4..f7a784abc3 100644
--- a/packages/libs/components/src/plots/facetedPlots/FacetedPiePlot.tsx
+++ b/packages/libs/components/src/plots/facetedPlots/FacetedPiePlot.tsx
@@ -26,7 +26,7 @@ type FacetedPiePlotProps = Omit<
 
 const FacetedPiePlot = (facetedPiePlotProps: FacetedPiePlotProps) => {
   const { componentProps } = facetedPiePlotProps;
-  const onPlotlyRender = useCallback((_, graphDiv) => {
+  const onPlotlyRender = useCallback((_: any, graphDiv: HTMLElement) => {
     // Replace each slice DOM node with a copy of itself.
     // This removes the existing click event handler, which
     // otherwise blocks the click handler that opens the modal
diff --git a/packages/libs/components/src/stories/widgets/DateInput.stories.tsx b/packages/libs/components/src/stories/widgets/DateInput.stories.tsx
index c68e54cb90..9238da40aa 100644
--- a/packages/libs/components/src/stories/widgets/DateInput.stories.tsx
+++ b/packages/libs/components/src/stories/widgets/DateInput.stories.tsx
@@ -14,7 +14,7 @@ export default {
 const ControlledTemplate: Story<DateInputProps> = (args) => {
   const [value, setValue] = useState<string>('2005-01-03');
   const onValueChange = useCallback(
-    (newValue) => {
+    (newValue: any) => {
       console.log(`new value = ${newValue}`);
       setValue(newValue as string);
     },
diff --git a/packages/libs/components/src/stories/widgets/DateRangeInput.stories.tsx b/packages/libs/components/src/stories/widgets/DateRangeInput.stories.tsx
index 62d2d08a54..eaaf6771e6 100644
--- a/packages/libs/components/src/stories/widgets/DateRangeInput.stories.tsx
+++ b/packages/libs/components/src/stories/widgets/DateRangeInput.stories.tsx
@@ -21,7 +21,7 @@ export const ControlledLinked: Story<DateRangeInputProps> = () => {
   // there must be a cleverer way to do this
   // avoiding the cut and paste
   const handleChangeA = useCallback(
-    (newRange) => {
+    (newRange: any) => {
       console.log(`A: new range = ${newRange.min} to ${newRange.max}`);
       setRange(newRange);
     },
@@ -29,7 +29,7 @@ export const ControlledLinked: Story<DateRangeInputProps> = () => {
   );
 
   const handleChangeB = useCallback(
-    (newRange) => {
+    (newRange: any) => {
       console.log(`B: new range = ${newRange.min} to ${newRange.max}`);
       setRange(newRange);
     },
diff --git a/packages/libs/components/src/stories/widgets/NumberInput.stories.tsx b/packages/libs/components/src/stories/widgets/NumberInput.stories.tsx
index ef1ac8945d..0e7fe73499 100644
--- a/packages/libs/components/src/stories/widgets/NumberInput.stories.tsx
+++ b/packages/libs/components/src/stories/widgets/NumberInput.stories.tsx
@@ -14,7 +14,7 @@ export default {
 const ControlledTemplate: Story<NumberInputProps> = (args) => {
   const [value, setValue] = useState<number | undefined>(args.value ?? 1);
   const onValueChange = useCallback(
-    (newValue) => {
+    (newValue: any) => {
       console.log(`new value = ${newValue}`);
       setValue(newValue as number);
     },
diff --git a/packages/libs/components/src/stories/widgets/NumberRangeInput.stories.tsx b/packages/libs/components/src/stories/widgets/NumberRangeInput.stories.tsx
index 7876f295ec..853d259ab1 100644
--- a/packages/libs/components/src/stories/widgets/NumberRangeInput.stories.tsx
+++ b/packages/libs/components/src/stories/widgets/NumberRangeInput.stories.tsx
@@ -16,7 +16,7 @@ export const EmptyAtStart: Story<NumberRangeInputProps> = () => {
   const [range, setRange] = useState<NumberRange | undefined>();
 
   const handleChange = useCallback(
-    (newRange) => {
+    (newRange: any) => {
       console.log(`new range = ${newRange?.min} to ${newRange?.max}`);
       setRange(newRange);
     },
@@ -32,7 +32,7 @@ export const NoPartialRangesWithClear: Story<NumberRangeInputProps> = () => {
   const [range, setRange] = useState<NumberRange | undefined>();
 
   const handleChange = useCallback(
-    (newRange) => {
+    (newRange: any) => {
       console.log(`new range = ${newRange?.min} to ${newRange?.max}`);
       setRange(newRange);
     },
@@ -57,7 +57,7 @@ export const ControlledLinked: Story<NumberRangeInputProps> = () => {
   // there must be a cleverer way to do this
   // avoiding the cut and paste
   const handleChangeA = useCallback(
-    (newRange) => {
+    (newRange: any) => {
       console.log(`A: new range = ${newRange?.min} to ${newRange?.max}`);
       setRange(newRange);
     },
@@ -65,7 +65,7 @@ export const ControlledLinked: Story<NumberRangeInputProps> = () => {
   );
 
   const handleChangeB = useCallback(
-    (newRange) => {
+    (newRange: any) => {
       console.log(`B: new range = ${newRange?.min} to ${newRange?.max}`);
       setRange(newRange);
     },
@@ -101,14 +101,14 @@ export const CustomValidator: Story<NumberRangeInputProps> = () => {
   const [range, setRange] = useState<NumberRange | undefined>();
 
   const handleChange = useCallback(
-    (newRange) => {
+    (newRange: any) => {
       console.log(`new range = ${newRange?.min} to ${newRange?.max}`);
       setRange(newRange);
     },
     [setRange]
   );
   const validate = useCallback(
-    (range) => {
+    (range: any) => {
       console.log(`validating range ${range.min} to ${range.max}`);
       if (range && range.max != null && range.min != null) {
         if (range.max - range.min === 5) {
diff --git a/packages/libs/coreui/package.json b/packages/libs/coreui/package.json
index c38d610550..40c13c90c4 100644
--- a/packages/libs/coreui/package.json
+++ b/packages/libs/coreui/package.json
@@ -49,10 +49,10 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@emotion/babel-plugin": "^11.3.0",
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/react": "^11.10.0",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@storybook/addon-actions": "^6.5.14",
@@ -76,10 +76,10 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-storybook": "^0.5.7",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "resize-observer-polyfill": "^1.5.1",
     "sass-loader": "^7.3.1",
     "typescript": "4.5.5"
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx
index 468227edc0..62fa58732d 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx
@@ -68,12 +68,11 @@ class DataCell extends React.PureComponent {
     const props = {
       style,
       children,
-      key,
       className,
       ...(isChildRow ? { colSpan: childRowColSpan } : null),
     };
 
-    return column.hidden ? null : <td {...props} />;
+    return column.hidden ? null : <td key={key} {...props} />;
   }
 }
 
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx
index a89f807e02..4a8c46b822 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx
@@ -287,9 +287,9 @@ class HeadingCell extends React.PureComponent {
       !column.primary &&
       typeof eventHandlers.onColumnReorder === 'function';
 
-    const props = { style, key, ref, draggable, children, className };
+    const props = { style, ref, draggable, children, className };
 
-    return column.hidden ? null : <th {...props} {...domEvents} />;
+    return column.hidden ? null : <th key={key} {...props} {...domEvents} />;
   }
 }
 
diff --git a/packages/libs/coreui/src/components/inputs/SelectTree/Utils.tsx b/packages/libs/coreui/src/components/inputs/SelectTree/Utils.tsx
index 5218d07a5b..6c0ec06408 100644
--- a/packages/libs/coreui/src/components/inputs/SelectTree/Utils.tsx
+++ b/packages/libs/coreui/src/components/inputs/SelectTree/Utils.tsx
@@ -78,7 +78,7 @@ export function mapStructure<T, U>(
   getChildren: ChildrenGetter<T>,
   root: T
 ): U {
-  let mappedChildren = Seq.from(getChildren(root))
+  const mappedChildren = Seq.from(getChildren(root))
     .map((child) => mapStructure(mapFn, getChildren, child))
     .toArray();
   return mapFn(root, mappedChildren);
@@ -136,8 +136,8 @@ export function* preorder<T>(
   getChildren: ChildrenGetter<T>
 ): Iterable<T> {
   yield root;
-  let children = getChildren(root);
-  let length = children.length;
+  const children = getChildren(root);
+  const length = children.length;
   for (let i = 0; i < length; i++) {
     yield* preorder(children[i], getChildren);
   }
@@ -293,7 +293,7 @@ export function* concat<T>(...iterables: Iterable<T>[]) {
 
 export function* map<T, U>(fn: Mapper<T, U>, iterable: Iterable<T>) {
   for (let iter = iterable[Symbol.iterator](); ; ) {
-    let { done, value } = iter.next();
+    const { done, value } = iter.next();
     if (done) break;
     yield fn(value);
   }
@@ -301,16 +301,16 @@ export function* map<T, U>(fn: Mapper<T, U>, iterable: Iterable<T>) {
 
 export function* flatMap<T, U>(fn: FlatMapper<T, U>, iterable: Iterable<T>) {
   for (let iter = iterable[Symbol.iterator](); ; ) {
-    let { done, value } = iter.next();
+    const { done, value } = iter.next();
     if (done) break;
     yield* fn(value);
   }
 }
 
 export function* uniq<T>(iterable: Iterable<T>) {
-  let values = new Set();
+  const values = new Set();
   for (let iter = iterable[Symbol.iterator](); ; ) {
-    let { done, value } = iter.next();
+    const { done, value } = iter.next();
     if (done) break;
     if (values.has(value) === false) {
       values.add(value);
@@ -326,7 +326,7 @@ export function filter<T, U extends T>(
 export function filter<T>(fn: Predicate<T>, iterable: Iterable<T>): Iterable<T>;
 export function* filter<T>(fn: Predicate<T>, iterable: Iterable<T>) {
   for (let iter = iterable[Symbol.iterator](); ; ) {
-    let { done, value } = iter.next();
+    const { done, value } = iter.next();
     if (done) break;
     if (fn(value)) yield value;
   }
@@ -334,7 +334,7 @@ export function* filter<T>(fn: Predicate<T>, iterable: Iterable<T>) {
 
 export function some<T>(test: Predicate<T>, iterable: Iterable<T>): boolean {
   for (let iter = iterable[Symbol.iterator](); ; ) {
-    let { done, value } = iter.next();
+    const { done, value } = iter.next();
     if (done) break;
     if (test(value) === true) return true;
   }
@@ -351,7 +351,7 @@ export function reduce<T, U>(
 ): U {
   let result = seedValue;
   for (let iter = iterable[Symbol.iterator](); ; ) {
-    let { done, value } = iter.next();
+    const { done, value } = iter.next();
     if (done) break;
     result = fn(result, value);
   }
@@ -369,7 +369,7 @@ export function safeHtml<P>(
 export function safeHtml<P>(
   str: string,
   props?: P,
-  Component?: React.StatelessComponent<P>
+  Component?: React.FunctionComponent<P>
 ): JSX.Element;
 export function safeHtml<P>(
   str: string,
@@ -385,7 +385,7 @@ export function safeHtml<P>(
     return <Component {...props}>{str}</Component>;
   }
   // Use innerHTML to auto close tags
-  let container = document.createElement('div');
+  const container = document.createElement('div');
   container.innerHTML = str;
   return (
     <Component
@@ -418,7 +418,7 @@ export function addOrRemove<T>(array: T[], value: T): T[] {
  * @returns {Array<String>} A set of query terms parsed from searchQueryString
  */
 export function parseSearchQueryString(searchQueryString: string) {
-  let match = searchQueryString.match(/[^\s"]+|"[^"]*"/g);
+  const match = searchQueryString.match(/[^\s"]+|"[^"]*"/g);
   if (match == null) return [];
   return match.map(function (queryTerm) {
     if (queryTerm.startsWith('"')) {
diff --git a/packages/libs/coreui/src/components/notifications/SnackbarProvider.tsx b/packages/libs/coreui/src/components/notifications/SnackbarProvider.tsx
index 9e71f75f0d..af33be76da 100644
--- a/packages/libs/coreui/src/components/notifications/SnackbarProvider.tsx
+++ b/packages/libs/coreui/src/components/notifications/SnackbarProvider.tsx
@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, styled } from '@material-ui/core';
 import { CSSProperties, StyleRules } from '@material-ui/core/styles/withStyles';
 import {
   CombinedClassKey,
   SnackbarProvider,
   SnackbarProviderProps,
-  VariantClassKey,
+  MaterialDesignContent,
 } from 'notistack';
 
 import {
@@ -36,19 +36,10 @@ export interface WrappedSnackbarProviderProps<StyleProps>
 export default function makeSnackbarProvider<
   StyleProps extends { theme?: UITheme },
   ClassKey extends CombinedClassKey
->(
-  styles?: StyleRules<ClassKey, StyleProps>,
-  displayName: string = 'SnackbarProvider'
-) {
+>(styles?: StyleRules<ClassKey, StyleProps>, displayName = 'SnackbarProvider') {
   const useStyles = makeStyles({
-    variantSuccess: makeSnackbarVariantStyles(success),
-    variantError: makeSnackbarVariantStyles(error),
-    variantWarning: makeSnackbarVariantStyles(warning),
-    variantInfo({ theme }) {
-      return makeSnackbarVariantStyles(theme?.palette.primary.hue ?? mutedBlue);
-    },
     ...styles,
-  } as StyleRules<ClassKey | VariantClassKey, StyleProps>);
+  } as StyleRules<ClassKey, StyleProps>);
 
   function WrappedSnackbarProvider({
     styleProps,
@@ -65,10 +56,28 @@ export default function makeSnackbarProvider<
       [theme, styleProps]
     );
 
+    const StyledSnackbarContent = styled(MaterialDesignContent)({
+      '&.notistack-MuiContent-success': makeSnackbarVariantStyles(success),
+      '&.notistack-MuiContent-error': makeSnackbarVariantStyles(error),
+      '&.notistack-MuiContent-warning': makeSnackbarVariantStyles(warning),
+      '&.notistack-MuiContent-info': makeSnackbarVariantStyles(
+        theme?.palette.primary.hue ?? mutedBlue
+      ),
+    });
+
     const classes = useStyles(fullStyleProps);
 
     return (
-      <SnackbarProvider classes={classes} {...snackbarProps}>
+      <SnackbarProvider
+        classes={classes}
+        Components={{
+          success: StyledSnackbarContent,
+          error: StyledSnackbarContent,
+          warning: StyledSnackbarContent,
+          info: StyledSnackbarContent,
+        }}
+        {...snackbarProps}
+      >
         {snackbarProps.children}
       </SnackbarProvider>
     );
@@ -90,7 +99,7 @@ export function makeSnackbarVariantStyles(variantHue: ColorHue): CSSProperties {
       fontWeight: 'bold',
     },
     '& svg': {
-      fill: variantHue[600],
+      fill: `${variantHue[600]} !important`,
     },
   };
 }
diff --git a/packages/libs/eda/package.json b/packages/libs/eda/package.json
index 5759d3650c..815c829d77 100644
--- a/packages/libs/eda/package.json
+++ b/packages/libs/eda/package.json
@@ -55,9 +55,9 @@
     "extends @veupathdb/browserslist-config"
   ],
   "devDependencies": {
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -71,8 +71,8 @@
     "@types/lodash": "^4.14.182",
     "@types/luxon": "^3.0.1",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-leaflet": "^2.5.2",
     "@types/react-resizable": "^1.7.2",
     "@types/react-router-dom": "^5.3.3",
@@ -88,14 +88,14 @@
     "buffer": "^6.0.3",
     "http-proxy-middleware": "^2.0.6",
     "ify-loader": "^1.1.0",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "path-browserify": "^1.0.1",
     "postcss-normalize": "^10.0.1",
     "process": "^0.11.10",
     "querystring-es3": "^0.2.1",
-    "react": "^17.0.1",
+    "react": "^18.3.1",
     "react-app-rewired": "^2.2.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.3.1",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.1",
diff --git a/packages/libs/eda/src/lib/core/components/filter/HistogramFilter.tsx b/packages/libs/eda/src/lib/core/components/filter/HistogramFilter.tsx
index 696fd7e14d..7695eaf376 100755
--- a/packages/libs/eda/src/lib/core/components/filter/HistogramFilter.tsx
+++ b/packages/libs/eda/src/lib/core/components/filter/HistogramFilter.tsx
@@ -337,7 +337,7 @@ export function HistogramFilter(props: Props) {
       className="filter-param"
       style={{ position: 'relative', marginTop: '2em' }}
     >
-      {data.error && <pre>{String(data.error)}</pre>}
+      {data.error != null && <pre>{String(data.error)}</pre>}
       <div>
         <div
           style={{
diff --git a/packages/libs/eda/src/lib/core/components/filter/MultiFilter.tsx b/packages/libs/eda/src/lib/core/components/filter/MultiFilter.tsx
index e4ac398417..aec12df37e 100644
--- a/packages/libs/eda/src/lib/core/components/filter/MultiFilter.tsx
+++ b/packages/libs/eda/src/lib/core/components/filter/MultiFilter.tsx
@@ -124,11 +124,20 @@ export function MultiFilter(props: Props) {
 
   const [searchTerm, setSearchTerm] = useState('');
 
-  const onMemberSort = useCallback((_, sort) => {
-    setSort(sort);
-  }, []);
+  const onMemberSort = useCallback(
+    (
+      _: unknown,
+      sort: {
+        columnKey: string;
+        direction: 'asc' | 'desc';
+      }
+    ) => {
+      setSort(sort);
+    },
+    []
+  );
 
-  const onMemberSearch = useCallback((_, searchTerm: string) => {
+  const onMemberSearch = useCallback((_: unknown, searchTerm: string) => {
     setSearchTerm(searchTerm);
   }, []);
 
diff --git a/packages/libs/eda/src/lib/core/components/filter/TableFilter.tsx b/packages/libs/eda/src/lib/core/components/filter/TableFilter.tsx
index ee45db24b4..6049f4b5e6 100644
--- a/packages/libs/eda/src/lib/core/components/filter/TableFilter.tsx
+++ b/packages/libs/eda/src/lib/core/components/filter/TableFilter.tsx
@@ -329,7 +329,7 @@ export function TableFilter({
       {tableSummary.pending && (
         <Loading style={{ position: 'absolute', top: '-1.5em' }} radius={2} />
       )}
-      {tableSummary.error && <pre>{String(tableSummary.error)}</pre>}
+      {tableSummary.error != null && <pre>{String(tableSummary.error)}</pre>}
       {tableSummary.value &&
         tableSummary.value.entityId === entity.id &&
         tableSummary.value.variableId === variable.id && (
diff --git a/packages/libs/eda/src/lib/core/components/visualizations/PluginError.tsx b/packages/libs/eda/src/lib/core/components/visualizations/PluginError.tsx
index 628a4cfcb8..a1e343c512 100644
--- a/packages/libs/eda/src/lib/core/components/visualizations/PluginError.tsx
+++ b/packages/libs/eda/src/lib/core/components/visualizations/PluginError.tsx
@@ -1,5 +1,5 @@
 import Banner from '@veupathdb/coreui/lib/components/banners/Banner';
-import { ReactFragment } from 'react';
+import { ReactNode } from 'react';
 import { NoDataError } from '../../api/DataClient/NoDataError';
 
 interface Props {
@@ -9,7 +9,7 @@ interface Props {
   bannerType?: 'warning' | 'error';
 }
 
-type Case = (error: unknown) => string | ReactFragment | undefined;
+type Case = (error: unknown) => string | ReactNode | undefined;
 
 const defaultCases: Case[] = [
   (error) => (error instanceof NoDataError ? error.message : undefined),
@@ -34,7 +34,7 @@ export default function PluginError({
   const errorContent =
     (customCases ?? [])
       .concat([emptyCase, ...defaultCases])
-      .reduce<string | ReactFragment | undefined>(
+      .reduce<string | ReactNode | undefined>(
         (prev, caseFunction) => prev ?? caseFunction(error),
         undefined
       ) ?? fallbackErrorMessage;
diff --git a/packages/libs/eda/src/lib/core/utils/show-hide-variable-context.tsx b/packages/libs/eda/src/lib/core/utils/show-hide-variable-context.tsx
index 355b89a316..da31dc7f5b 100644
--- a/packages/libs/eda/src/lib/core/utils/show-hide-variable-context.tsx
+++ b/packages/libs/eda/src/lib/core/utils/show-hide-variable-context.tsx
@@ -7,7 +7,8 @@ export const ShowHideVariableContext = createContext({
   ) => {},
 });
 
-const ShowHideVariableContextProvider: React.FC<React.ReactNode> = ({
+// const ShowHideVariableContextProvider: React.FC<React.ReactNode> = ({
+const ShowHideVariableContextProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
   const [showOnlyCompatibleVariables, setShowOnlyCompatibleVariables] =
diff --git a/packages/libs/eda/src/lib/workspace/Variable.tsx b/packages/libs/eda/src/lib/workspace/Variable.tsx
index 9ab451b5ff..0e8e5b3507 100644
--- a/packages/libs/eda/src/lib/workspace/Variable.tsx
+++ b/packages/libs/eda/src/lib/workspace/Variable.tsx
@@ -83,7 +83,7 @@ export function VariableDetails(props: Props) {
               </i>
             </div>
             {/* showing three variables for multifilter or single variable */}
-            &nbsp;{threeProviderLabel}
+            <>&nbsp;{threeProviderLabel}</>
             {/* generalize Show/Hide more: there is a case that providerLabel is string */}
             {Array.isArray(providerLabel) && providerLabel.length > 3 ? (
               <>
@@ -199,18 +199,20 @@ function truncateProviderLabel(
         } else {
           return (
             <div key={variable as string}>
-              {variable}
-              {isThreeLabel &&
-                ((providerLabel as string[]).length > 3
-                  ? i === 2
+              <>
+                {variable}
+                {isThreeLabel &&
+                  ((providerLabel as string[]).length > 3
+                    ? i === 2
+                      ? ''
+                      : ','
+                    : i === (providerLabel as string[]).length - 1
                     ? ''
-                    : ','
-                  : i === (providerLabel as string[]).length - 1
-                  ? ''
-                  : ',')}
-              {!isThreeLabel &&
-                (i === (providerLabel as string[]).length - 4 ? '' : ',')}
-              &nbsp;
+                    : ',')}
+                {!isThreeLabel &&
+                  (i === (providerLabel as string[]).length - 4 ? '' : ',')}
+                &nbsp;
+              </>
             </div>
           );
         }
diff --git a/packages/libs/multi-blast/package.json b/packages/libs/multi-blast/package.json
index 944bf26d54..e105dc2848 100644
--- a/packages/libs/multi-blast/package.json
+++ b/packages/libs/multi-blast/package.json
@@ -52,9 +52,9 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@emotion/react": "^11.10.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -66,8 +66,8 @@
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.181",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.5",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.3",
@@ -93,9 +93,9 @@
     "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-testing-library": "^5.9.1",
     "http-proxy-middleware": "^1.0.6",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-app-rewired": "^2.2.1",
-    "react-dom": ">=16.14.0",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.2.6",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
diff --git a/packages/libs/preferred-organisms/package.json b/packages/libs/preferred-organisms/package.json
index 57603a2497..d547d6809d 100644
--- a/packages/libs/preferred-organisms/package.json
+++ b/packages/libs/preferred-organisms/package.json
@@ -45,9 +45,9 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@emotion/react": "^11.10.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -57,8 +57,8 @@
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.3.0",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
@@ -80,10 +80,10 @@
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
     "http-proxy-middleware": "^1.0.6",
-    "notistack": "^1.0.10",
-    "react": "^17.0.2",
+    "notistack": "^3.0.1",
+    "react": "^18.3.1",
     "react-app-rewired": "^2.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.2.6",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.3.0",
diff --git a/packages/libs/user-datasets-legacy/package.json b/packages/libs/user-datasets-legacy/package.json
index 723f39e15c..0aa7918bfe 100644
--- a/packages/libs/user-datasets-legacy/package.json
+++ b/packages/libs/user-datasets-legacy/package.json
@@ -44,10 +44,10 @@
     "@babel/core": "^7.17.9",
     "@babel/plugin-syntax-flow": "^7.14.5",
     "@babel/plugin-transform-react-jsx": "^7.14.9",
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/react": "^11.10.0",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@emotion/utils": "^1.1.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
@@ -58,8 +58,8 @@
     "@testing-library/user-event": "13.5.0",
     "@types/history": "^4.7.4",
     "@types/node": "^14.0.0",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@veupathdb/browserslist-config": "workspace:^",
@@ -78,13 +78,13 @@
     "eslint": "^8.7.0",
     "eslint-config-react-app": "^7.0.0",
     "ify-loader": "^1.1.0",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "path-browserify": "^1.0.1",
     "postcss": "^8.1.0",
     "querystring-es3": "^0.2.1",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-app-rewired": "^2.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
diff --git a/packages/libs/user-datasets/package.json b/packages/libs/user-datasets/package.json
index c49455a229..8fe7f9f856 100644
--- a/packages/libs/user-datasets/package.json
+++ b/packages/libs/user-datasets/package.json
@@ -44,10 +44,10 @@
     "@babel/core": "^7.17.9",
     "@babel/plugin-syntax-flow": "^7.14.5",
     "@babel/plugin-transform-react-jsx": "^7.14.9",
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/react": "^11.10.0",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@emotion/utils": "^1.1.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
@@ -58,8 +58,8 @@
     "@testing-library/user-event": "13.5.0",
     "@types/history": "^4.7.4",
     "@types/node": "^14.0.0",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@veupathdb/browserslist-config": "workspace:^",
@@ -78,13 +78,13 @@
     "eslint": "^8.7.0",
     "eslint-config-react-app": "^7.0.0",
     "ify-loader": "^1.1.0",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "path-browserify": "^1.0.1",
     "postcss": "^8.1.0",
     "querystring-es3": "^0.2.1",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-app-rewired": "^2.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/BigwigDatasetDetail.jsx b/packages/libs/user-datasets/src/lib/Components/Detail/BigwigDatasetDetail.jsx
index 2ffc3e962d..f9c39c47e1 100644
--- a/packages/libs/user-datasets/src/lib/Components/Detail/BigwigDatasetDetail.jsx
+++ b/packages/libs/user-datasets/src/lib/Components/Detail/BigwigDatasetDetail.jsx
@@ -133,6 +133,8 @@ class BigwigDatasetDetail extends UserDatasetDetail {
     );
   }
 
+  // See note in the base class, UserDatasetDetail
+  /** @return {import("react").ReactNode[]} */
   getPageSections() {
     const [headerSection, compatSection, fileSection] = super.getPageSections();
     return [
diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/BiomDatasetDetail.jsx b/packages/libs/user-datasets/src/lib/Components/Detail/BiomDatasetDetail.jsx
index f26ed689b1..fffcc9662b 100644
--- a/packages/libs/user-datasets/src/lib/Components/Detail/BiomDatasetDetail.jsx
+++ b/packages/libs/user-datasets/src/lib/Components/Detail/BiomDatasetDetail.jsx
@@ -31,6 +31,8 @@ class BiomDatasetDetail extends UserDatasetDetail {
     );
   }
 
+  // See note in the base class, UserDatasetDetail
+  /** @return {import("react").ReactNode[]} */
   getPageSections() {
     const [headerSection, , fileSection] = super.getPageSections();
 
diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/IsaDatasetDetail.jsx b/packages/libs/user-datasets/src/lib/Components/Detail/IsaDatasetDetail.jsx
index 2c52557f47..6dc37df326 100644
--- a/packages/libs/user-datasets/src/lib/Components/Detail/IsaDatasetDetail.jsx
+++ b/packages/libs/user-datasets/src/lib/Components/Detail/IsaDatasetDetail.jsx
@@ -47,6 +47,8 @@ class IsaDatasetDetail extends UserDatasetDetail {
     );
   }
 
+  // See note in the base class, UserDatasetDetail
+  /** @return {import("react").ReactNode[]} */
   getPageSections() {
     const [headerSection, , fileSection] = super.getPageSections();
 
diff --git a/packages/libs/wdk-client/package.json b/packages/libs/wdk-client/package.json
index 65e5ed1505..407fcd33e7 100644
--- a/packages/libs/wdk-client/package.json
+++ b/packages/libs/wdk-client/package.json
@@ -40,7 +40,7 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@emotion/react": "^11.10.0",
+    "@emotion/react": "^11.11.4",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -56,8 +56,8 @@
     "@types/node": "^14.14.7",
     "@types/prop-types": "^15.7.3",
     "@types/qtip2": "^2.2.29",
-    "@types/react": "^16.9.18",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.5",
     "@types/react-router": "^5.1.4",
     "@types/react-router-dom": "^5.1.3",
@@ -74,10 +74,10 @@
     "eslint-plugin-react": "^7.4.0",
     "jest": "^23.4.2",
     "jest-tap-reporter": "^1.9.0",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^5.1.2",
     "react-test-renderer": "^16.9.0",
     "shelljs": "^0.8.4",
diff --git a/packages/libs/wdk-client/src/Components/CheckboxTree/CategoriesCheckboxTree.tsx b/packages/libs/wdk-client/src/Components/CheckboxTree/CategoriesCheckboxTree.tsx
index 2205b58226..08d628d502 100644
--- a/packages/libs/wdk-client/src/Components/CheckboxTree/CategoriesCheckboxTree.tsx
+++ b/packages/libs/wdk-client/src/Components/CheckboxTree/CategoriesCheckboxTree.tsx
@@ -72,18 +72,18 @@ type Props = {
 let CategoriesCheckboxTree: FunctionComponent<Props> = (props) => {
   let {
     autoFocusSearchBox,
-    disableHelp,
+    disableHelp = false,
     expandedBranches,
     visibilityFilter,
-    isMultiPick,
-    isSelectable,
-    leafType,
+    isMultiPick = true,
+    isSelectable = true,
+    leafType = 'column',
     name,
     onChange,
     onSearchTermChange,
     onUiChange,
     renderNoResults,
-    renderNode,
+    renderNode = (node: CategoryTreeNode) => <BasicNodeComponent node={node} />,
     searchBoxPlaceholder,
     searchTerm,
     searchIconName = 'filter',
@@ -170,14 +170,6 @@ let CategoriesCheckboxTree: FunctionComponent<Props> = (props) => {
   );
 };
 
-CategoriesCheckboxTree.defaultProps = {
-  renderNode: (node: CategoryTreeNode) => <BasicNodeComponent node={node} />,
-  isMultiPick: true,
-  isSelectable: true,
-  leafType: 'column', // TODO remove once all consumers are passing in a value for this
-  disableHelp: false,
-} as Props;
-
 export default wrappable(CategoriesCheckboxTree);
 
 const getFilteredCategoryNodeChildren = partial(
diff --git a/packages/libs/wdk-client/src/Components/Display/CollapsibleSection.tsx b/packages/libs/wdk-client/src/Components/Display/CollapsibleSection.tsx
index d224c5e764..71f0ef9d92 100644
--- a/packages/libs/wdk-client/src/Components/Display/CollapsibleSection.tsx
+++ b/packages/libs/wdk-client/src/Components/Display/CollapsibleSection.tsx
@@ -15,7 +15,7 @@ interface Props {
   isCollapsed?: boolean;
   onCollapsedChange: (isCollapsed: boolean) => void;
   headerContent: React.ReactNode;
-  headerComponent?: React.ReactType;
+  headerComponent?: React.ComponentType;
   className?: string;
   children: React.ReactNode;
 }
diff --git a/packages/libs/wdk-client/src/Components/Display/TabbableContainer.tsx b/packages/libs/wdk-client/src/Components/Display/TabbableContainer.tsx
index 42fa18660d..30e2be98e3 100644
--- a/packages/libs/wdk-client/src/Components/Display/TabbableContainer.tsx
+++ b/packages/libs/wdk-client/src/Components/Display/TabbableContainer.tsx
@@ -6,6 +6,7 @@ type Props = {
   autoFocus: boolean;
   className?: string;
   onKeyDown?: (event: RKeyboardEvent) => void;
+  children: React.ReactNode;
 };
 
 /**
diff --git a/packages/libs/wdk-client/src/Components/InputControls/TextArea.tsx b/packages/libs/wdk-client/src/Components/InputControls/TextArea.tsx
index a8d2f48375..07fd9ace6e 100644
--- a/packages/libs/wdk-client/src/Components/InputControls/TextArea.tsx
+++ b/packages/libs/wdk-client/src/Components/InputControls/TextArea.tsx
@@ -15,7 +15,7 @@ type Props = InputPropsWithoutOnChange & {
   onChange: (value: string) => void;
 };
 
-let TextArea: React.SFC<Props> = function (props) {
+let TextArea: React.FC<Props> = function (props) {
   return (
     <textarea
       {...props}
diff --git a/packages/libs/wdk-client/src/Components/PageStatus/LoadError.tsx b/packages/libs/wdk-client/src/Components/PageStatus/LoadError.tsx
index f35bad7bfb..8bd3feeb63 100644
--- a/packages/libs/wdk-client/src/Components/PageStatus/LoadError.tsx
+++ b/packages/libs/wdk-client/src/Components/PageStatus/LoadError.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { wrappable } from '../../Utils/ComponentUtils';
 
 type Props = {
-  children?: React.ReactChildren;
+  children?: React.ReactNode;
 };
 
 export default wrappable(function LoadError(props: Props) {
diff --git a/packages/libs/wdk-client/src/Components/PageStatus/PermissionDenied.tsx b/packages/libs/wdk-client/src/Components/PageStatus/PermissionDenied.tsx
index 124631bb6f..06cd3994be 100644
--- a/packages/libs/wdk-client/src/Components/PageStatus/PermissionDenied.tsx
+++ b/packages/libs/wdk-client/src/Components/PageStatus/PermissionDenied.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { wrappable } from '../../Utils/ComponentUtils';
 
 type Props = {
-  children?: React.ReactChildren;
+  children?: React.ReactNode;
 };
 
 export default wrappable(function PermissionDenied(props: Props) {
diff --git a/packages/libs/wdk-client/src/Components/Shared/Spinnable.tsx b/packages/libs/wdk-client/src/Components/Shared/Spinnable.tsx
index e00930ec4d..ba6792c2f6 100644
--- a/packages/libs/wdk-client/src/Components/Shared/Spinnable.tsx
+++ b/packages/libs/wdk-client/src/Components/Shared/Spinnable.tsx
@@ -17,6 +17,8 @@ type Props = {
 
   /** Whether or not the element is spinning */
   spinning: boolean;
+
+  children?: React.ReactNode;
 };
 
 /**
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisButtonArray.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisButtonArray.tsx
index 43ad19d258..3e5963746a 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisButtonArray.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisButtonArray.tsx
@@ -4,7 +4,7 @@ interface StepAnalysisButtonArrayProps {
   configs: StepAnalysisButtonConfig[];
 }
 
-export const StepAnalysisButtonArray: React.SFC<StepAnalysisButtonArrayProps> =
+export const StepAnalysisButtonArray: React.FC<StepAnalysisButtonArrayProps> =
   ({ configs }) => (
     <div
       style={{
@@ -30,7 +30,7 @@ interface StepAnalysisButtonProps {
   contents?: ReactNode;
 }
 
-const StepAnalysisButton: React.SFC<StepAnalysisButtonProps> = ({
+const StepAnalysisButton: React.FC<StepAnalysisButtonProps> = ({
   onClick,
   customButton,
   href,
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisDefaultForm.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisDefaultForm.tsx
index da278aa0b9..6277a954d9 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisDefaultForm.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisDefaultForm.tsx
@@ -82,7 +82,7 @@ interface ParamDisplayNameProps {
   paramSpec: Parameter;
 }
 
-const ParamDisplayName: React.SFC<ParamDisplayNameProps> = ({ paramSpec }) => (
+const ParamDisplayName: React.FC<ParamDisplayNameProps> = ({ paramSpec }) => (
   <>{paramSpec.displayName}</>
 );
 
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisDescription.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisDescription.tsx
index 1caa43833a..0ecda450e6 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisDescription.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisDescription.tsx
@@ -9,7 +9,7 @@ interface StepAnalysisDescriptionProps {
   toggleDescription: () => void;
 }
 
-export const StepAnalysisDescription: React.SFC<StepAnalysisDescriptionProps> =
+export const StepAnalysisDescription: React.FC<StepAnalysisDescriptionProps> =
   ({
     shortDescription,
     description,
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisErrorsPane.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisErrorsPane.tsx
index 068672980a..7a8078c14c 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisErrorsPane.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisErrorsPane.tsx
@@ -4,7 +4,7 @@ interface StepAnalysisErrorsPaneProps {
   errors: string[];
 }
 
-export const StepAnalysisErrorsPane: React.SFC<StepAnalysisErrorsPaneProps> = ({
+export const StepAnalysisErrorsPane: React.FC<StepAnalysisErrorsPaneProps> = ({
   errors,
 }) => (
   <div className="step-analysis-errors-pane">
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisExternalResultFactory.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisExternalResultFactory.tsx
index cbf6c52b6f..df484a207f 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisExternalResultFactory.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisExternalResultFactory.tsx
@@ -35,7 +35,7 @@ export const contextHashQueryParamFactory = ({
 export const stepAnalysisExternalResultFactory =
   (
     queryParamFactories: [string, QueryParamFactory][]
-  ): React.SFC<StepAnalysisResultPluginProps> =>
+  ): React.FC<StepAnalysisResultPluginProps> =>
   (props) =>
     (
       <div className="external-result-container">
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisFormPane.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisFormPane.tsx
index d5a253f545..3b259cb5bd 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisFormPane.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisFormPane.tsx
@@ -25,7 +25,7 @@ export interface StepAnalysisFormPluginEventHandlers {
   onFormSubmit: () => void;
 }
 
-export const StepAnalysisFormPane: React.SFC<StepAnalysisFormPaneProps> = ({
+export const StepAnalysisFormPane: React.FC<StepAnalysisFormPaneProps> = ({
   formKey,
   formExpanded,
   formRenderer,
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisLinks.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisLinks.tsx
index f8ddf968a6..de91b9d90e 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisLinks.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisLinks.tsx
@@ -5,7 +5,7 @@ interface StepAnalysisLinksProps {
   duplicateAnalysis: () => void;
 }
 
-export const StepAnalysisLinks: React.SFC<StepAnalysisLinksProps> = ({
+export const StepAnalysisLinks: React.FC<StepAnalysisLinksProps> = ({
   renameAnalysis,
   duplicateAnalysis,
 }) => (
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisMenuPane.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisMenuPane.tsx
index dd2de98b80..7feef7a289 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisMenuPane.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisMenuPane.tsx
@@ -12,7 +12,7 @@ export interface StepAnalysisMenuPaneProps {
   errorMessage: string | null;
 }
 
-export const StepAnalysisMenuPane: React.SFC<
+export const StepAnalysisMenuPane: React.FC<
   StepAnalysisMenuPaneProps & StepAnalysisEventHandlers
 > = ({
   recordClassDisplayName,
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisResultsPane.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisResultsPane.tsx
index 1ecb881669..d816115911 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisResultsPane.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisResultsPane.tsx
@@ -23,7 +23,7 @@ export interface IncompleteResultState {
   reason: ReactNode;
 }
 
-export const StepAnalysisResultsPane: React.SFC<StepAnalysisResultPaneProps> = (
+export const StepAnalysisResultsPane: React.FC<StepAnalysisResultPaneProps> = (
   props
 ) => (
   <div>
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisSelectedPane.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisSelectedPane.tsx
index b8f71003ae..151049c75e 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisSelectedPane.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisSelectedPane.tsx
@@ -43,7 +43,7 @@ interface PluginRenderers {
   resultRenderer: (props: StepAnalysisResultPluginProps) => React.ReactNode;
 }
 
-export const StepAnalysisSelectedPane: React.SFC<StepAnalysisSelectedPaneProps> =
+export const StepAnalysisSelectedPane: React.FC<StepAnalysisSelectedPaneProps> =
   ({
     analysisName,
     descriptionState,
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx
index 737c4d9086..0f695bf9b0 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx
@@ -13,7 +13,7 @@ interface StepAnalysisTileProps {
   loadChoice: () => void;
 }
 
-export const StepAnalysisTile: React.SFC<StepAnalysisTileProps> = ({
+export const StepAnalysisTile: React.FC<StepAnalysisTileProps> = ({
   shortDescription,
   customThumbnailUrl,
   displayName,
diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisView.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisView.tsx
index b6a63df02a..7c01e1ed0c 100644
--- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisView.tsx
+++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisView.tsx
@@ -46,7 +46,7 @@ export interface StepAnalysisEventHandlers {
   duplicateAnalysis: () => void;
 }
 
-export const StepAnalysisView: React.SFC<
+export const StepAnalysisView: React.FC<
   StepAnalysisStateProps & StepAnalysisEventHandlers
 > = (props) => {
   // only call this once
diff --git a/packages/libs/wdk-client/src/Core/main.js b/packages/libs/wdk-client/src/Core/main.js
index d643454f8e..dff4736b0c 100644
--- a/packages/libs/wdk-client/src/Core/main.js
+++ b/packages/libs/wdk-client/src/Core/main.js
@@ -6,7 +6,7 @@ import '../Core/Style/index.scss';
 import { createBrowserHistory } from 'history';
 import { identity, isString } from 'lodash';
 import { createElement } from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import * as Components from '../Components';
 import { ClientPluginRegistryEntry } from '../Utils/ClientPlugin'; // eslint-disable-line no-unused-vars
 import { createMockHistory } from '../Utils/MockHistory';
@@ -127,7 +127,8 @@ export function initialize(options) {
         wdkDependencies,
         staticContent: retainContainerContent ? container.innerHTML : undefined,
       });
-      ReactDOM.render(applicationElement, container);
+      const root = ReactDOMClient.createRoot(container);
+      root.render(applicationElement);
     } else if (__DEV__) {
       console.debug(
         'Could not resolve rootElement %o. Application will not render automatically.',
diff --git a/packages/libs/wdk-client/src/Utils/ComponentUtils.tsx b/packages/libs/wdk-client/src/Utils/ComponentUtils.tsx
index 8f93c9ac94..b3d871b163 100644
--- a/packages/libs/wdk-client/src/Utils/ComponentUtils.tsx
+++ b/packages/libs/wdk-client/src/Utils/ComponentUtils.tsx
@@ -14,7 +14,7 @@ interface AnyObject {
  * Stateless function component decorator that prevents rerendering
  * when props are equal use shallow comparison.
  */
-export function pure<P>(Component: React.StatelessComponent<P>) {
+export function pure<P>(Component: React.FC<P>) {
   return class PureWrapper extends React.PureComponent<P> {
     static get displayName() {
       return `PureWrapper(${Component.displayName || Component.name})`;
@@ -148,9 +148,7 @@ interface LazyEnhance<T> {
  * })(ComponentThatNeedsData);
  */
 export function lazy<T>(load: (props: T) => Promise<void>): LazyEnhance<T> {
-  return function (
-    Component: React.ComponentClass<T> | React.StatelessComponent<T>
-  ) {
+  return function (Component: React.ComponentClass<T> | React.FC<T>) {
     class Lazy extends React.Component<T, { loading: boolean }> {
       displayName = `Lazy(${Component.displayName || Component.name})`;
       mounted?: boolean;
@@ -194,7 +192,7 @@ export function instrument<P>(
   options: InstrumentOptions
 ): React.ComponentClass<P>;
 export function instrument<P>(
-  Component: React.StatelessComponent<P>,
+  Component: React.FC<P>,
   options: InstrumentOptions
 ): React.ComponentClass<P>;
 export function instrument<P>(
@@ -248,7 +246,7 @@ export function safeHtml<P>(
 export function safeHtml<P>(
   str: string,
   props?: P,
-  Component?: React.StatelessComponent<P>
+  Component?: React.FC<P>
 ): JSX.Element;
 export function safeHtml<P>(
   str: string,
diff --git a/packages/libs/wdk-client/src/Utils/Platform.tsx b/packages/libs/wdk-client/src/Utils/Platform.tsx
index c3f55e9ffc..64d6723153 100644
--- a/packages/libs/wdk-client/src/Utils/Platform.tsx
+++ b/packages/libs/wdk-client/src/Utils/Platform.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 
 import { CommonModal } from '../Components';
 
@@ -59,23 +59,23 @@ export function dialog(
   return new Promise(function (resolve, reject) {
     const dialogNode = document.createElement('div');
     document.body.appendChild(dialogNode);
+    const root = ReactDOMClient.createRoot(dialogNode);
 
     const onSelectValue = (value: any) => {
       resolve(value);
-      ReactDOM.unmountComponentAtNode(dialogNode);
+      root.unmount();
       document.body.removeChild(dialogNode);
     };
 
     try {
-      ReactDOM.render(
+      root.render(
         <PlatformModal
           title={title}
           message={message}
           buttons={buttons}
           onSelectValue={onSelectValue}
           escapeValue={escapeValue}
-        />,
-        dialogNode
+        />
       );
     } catch (err) {
       reject(err);
diff --git a/packages/libs/wdk-client/src/Views/NotFound/NotFound.tsx b/packages/libs/wdk-client/src/Views/NotFound/NotFound.tsx
index 95a427e5e6..ee2d131877 100644
--- a/packages/libs/wdk-client/src/Views/NotFound/NotFound.tsx
+++ b/packages/libs/wdk-client/src/Views/NotFound/NotFound.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { wrappable } from '../../Utils/ComponentUtils';
 
-const NotFound: React.StatelessComponent = (props) => (
+interface Props {
+  children?: React.ReactNode;
+}
+
+const NotFound: React.FC = (props: Props) => (
   <div className="wdk-NotFound">
     <h1>Page Not Found</h1>
     {props.children || <p>The page you requested does not exist.</p>}
diff --git a/packages/libs/wdk-client/src/Views/Question/Params/DatasetParam.tsx b/packages/libs/wdk-client/src/Views/Question/Params/DatasetParam.tsx
index fcd69f2f90..5f5f1fd786 100644
--- a/packages/libs/wdk-client/src/Views/Question/Params/DatasetParam.tsx
+++ b/packages/libs/wdk-client/src/Views/Question/Params/DatasetParam.tsx
@@ -156,7 +156,7 @@ const getStrategyId = (uiState: State, parameter: DatasetParam) =>
 type Section = {
   sourceType: State['sourceType'];
   label: string;
-  render: React.StatelessComponent<Props<DatasetParam, State>>;
+  render: React.FC<Props<DatasetParam, State>>;
   isAvailable?: (props: Props<DatasetParam, State>) => boolean;
 };
 
diff --git a/packages/libs/wdk-client/src/Views/ReporterForm/ReporterSortMessage.tsx b/packages/libs/wdk-client/src/Views/ReporterForm/ReporterSortMessage.tsx
index 8697b402ba..d371535c39 100644
--- a/packages/libs/wdk-client/src/Views/ReporterForm/ReporterSortMessage.tsx
+++ b/packages/libs/wdk-client/src/Views/ReporterForm/ReporterSortMessage.tsx
@@ -1,11 +1,11 @@
-import React, { StatelessComponent } from 'react';
+import React from 'react';
 import { wrappable } from '../../Utils/ComponentUtils';
 
 type Props = {
   scope: string;
 };
 
-let ReporterSortMessage: StatelessComponent<Props> = (props) =>
+let ReporterSortMessage: React.FC<Props> = (props) =>
   props.scope === 'record' ? (
     <noscript />
   ) : (
diff --git a/packages/libs/wdk-client/src/Views/Strategy/StepDetailsDialog.tsx b/packages/libs/wdk-client/src/Views/Strategy/StepDetailsDialog.tsx
index 6cb23ff24b..701870f767 100644
--- a/packages/libs/wdk-client/src/Views/Strategy/StepDetailsDialog.tsx
+++ b/packages/libs/wdk-client/src/Views/Strategy/StepDetailsDialog.tsx
@@ -23,7 +23,7 @@ export interface StepAction {
   /** Unique identifier for the action */
   key: string;
   /** Text of the button */
-  display: React.ReactType<Props>;
+  display: React.FC<Props> | React.ComponentType<Props>;
   /** Action to take when user clicks */
   onClick: (props: Props) => void;
   /** The button should be disabled */
diff --git a/packages/libs/wdk-client/src/Views/Strategy/StrategyControls.tsx b/packages/libs/wdk-client/src/Views/Strategy/StrategyControls.tsx
index 0766fc190e..e6284271ec 100644
--- a/packages/libs/wdk-client/src/Views/Strategy/StrategyControls.tsx
+++ b/packages/libs/wdk-client/src/Views/Strategy/StrategyControls.tsx
@@ -81,7 +81,7 @@ interface ActionProps extends DispatchProps {
 interface StrategyAction {
   iconName: string;
   title: string;
-  render: React.ReactType<ActionProps>;
+  render: React.FC<ActionProps> | React.ComponentType<ActionProps>;
   loginRequired?: boolean;
 }
 
diff --git a/packages/libs/web-common/package.json b/packages/libs/web-common/package.json
index c6cbc217eb..5a2fd7aced 100644
--- a/packages/libs/web-common/package.json
+++ b/packages/libs/web-common/package.json
@@ -37,16 +37,16 @@
     "react-dom": ">=16.14"
   },
   "devDependencies": {
-    "@emotion/react": "^11.10.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@types/jqueryui": "^1.12.16",
     "@types/node": "^14.14.7",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.11",
@@ -58,10 +58,10 @@
     "bubleify": "^2.0.0",
     "icon-font-generator": "^2.1.11",
     "ify-loader": "^1.1.0",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "react": "16",
-    "react-dom": "16",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router": "5",
     "react-router-dom": "5",
     "shelljs": "^0.8.4",
diff --git a/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx b/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
index b876e3b02e..bd3073ddcc 100644
--- a/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
+++ b/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
@@ -70,14 +70,13 @@ class UserMenu extends React.Component {
 
           let props = {
             className,
-            key,
             onClick: onClick ? onClick : () => null,
           };
           if (href) props = Object.assign({}, props, { href, target });
           const Element = href ? 'a' : 'div';
 
           return (
-            <Element {...props}>
+            <Element key={key} {...props}>
               <Icon fa={item.icon + ' UserMenu-Pane-Item-Icon'} />
               {item.text}
             </Element>
diff --git a/packages/libs/web-common/src/components/FilterSummaryDialog.tsx b/packages/libs/web-common/src/components/FilterSummaryDialog.tsx
index 28a6687815..e6cf62f2f1 100644
--- a/packages/libs/web-common/src/components/FilterSummaryDialog.tsx
+++ b/packages/libs/web-common/src/components/FilterSummaryDialog.tsx
@@ -22,6 +22,7 @@ type Props = {
   isPinned: boolean;
   setVisible: (visible: boolean) => any;
   setPinned: (pinned: boolean) => any;
+  children?: React.ReactNode;
 };
 
 class FilterSummaryDialog extends React.Component<Props> {
diff --git a/packages/libs/web-common/src/components/homepage/Footer.tsx b/packages/libs/web-common/src/components/homepage/Footer.tsx
index fc5250f539..3844454b72 100644
--- a/packages/libs/web-common/src/components/homepage/Footer.tsx
+++ b/packages/libs/web-common/src/components/homepage/Footer.tsx
@@ -31,6 +31,7 @@ export const projects = [
 
 type Props = {
   containerClassName?: string;
+  children?: React.ReactNode;
 };
 
 export const Footer: FunctionComponent<Props> = ({
diff --git a/packages/libs/web-common/src/components/homepage/Main.tsx b/packages/libs/web-common/src/components/homepage/Main.tsx
index 64d7645858..18e925dfde 100644
--- a/packages/libs/web-common/src/components/homepage/Main.tsx
+++ b/packages/libs/web-common/src/components/homepage/Main.tsx
@@ -7,6 +7,7 @@ const cx = makeClassNameHelper('ebrc-Main');
 
 type Props = {
   containerClassName?: string;
+  children: React.ReactNode;
 };
 
 export const Main: FunctionComponent<Props> = (props) => (
diff --git a/packages/libs/web-common/src/controllers/LegacyMapRedirectHandler.tsx b/packages/libs/web-common/src/controllers/LegacyMapRedirectHandler.tsx
index d39ab124e5..6b813f8822 100644
--- a/packages/libs/web-common/src/controllers/LegacyMapRedirectHandler.tsx
+++ b/packages/libs/web-common/src/controllers/LegacyMapRedirectHandler.tsx
@@ -3,9 +3,13 @@ import QueryString from 'querystring';
 import { edaServiceUrl } from '../config';
 import { useConfiguredAnalysisClient } from '@veupathdb/eda/lib/core/hooks/client';
 import { createComputation } from '@veupathdb/eda/lib/core/components/computations/Utils';
-import { makeNewAnalysis } from '@veupathdb/eda/lib/core';
+import {
+  AdditionalAnalysisConfig,
+  makeNewAnalysis,
+} from '@veupathdb/eda/lib/core';
 import { RouteComponentProps } from 'react-router';
 import { LegacyRedirectState } from '@veupathdb/eda/lib/map/analysis/appState';
+import { Computation } from '@veupathdb/eda/lib/core/types/visualization';
 
 // Define constants to create new computations and analyses
 const MEGA_STUDY_ID = 'DS_480c976ef9';
@@ -23,6 +27,21 @@ const DEFAULT_COMPUTATION = createComputation(
   'Unnamed computation'
 );
 
+type RedirectDescriptor = {
+  descriptor: {
+    subset: {
+      descriptor: [
+        {
+          entityId: string;
+          variableId: string;
+          type: 'stringSet';
+          stringSet: string[];
+        }
+      ];
+    };
+  };
+};
+
 export function LegacyMapRedirectHandler({
   history,
   match,
@@ -36,7 +55,11 @@ export function LegacyMapRedirectHandler({
   const [hasCreatedAnalysis, setHasCreatedAnalysis] = useState(false);
 
   const handleLegacyMapRedirect = useCallback(
-    async (computation, additionalConfig = {}, legacyMapRedirectState) => {
+    async (
+      computation: Computation,
+      additionalConfig: AdditionalAnalysisConfig,
+      legacyMapRedirectState: LegacyRedirectState | undefined
+    ) => {
       if (hasCreatedAnalysis) return;
       setHasCreatedAnalysis(true);
       const { analysisId } = await analysisClient.createAnalysis(
@@ -47,7 +70,7 @@ export function LegacyMapRedirectHandler({
           '/legacy-redirect-handler',
           ''
         )}/${MEGA_STUDY_ID}/${analysisId}`,
-        state: legacyMapRedirectState as LegacyRedirectState,
+        state: legacyMapRedirectState,
       });
     },
     [analysisClient, history, match, hasCreatedAnalysis, setHasCreatedAnalysis]
@@ -60,8 +83,8 @@ export function LegacyMapRedirectHandler({
   const paramKeys = Object.keys(queryParams);
 
   if (paramKeys.length) {
-    if ('projectID' in queryParams) {
-      const descriptorConfig = {
+    if ('projectID' in queryParams && queryParams['projectID'] != null) {
+      const descriptorConfig: RedirectDescriptor = {
         descriptor: {
           subset: {
             descriptor: [
@@ -69,7 +92,9 @@ export function LegacyMapRedirectHandler({
                 entityId: MEGA_STUDIES_ENTITY_ID,
                 variableId: POPBIO_ID_VARIABLE_ID,
                 type: DESCRIPTOR_TYPE,
-                [DESCRIPTOR_TYPE]: [queryParams['projectID']],
+                [DESCRIPTOR_TYPE]: Array.isArray(queryParams['projectID'])
+                  ? queryParams['projectID']
+                  : [queryParams['projectID']],
               },
             ],
           },
@@ -78,7 +103,7 @@ export function LegacyMapRedirectHandler({
 
       if (paramKeys.length === 1) {
         // We know we have only the projectID param, so make new analysis and redirect
-        const additionalAnalysisConfig = {
+        const additionalAnalysisConfig: AdditionalAnalysisConfig = {
           ...baseAdditionalAnalysisConfig,
           ...descriptorConfig,
         };
@@ -91,7 +116,7 @@ export function LegacyMapRedirectHandler({
         // Here we have a projectID and other param(s), so populate the Notes -> Analysis Details info
         // with the additional param(s) and pass along the legacyMapRedirectState object
         const notes = composeParamListForNotesString(queryParams);
-        const additionalAnalysisConfig = {
+        const additionalAnalysisConfig: AdditionalAnalysisConfig = {
           ...descriptorConfig,
           ...baseAdditionalAnalysisConfig,
           notes,
@@ -99,7 +124,7 @@ export function LegacyMapRedirectHandler({
         const legacyMapRedirectState = {
           showLegacyMapRedirectModal: true,
           projectId: queryParams['projectID'],
-        };
+        } as LegacyRedirectState;
         handleLegacyMapRedirect(
           DEFAULT_COMPUTATION,
           additionalAnalysisConfig,
diff --git a/packages/libs/web-common/src/scroll-to-top.jsx b/packages/libs/web-common/src/scroll-to-top.jsx
index 3af1c6a732..d05a16ff44 100644
--- a/packages/libs/web-common/src/scroll-to-top.jsx
+++ b/packages/libs/web-common/src/scroll-to-top.jsx
@@ -2,8 +2,8 @@
  * Created by dfalke on 8/24/16.
  */
 import React from 'react';
-import { render } from 'react-dom';
-import { throttle, once, partial } from 'lodash';
+import { createRoot } from 'react-dom/client';
+import { throttle, partial } from 'lodash';
 
 const visibleStyle = {
   color: 'white',
@@ -34,31 +34,37 @@ const scrollToTop = () => {
   window.scrollTo(window.scrollX, 0);
 };
 
-const ScrollToTop = ({ style }) => (
-  <button
-    type="button"
-    style={style}
-    onClick={scrollToTop}
-    onMouseEnter={renderScrollToTopWithHover}
-    onMouseLeave={renderScrollToTopWithOutHover}
-    title="Go back to the top of the page."
-  >
-    <i className="fa fa-2x fa-arrow-up"></i>
-  </button>
-);
+document.addEventListener('DOMContentLoaded', () => {
+  const root = createRoot(
+    document.body.appendChild(document.createElement('div'))
+  );
+  const renderScrollToTop = (style) =>
+    root.render(
+      <ScrollToTop style={window.scrollY > 250 ? style : hiddenStyle} />
+    );
 
-const getDomNode = once(() =>
-  document.body.appendChild(document.createElement('div'))
-);
+  const renderScrollToTopWithHover = partial(renderScrollToTop, hoverStyle);
 
-const renderScrollToTop = (style) =>
-  render(
-    <ScrollToTop style={window.scrollY > 250 ? style : hiddenStyle} />,
-    getDomNode()
+  const renderScrollToTopWithOutHover = partial(
+    renderScrollToTop,
+    visibleStyle
   );
 
-const renderScrollToTopWithHover = partial(renderScrollToTop, hoverStyle);
-
-const renderScrollToTopWithOutHover = partial(renderScrollToTop, visibleStyle);
+  const ScrollToTop = ({ style }) => (
+    <button
+      type="button"
+      style={style}
+      onClick={scrollToTop}
+      onMouseEnter={renderScrollToTopWithHover}
+      onMouseLeave={renderScrollToTopWithOutHover}
+      title="Go back to the top of the page."
+    >
+      <i className="fa fa-2x fa-arrow-up"></i>
+    </button>
+  );
 
-window.addEventListener('scroll', throttle(renderScrollToTopWithOutHover, 250));
+  window.addEventListener(
+    'scroll',
+    throttle(renderScrollToTopWithOutHover, 250)
+  );
+});
diff --git a/packages/libs/web-common/src/util/customElements.jsx b/packages/libs/web-common/src/util/customElements.jsx
index 9fbb2c8bf6..efddb4ccbd 100644
--- a/packages/libs/web-common/src/util/customElements.jsx
+++ b/packages/libs/web-common/src/util/customElements.jsx
@@ -2,7 +2,7 @@
  * Register DOM element names to use the provided React Component.
  */
 
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import React, { Component } from 'react';
 
 let reactCustomElements = new Map();
@@ -39,23 +39,24 @@ export function renderWithCustomElements(html) {
 class ReactElementsContainer extends Component {
   constructor(props) {
     super(props);
-    this.targets = [];
+    this.roots = [];
   }
 
   componentDidMount() {
     this.node.innerHTML = this.props.html;
     for (let [nodeName, reactElementFactory] of reactCustomElements) {
       for (let target of this.node.querySelectorAll(nodeName)) {
-        this.targets.push(target);
+        const root = createRoot(target);
+        this.roots.push(root);
         let reactElement = reactElementFactory(target);
-        render(reactElement, target);
+        root.render(reactElement);
       }
     }
   }
 
   componentWillUnmount() {
-    this.targets.forEach(function (target) {
-      unmountComponentAtNode(target);
+    this.roots.forEach(function (root) {
+      root.unmount();
     });
   }
 
diff --git a/packages/sites/clinepi-site/package.json b/packages/sites/clinepi-site/package.json
index d7ddfb01a6..1a4fbaa5f4 100644
--- a/packages/sites/clinepi-site/package.json
+++ b/packages/sites/clinepi-site/package.json
@@ -23,14 +23,14 @@
     "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.14.5",
-    "@emotion/react": "^11.10.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@veupathdb/base-webpack-config": "workspace:^",
     "@veupathdb/browserslist-config": "workspace:^",
@@ -54,10 +54,10 @@
     "html-webpack-plugin": "^4.5.2",
     "ify-loader": "^1.1.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "react": "17",
-    "react-dom": "17",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.3.0",
     "redux": "^4.0.0",
diff --git a/packages/sites/genomics-site/package.json b/packages/sites/genomics-site/package.json
index 376369bc26..39bc7c72c5 100644
--- a/packages/sites/genomics-site/package.json
+++ b/packages/sites/genomics-site/package.json
@@ -20,16 +20,16 @@
     "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.14.5",
-    "@emotion/react": "^11.10.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@types/cytoscape": "^3.14.7",
     "@types/jqueryui": "^1.12.16",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-select": "3",
     "@veupathdb/base-webpack-config": "workspace:^",
@@ -64,11 +64,11 @@
     "jquery": "1.9.1",
     "js-cookie": "^2.2.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "popper.js": "^1.16.1",
-    "react": "17",
-    "react-dom": "17",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.3.0",
     "react-spring": "^8.0.27",
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/Srt.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/Srt.tsx
index e73d9dabb7..8cc0a5fd69 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/Srt.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/Srt.tsx
@@ -174,7 +174,10 @@ export function Srt() {
   }, [selectedSrtForm, srtTabsState]);
 
   const updateSrtTabsState = useCallback(
-    (idsState, formState) => {
+    (
+      idsState: string,
+      formState: BaseSrtFormConfig['defaultReporterFormState']
+    ) => {
       if (!selectedSrtForm) return;
       setSrtTabsState((prevTabsState) => ({
         ...prevTabsState,
@@ -305,14 +308,14 @@ function SrtForm({
   }, [defaultIdsState, defaultReporterFormState, updateSrtTabsState]);
 
   const updateIdsState = useCallback(
-    (newIdsState) => {
+    (newIdsState: string) => {
       updateSrtTabsState(newIdsState, formState);
     },
     [formState, updateSrtTabsState]
   );
 
   const updateFormState = useCallback(
-    (newFormState) => {
+    (newFormState: BaseSrtFormConfig['defaultReporterFormState']) => {
       updateSrtTabsState(idsState, newFormState);
     },
     [idsState, updateSrtTabsState]
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/EmptyChromosomeFilter.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/EmptyChromosomeFilter.tsx
index 47c77282c8..d07d528df9 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/EmptyChromosomeFilter.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/EmptyChromosomeFilter.tsx
@@ -5,7 +5,7 @@ interface EmptyChromosomesFilterProps {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const EmptyChromosomesFilter: React.SFC<EmptyChromosomesFilterProps> = ({
+export const EmptyChromosomesFilter: React.FC<EmptyChromosomesFilterProps> = ({
   applied,
   onChange,
 }) => (
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/FeatureTable.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/FeatureTable.tsx
index f334ac0cc5..638ea05b5b 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/FeatureTable.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/FeatureTable.tsx
@@ -67,7 +67,7 @@ interface FeatureTableProps {
   recordType: string;
 }
 
-export const FeatureTable: React.SFC<FeatureTableProps> = ({
+export const FeatureTable: React.FunctionComponent<FeatureTableProps> = ({
   region,
   sequence,
   displayName,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/FeatureTooltip.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/FeatureTooltip.tsx
index a14cf63765..0f3fa39940 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/FeatureTooltip.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/FeatureTooltip.tsx
@@ -12,7 +12,7 @@ interface FeatureTooltipProps {
   recordType: string;
 }
 
-export const FeatureTooltip: React.SFC<FeatureTooltipProps> = ({
+export const FeatureTooltip: React.FunctionComponent<FeatureTooltipProps> = ({
   feature,
   sequence,
   recordType,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/GenomeSummaryView.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/GenomeSummaryView.tsx
index 6d11bf3537..6d5d9caa72 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/GenomeSummaryView.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/GenomeSummaryView.tsx
@@ -21,58 +21,60 @@ export interface GenomeSummaryViewProps {
   unapplyEmptyChromosomeFilter: () => void;
 }
 
-export const GenomeSummaryView: React.SFC<GenomeSummaryViewProps> = ({
-  genomeSummaryData,
-  displayName,
-  displayNamePlural,
-  recordType,
-  regionDialogVisibilities,
-  emptyChromosomeFilterApplied,
-  showRegionDialog,
-  hideRegionDialog,
-  applyEmptyChromosomeFilter,
-  unapplyEmptyChromosomeFilter,
-}) => (
-  <div className="genome-view">
-    <ResultsLegend displayNamePlural={displayNamePlural} />
-    <EmptyChromosomesFilter
-      applied={emptyChromosomeFilterApplied}
-      onChange={() =>
-        emptyChromosomeFilterApplied
-          ? unapplyEmptyChromosomeFilter()
-          : applyEmptyChromosomeFilter()
-      }
-    />
-    {genomeSummaryData.type === 'untruncated' ? (
-      <Fragment>
-        {genomeSummaryData.sequences.flatMap((sequence, i) =>
-          sequence.regions.map((region, j) => (
-            <RegionDialog
-              key={region.sourceId}
-              sequence={sequence}
-              region={region}
-              open={regionDialogVisibilities[region.sourceId]}
-              onClose={() => hideRegionDialog(region.sourceId)}
-              displayName={displayName}
-              displayNamePlural={displayNamePlural}
-              recordType={recordType}
-            />
-          ))
-        )}
-        <ResultsTable
-          emptyChromosomeFilterApplied={emptyChromosomeFilterApplied}
-          displayName={displayName}
-          displayNamePlural={displayNamePlural}
-          report={genomeSummaryData}
-          recordType={recordType}
-          showRegionDialog={showRegionDialog}
-        />
-      </Fragment>
-    ) : (
-      <p>
-        The number of {displayNamePlural} in the result exceeds the display
-        limit (10000 IDs), Genomic Summary View is not available for the result.
-      </p>
-    )}
-  </div>
-);
+export const GenomeSummaryView: React.FunctionComponent<GenomeSummaryViewProps> =
+  ({
+    genomeSummaryData,
+    displayName,
+    displayNamePlural,
+    recordType,
+    regionDialogVisibilities,
+    emptyChromosomeFilterApplied,
+    showRegionDialog,
+    hideRegionDialog,
+    applyEmptyChromosomeFilter,
+    unapplyEmptyChromosomeFilter,
+  }) => (
+    <div className="genome-view">
+      <ResultsLegend displayNamePlural={displayNamePlural} />
+      <EmptyChromosomesFilter
+        applied={emptyChromosomeFilterApplied}
+        onChange={() =>
+          emptyChromosomeFilterApplied
+            ? unapplyEmptyChromosomeFilter()
+            : applyEmptyChromosomeFilter()
+        }
+      />
+      {genomeSummaryData.type === 'untruncated' ? (
+        <Fragment>
+          {genomeSummaryData.sequences.flatMap((sequence, i) =>
+            sequence.regions.map((region, j) => (
+              <RegionDialog
+                key={region.sourceId}
+                sequence={sequence}
+                region={region}
+                open={regionDialogVisibilities[region.sourceId]}
+                onClose={() => hideRegionDialog(region.sourceId)}
+                displayName={displayName}
+                displayNamePlural={displayNamePlural}
+                recordType={recordType}
+              />
+            ))
+          )}
+          <ResultsTable
+            emptyChromosomeFilterApplied={emptyChromosomeFilterApplied}
+            displayName={displayName}
+            displayNamePlural={displayNamePlural}
+            report={genomeSummaryData}
+            recordType={recordType}
+            showRegionDialog={showRegionDialog}
+          />
+        </Fragment>
+      ) : (
+        <p>
+          The number of {displayNamePlural} in the result exceeds the display
+          limit (10000 IDs), Genomic Summary View is not available for the
+          result.
+        </p>
+      )}
+    </div>
+  );
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/RegionDialog.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/RegionDialog.tsx
index 2b27085df4..78a4a8c897 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/RegionDialog.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/RegionDialog.tsx
@@ -20,7 +20,7 @@ interface RegionDialogProps {
   recordType: string;
 }
 
-export const RegionDialog: React.SFC<RegionDialogProps> = ({
+export const RegionDialog: React.FunctionComponent<RegionDialogProps> = ({
   region,
   sequence,
   open,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsLegend.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsLegend.tsx
index c685894524..fdba456459 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsLegend.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsLegend.tsx
@@ -4,7 +4,7 @@ interface ResultsLegendProps {
   displayNamePlural: string;
 }
 
-export const ResultsLegend: React.SFC<ResultsLegendProps> = ({
+export const ResultsLegend: React.FunctionComponent<ResultsLegendProps> = ({
   displayNamePlural,
 }) => (
   <div className="legend">
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsTable.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsTable.tsx
index fae4c54219..6b232d14e6 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsTable.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsTable.tsx
@@ -116,7 +116,7 @@ interface RegionProps {
   showDialog: () => void;
 }
 
-const Region: React.SFC<RegionProps> = ({
+const Region: React.FunctionComponent<RegionProps> = ({
   displayNamePlural,
   region,
   recordType,
@@ -144,7 +144,7 @@ interface MultiFeatureRegionProps {
   showDialog: () => void;
 }
 
-const MultiFeatureRegion: React.SFC<MultiFeatureRegionProps> = ({
+const MultiFeatureRegion: React.FunctionComponent<MultiFeatureRegionProps> = ({
   displayNamePlural,
   region,
   showDialog,
@@ -167,31 +167,27 @@ interface SingleFeatureRegionProps {
   recordType: string;
 }
 
-const SingleFeatureRegion: React.SFC<SingleFeatureRegionProps> = ({
-  region,
-  feature,
-  sequence,
-  recordType,
-}) => (
-  <Tooltip
-    interactive
-    title={
-      <FeatureTooltip
-        feature={feature}
-        sequence={sequence}
-        recordType={recordType}
-      />
-    }
-  >
-    <div
-      className={`feature ${feature.strand}`}
-      style={{
-        left: `${region.percentStart}%`,
-        width: `${region.percentLength}%`,
-      }}
-    ></div>
-  </Tooltip>
-);
+const SingleFeatureRegion: React.FunctionComponent<SingleFeatureRegionProps> =
+  ({ region, feature, sequence, recordType }) => (
+    <Tooltip
+      interactive
+      title={
+        <FeatureTooltip
+          feature={feature}
+          sequence={sequence}
+          recordType={recordType}
+        />
+      }
+    >
+      <div
+        className={`feature ${feature.strand}`}
+        style={{
+          left: `${region.percentStart}%`,
+          width: `${region.percentLength}%`,
+        }}
+      ></div>
+    </Tooltip>
+  );
 
 interface ResultsTableProps {
   emptyChromosomeFilterApplied: boolean;
@@ -214,7 +210,7 @@ const rowsFactory = defaultMemoize(
       : report.sequences.filter(({ featureCount }) => featureCount)
 );
 
-export const ResultsTable: React.SFC<ResultsTableProps> = ({
+export const ResultsTable: React.FunctionComponent<ResultsTableProps> = ({
   emptyChromosomeFilterApplied,
   report,
   displayName,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/ByGenotypeNumberCheckbox.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/ByGenotypeNumberCheckbox.tsx
index 43c8f37b3f..fa9df55c5e 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/ByGenotypeNumberCheckbox.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/ByGenotypeNumberCheckbox.tsx
@@ -263,7 +263,10 @@ interface TableBodyProps {
   checkedValues: Record<string, boolean>;
 }
 
-const TableBody: React.SFC<TableBodyProps> = ({ checkedValues, onToggle }) => (
+const TableBody: React.FunctionComponent<TableBodyProps> = ({
+  checkedValues,
+  onToggle,
+}) => (
   <tbody>
     {rowKeys.map((rowKey, i) => (
       <tr key={rowKey}>
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/FoldChange/sampleLabel.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/FoldChange/sampleLabel.tsx
index 6c2ac8cf35..c27e9f2a98 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/FoldChange/sampleLabel.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/FoldChange/sampleLabel.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
+type Props = {
+  children: React.ReactNode;
+};
+
 export const sampleLabel =
-  (className: string): React.FunctionComponent =>
+  (className: string): React.FunctionComponent<Props> =>
   ({ children }) =>
     <span className={className}>{children}</span>;
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx
index e352cee894..76adba80de 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx
@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { connect } from 'react-redux';
 
 import { RecordActions } from '@veupathdb/wdk-client/lib/Actions';
@@ -61,6 +61,7 @@ export const RecordHeading = connect(
         this.addProductTooltip.bind(this),
         300
       );
+      this.root = null;
     }
 
     componentDidMount() {
@@ -69,8 +70,10 @@ export const RecordHeading = connect(
       this.thumbsContainer = this.node.querySelector(
         '.eupathdb-ThumbnailsContainer'
       );
-      if (this.thumbsContainer) this.renderThumbnails();
-      else console.error('Warning: Could not find ThumbnailsContainer');
+      if (this.thumbsContainer) {
+        this.root = createRoot(this.thumbsContainer);
+        this.renderThumbnails();
+      } else console.error('Warning: Could not find ThumbnailsContainer');
     }
 
     handleThumbnailClick({ anchor }) {
@@ -78,12 +81,11 @@ export const RecordHeading = connect(
     }
 
     componentDidUpdate() {
-      if (this.thumbsContainer) this.renderThumbnails();
+      if (this.thumbsContainer && this.root) this.renderThumbnails();
     }
 
     componentWillUnmount() {
-      if (this.thumbsContainer)
-        ReactDOM.unmountComponentAtNode(this.thumbsContainer);
+      if (this.thumbsContainer && this.root) this.root.unmount();
       window.removeEventListener('resize', this.addProductTooltip);
       this.addProductTooltip.cancel();
     }
@@ -189,13 +191,12 @@ export const RecordHeading = connect(
         )
         .toArray();
 
-      ReactDOM.render(
+      this.root.render(
         <OverviewThumbnails
           title="Gene Features"
           thumbnails={filteredGBrowseContexts}
           onThumbnailClick={this.handleThumbnailClick}
-        />,
-        this.thumbsContainer
+        />
       );
     }
 
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx
index 21c80fb954..373f42c335 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx
@@ -86,7 +86,7 @@ const hpiGeneListResultColumns = (
     helpText: headerDescription[column.key],
   }));
 
-export const StepAnalysisHpiGeneListResults: React.SFC<StepAnalysisResultPluginProps> =
+export const StepAnalysisHpiGeneListResults: React.FunctionComponent<StepAnalysisResultPluginProps> =
   ({ analysisResult: { resultData, headerRow, headerDescription } }) => (
     <>
       <h3>Analysis Results: </h3>
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisPathwayEnrichmentResults.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisPathwayEnrichmentResults.tsx
index e9d4389530..633d326fb2 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisPathwayEnrichmentResults.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisPathwayEnrichmentResults.tsx
@@ -144,7 +144,7 @@ const pathwayButtonsConfigFactory = (
   },
 ];
 
-export const StepAnalysisPathwayEnrichmentResults: React.SFC<StepAnalysisResultPluginProps> =
+export const StepAnalysisPathwayEnrichmentResults: React.FunctionComponent<StepAnalysisResultPluginProps> =
   ({ analysisResult, analysisConfig, webAppUrl }) => {
     const [wordCloudOpen, setWordCloudOpen] = useState(false);
 
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisWordCloudModal.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisWordCloudModal.tsx
index d053116bc3..3e215c9be7 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisWordCloudModal.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisWordCloudModal.tsx
@@ -9,7 +9,7 @@ interface WordCloudModalProps {
   toolName: string;
 }
 
-export const WordCloudModal: React.SFC<WordCloudModalProps> = ({
+export const WordCloudModal: React.FunctionComponent<WordCloudModalProps> = ({
   imgUrl,
   open,
   onClose,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisWordEnrichmentResults.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisWordEnrichmentResults.tsx
index 4533be8f5c..1da59a3f69 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisWordEnrichmentResults.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisWordEnrichmentResults.tsx
@@ -103,7 +103,7 @@ const wordEnrichmentButtonsConfigFactory = (
   },
 ];
 
-export const StepAnalysisWordEnrichmentResults: React.SFC<StepAnalysisResultPluginProps> =
+export const StepAnalysisWordEnrichmentResults: React.FunctionComponent<StepAnalysisResultPluginProps> =
   ({ analysisResult, analysisConfig, webAppUrl }) => (
     <Fragment>
       <StepAnalysisButtonArray
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/AttachmentsField.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/AttachmentsField.tsx
index 2bff4190a7..4f91233db2 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/AttachmentsField.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/AttachmentsField.tsx
@@ -20,45 +20,46 @@ interface AttachmentsFieldProps {
 
 const NOOP = () => {};
 
-export const AttachmentsField: React.SFC<AttachmentsFieldProps> = ({
-  attachedFiles,
-  fileSpecsToAttach,
-  removeFileSpec,
-  modifyFileSpec,
-  addFileSpec,
-  removeAttachedFile,
-}) => (
-  <div className="wdk-AttachmentsField">
-    {attachedFiles.map((attachedFile) => (
-      <FileInputSubfield
-        key={attachedFile.id}
-        className="wdk-FileInputSubfield"
-        disabled
-        filename={attachedFile.name}
-        description={attachedFile.description}
-        onRemove={() => removeAttachedFile(attachedFile.id)}
-        onFileChange={NOOP}
-        onDescriptionChange={NOOP}
-      />
-    ))}
-    {fileSpecsToAttach.map((fileSpec, index) => (
-      <FileInputSubfield
-        key={`new-file-${fileSpec.id}`}
-        className="wdk-FileInputSubfield"
-        disabled={false}
-        onFileChange={(file) => file && modifyFileSpec({ file }, index)}
-        onDescriptionChange={(description) =>
-          modifyFileSpec({ description }, index)
-        }
-        onRemove={() => removeFileSpec(index)}
-        description={fileSpec.description}
-      />
-    ))}
-    <button
-      type="button"
-      onClick={() => addFileSpec({ file: null, description: '' })}
-    >
-      {fileSpecsToAttach.length === 0 ? 'Add a file' : 'Add another file'}
-    </button>
-  </div>
-);
+export const AttachmentsField: React.FunctionComponent<AttachmentsFieldProps> =
+  ({
+    attachedFiles,
+    fileSpecsToAttach,
+    removeFileSpec,
+    modifyFileSpec,
+    addFileSpec,
+    removeAttachedFile,
+  }) => (
+    <div className="wdk-AttachmentsField">
+      {attachedFiles.map((attachedFile) => (
+        <FileInputSubfield
+          key={attachedFile.id}
+          className="wdk-FileInputSubfield"
+          disabled
+          filename={attachedFile.name}
+          description={attachedFile.description}
+          onRemove={() => removeAttachedFile(attachedFile.id)}
+          onFileChange={NOOP}
+          onDescriptionChange={NOOP}
+        />
+      ))}
+      {fileSpecsToAttach.map((fileSpec, index) => (
+        <FileInputSubfield
+          key={`new-file-${fileSpec.id}`}
+          className="wdk-FileInputSubfield"
+          disabled={false}
+          onFileChange={(file) => file && modifyFileSpec({ file }, index)}
+          onDescriptionChange={(description) =>
+            modifyFileSpec({ description }, index)
+          }
+          onRemove={() => removeFileSpec(index)}
+          description={fileSpec.description}
+        />
+      ))}
+      <button
+        type="button"
+        onClick={() => addFileSpec({ file: null, description: '' })}
+      >
+        {fileSpecsToAttach.length === 0 ? 'Add a file' : 'Add another file'}
+      </button>
+    </div>
+  );
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FileInputSubfield.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FileInputSubfield.tsx
index cc45d0e1dc..2cd18258c7 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FileInputSubfield.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FileInputSubfield.tsx
@@ -13,52 +13,53 @@ interface FileInputSubfieldProps {
   className?: string;
 }
 
-export const FileInputSubfield: React.SFC<FileInputSubfieldProps> = ({
-  onFileChange,
-  onDescriptionChange,
-  onRemove,
-  filename,
-  description,
-  disabled,
-  className,
-}) => (
-  <div className={className}>
-    {disabled ? (
-      <FormRow label="Select a file:" field={filename} />
-    ) : (
-      <FormRow
-        label="Select a file:"
-        field={<FileInput required onChange={onFileChange} />}
-      />
-    )}
-    {
-      <a
-        href="#"
-        onClick={(event) => {
-          event.preventDefault();
-          onRemove();
-        }}
-      >
-        <i className="fa fa-times" />
-      </a>
-    }
-    <FormRow
-      label={
-        <>
-          Brief Description:
-          <br />
-          (4000 max characters)
-        </>
-      }
-      field={
-        <TextArea
-          required
-          maxLength={4000}
-          disabled={disabled}
-          onChange={onDescriptionChange}
-          value={description}
+export const FileInputSubfield: React.FunctionComponent<FileInputSubfieldProps> =
+  ({
+    onFileChange,
+    onDescriptionChange,
+    onRemove,
+    filename,
+    description,
+    disabled,
+    className,
+  }) => (
+    <div className={className}>
+      {disabled ? (
+        <FormRow label="Select a file:" field={filename} />
+      ) : (
+        <FormRow
+          label="Select a file:"
+          field={<FileInput required onChange={onFileChange} />}
         />
+      )}
+      {
+        <a
+          href="#"
+          onClick={(event) => {
+            event.preventDefault();
+            onRemove();
+          }}
+        >
+          <i className="fa fa-times" />
+        </a>
       }
-    />
-  </div>
-);
+      <FormRow
+        label={
+          <>
+            Brief Description:
+            <br />
+            (4000 max characters)
+          </>
+        }
+        field={
+          <TextArea
+            required
+            maxLength={4000}
+            disabled={disabled}
+            onChange={onDescriptionChange}
+            value={description}
+          />
+        }
+      />
+    </div>
+  );
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormBody.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormBody.tsx
index 68553c24a9..845556a92c 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormBody.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormBody.tsx
@@ -12,7 +12,7 @@ interface FormBodyProps {
   formGroupBodyClassName?: string;
 }
 
-export const FormBody: React.SFC<FormBodyProps> = ({
+export const FormBody: React.FunctionComponent<FormBodyProps> = ({
   formGroupFields,
   formGroupHeaders,
   formGroupOrder,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormGroup.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormGroup.tsx
index 98e0f7fab3..0e88a182ff 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormGroup.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormGroup.tsx
@@ -10,7 +10,7 @@ interface FormGroupProps {
   formRows: (FormRowProps & { key: string })[];
 }
 
-export const FormGroup: React.SFC<FormGroupProps> = ({
+export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   groupKey,
   headerContent,
   className,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormRow.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormRow.tsx
index 272dd73906..5f0d0e95c7 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormRow.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/FormRow.tsx
@@ -7,7 +7,7 @@ export interface FormRowProps {
   fieldClassName?: string;
 }
 
-export const FormRow: React.SFC<FormRowProps> = ({
+export const FormRow: React.FunctionComponent<FormRowProps> = ({
   label,
   field,
   labelClassName,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/LocationField.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/LocationField.tsx
index a9f1869b41..d8b24dbbc3 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/LocationField.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/LocationField.tsx
@@ -13,7 +13,7 @@ interface LocationFieldProps {
   onRangesChange: (newValue: string) => void;
 }
 
-export const LocationField: React.SFC<LocationFieldProps> = ({
+export const LocationField: React.FunctionComponent<LocationFieldProps> = ({
   coordinateTypeField,
   rangesField,
   onCoordinateTypeChange,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdEntry.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdEntry.tsx
index b86d806325..b88428345f 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdEntry.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdEntry.tsx
@@ -11,7 +11,7 @@ interface PubmedIdEntryProps {
   entryrowClassName?: string;
 }
 
-export const PubmedIdEntry: React.SFC<PubmedIdEntryProps> = ({
+export const PubmedIdEntry: React.FunctionComponent<PubmedIdEntryProps> = ({
   id,
   title,
   author,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdField.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdField.tsx
index 46bb29ceb9..2920f2d924 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdField.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdField.tsx
@@ -15,7 +15,7 @@ interface PubMedIdsFieldProps {
   previewData?: PubmedPreview;
 }
 
-export const PubMedIdsField: React.SFC<PubMedIdsFieldProps> = ({
+export const PubMedIdsField: React.FunctionComponent<PubMedIdsFieldProps> = ({
   idsField,
   searchField,
   onIdsChange,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdPreview.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdPreview.tsx
index dfb4a1cd44..a0707e8702 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdPreview.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdPreview.tsx
@@ -11,7 +11,7 @@ interface PubmedIdPreviewProps {
   className?: string;
 }
 
-export const PubmedIdPreview: React.SFC<PubmedIdPreviewProps> = ({
+export const PubmedIdPreview: React.FunctionComponent<PubmedIdPreviewProps> = ({
   onClose,
   previewData,
   className,
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdSearchField.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdSearchField.tsx
index 1bc2167411..4308aebec1 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdSearchField.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/PubmedIdSearchField.tsx
@@ -7,34 +7,31 @@ interface PubmedIdSearchFieldProps {
   className?: string;
 }
 
-export const PubmedIdSearchField: React.SFC<PubmedIdSearchFieldProps> = ({
-  query,
-  onChange,
-  className,
-}) => (
-  <div className={className}>
-    <button
-      type="button"
-      onClick={() => {
-        if (query.trim() === '') {
-          alert('Please enter a search term.');
-          return;
-        }
-        const newWindow = window.open(
-          `http://www.ncbi.nlm.nih.gov/pubmed?term=${query}`,
-          '_blank'
-        );
-        if (newWindow !== null) {
-          newWindow.focus();
-        }
-      }}
-    >
-      Search for PubMed ID(s)
-    </button>
-    <TextBox
-      onChange={onChange}
-      value={query}
-      placeholder="<enter valid gene ID>"
-    />
-  </div>
-);
+export const PubmedIdSearchField: React.FunctionComponent<PubmedIdSearchFieldProps> =
+  ({ query, onChange, className }) => (
+    <div className={className}>
+      <button
+        type="button"
+        onClick={() => {
+          if (query.trim() === '') {
+            alert('Please enter a search term.');
+            return;
+          }
+          const newWindow = window.open(
+            `http://www.ncbi.nlm.nih.gov/pubmed?term=${query}`,
+            '_blank'
+          );
+          if (newWindow !== null) {
+            newWindow.focus();
+          }
+        }}
+      >
+        Search for PubMed ID(s)
+      </button>
+      <TextBox
+        onChange={onChange}
+        value={query}
+        placeholder="<enter valid gene ID>"
+      />
+    </div>
+  );
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/UserCommentFormView.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/UserCommentFormView.tsx
index c6b97e6ace..fed380ef4c 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/UserCommentFormView.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/UserCommentFormView.tsx
@@ -30,70 +30,71 @@ export interface UserCommentFormViewProps {
 
 const cx = makeClassNameHelper('wdk-UserComments-Form');
 
-export const UserCommentFormView: React.SFC<UserCommentFormViewProps> = ({
-  title,
-  buttonText,
-  submitting,
-  className,
-  headerClassName,
-  bodyClassName,
-  errorsClassName,
-  onSubmit,
-  completed,
-  returnUrl,
-  returnLinkText,
-  backendValidationErrors,
-  internalError,
-  ...formBodyProps
-}) => (
-  <div className={className}>
-    {completed ? (
-      <>
-        <h1>Thank You For The Comment</h1>
-        <Link to={returnUrl}>{returnLinkText}</Link>
-      </>
-    ) : (
-      <>
-        {submitting && (
-          <div className={cx('-LoadingOverlay')}>
-            <Loading className={cx('-Loading')}>
-              Submitting Your Comment...
-            </Loading>
-          </div>
-        )}
-        <div className={headerClassName}>{title}</div>
-        <div className={bodyClassName}>
-          <form onSubmit={onSubmit}>
-            <FormBody {...formBodyProps} />
-            <div className={errorsClassName}>
-              {backendValidationErrors.length > 0 && (
-                <div>
-                  Please correct the following and resubmit your comment:
-                  <ul>
-                    {backendValidationErrors.map((error) => (
-                      <li key={error}>{error}</li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-              {internalError && (
-                <div>
-                  An internal error occurred while trying to submit your
-                  comment. Please try to resubmit and{' '}
-                  <Link to="/contact-us" target="_blank">
-                    contact us
-                  </Link>{' '}
-                  if this problem persists.
-                  <pre>{internalError}</pre>
-                </div>
-              )}
-            </div>
-            <div>
-              <input type="submit" disabled={submitting} value={buttonText} />
+export const UserCommentFormView: React.FunctionComponent<UserCommentFormViewProps> =
+  ({
+    title,
+    buttonText,
+    submitting,
+    className,
+    headerClassName,
+    bodyClassName,
+    errorsClassName,
+    onSubmit,
+    completed,
+    returnUrl,
+    returnLinkText,
+    backendValidationErrors,
+    internalError,
+    ...formBodyProps
+  }) => (
+    <div className={className}>
+      {completed ? (
+        <>
+          <h1>Thank You For The Comment</h1>
+          <Link to={returnUrl}>{returnLinkText}</Link>
+        </>
+      ) : (
+        <>
+          {submitting && (
+            <div className={cx('-LoadingOverlay')}>
+              <Loading className={cx('-Loading')}>
+                Submitting Your Comment...
+              </Loading>
             </div>
-          </form>
-        </div>
-      </>
-    )}
-  </div>
-);
+          )}
+          <div className={headerClassName}>{title}</div>
+          <div className={bodyClassName}>
+            <form onSubmit={onSubmit}>
+              <FormBody {...formBodyProps} />
+              <div className={errorsClassName}>
+                {backendValidationErrors.length > 0 && (
+                  <div>
+                    Please correct the following and resubmit your comment:
+                    <ul>
+                      {backendValidationErrors.map((error) => (
+                        <li key={error}>{error}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                {internalError && (
+                  <div>
+                    An internal error occurred while trying to submit your
+                    comment. Please try to resubmit and{' '}
+                    <Link to="/contact-us" target="_blank">
+                      contact us
+                    </Link>{' '}
+                    if this problem persists.
+                    <pre>{internalError}</pre>
+                  </div>
+                )}
+              </div>
+              <div>
+                <input type="submit" disabled={submitting} value={buttonText} />
+              </div>
+            </form>
+          </div>
+        </>
+      )}
+    </div>
+  );
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentShow/UserCommentShowView.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentShow/UserCommentShowView.tsx
index 71b1bc4c71..a7e958434a 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentShow/UserCommentShowView.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentShow/UserCommentShowView.tsx
@@ -18,35 +18,36 @@ export interface UserCommentShowViewProps {
   formGroupBodyClassName?: string;
 }
 
-export const UserCommentShowView: React.SFC<UserCommentShowViewProps> = ({
-  title,
-  className,
-  headerClassName,
-  bodyClassName,
-  initialCommentId,
-  ...formBodyProps
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
+export const UserCommentShowView: React.FunctionComponent<UserCommentShowViewProps> =
+  ({
+    title,
+    className,
+    headerClassName,
+    bodyClassName,
+    initialCommentId,
+    ...formBodyProps
+  }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (containerRef.current && initialCommentId) {
-      const initialCommentIdSelector = `[id='${initialCommentId}']`;
-      const commentToScrollTo = containerRef.current.querySelector(
-        initialCommentIdSelector
-      );
+    useEffect(() => {
+      if (containerRef.current && initialCommentId) {
+        const initialCommentIdSelector = `[id='${initialCommentId}']`;
+        const commentToScrollTo = containerRef.current.querySelector(
+          initialCommentIdSelector
+        );
 
-      if (commentToScrollTo) {
-        commentToScrollTo.scrollIntoView();
+        if (commentToScrollTo) {
+          commentToScrollTo.scrollIntoView();
+        }
       }
-    }
-  }, []);
+    }, []);
 
-  return (
-    <div className={className} ref={containerRef}>
-      <div className={headerClassName}>{title}</div>
-      <div className={bodyClassName}>
-        <FormBody {...formBodyProps} />
+    return (
+      <div className={className} ref={containerRef}>
+        <div className={headerClassName}>{title}</div>
+        <div className={bodyClassName}>
+          <FormBody {...formBodyProps} />
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  };
diff --git a/packages/sites/mbio-site/package.json b/packages/sites/mbio-site/package.json
index 47a898421c..e13028192f 100644
--- a/packages/sites/mbio-site/package.json
+++ b/packages/sites/mbio-site/package.json
@@ -23,14 +23,14 @@
     "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.14.5",
-    "@emotion/react": "^11.10.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@veupathdb/base-webpack-config": "workspace:^",
     "@veupathdb/browserslist-config": "workspace:^",
@@ -54,10 +54,10 @@
     "html-webpack-plugin": "^4.5.2",
     "ify-loader": "^1.1.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "react": "17",
-    "react-dom": "17",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.3.0",
     "redux": "^4.0.0",
diff --git a/packages/sites/ortho-site/package.json b/packages/sites/ortho-site/package.json
index ad20423e94..deaf36493d 100644
--- a/packages/sites/ortho-site/package.json
+++ b/packages/sites/ortho-site/package.json
@@ -21,17 +21,17 @@
     "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.14.5",
-    "@emotion/react": "^11.10.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.0.2",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@types/cytoscape": "^3.14.7",
     "@types/cytoscape-fcose": "^2.1.0",
-    "@types/react": "16",
+    "@types/react": "^18.3.1",
     "@types/react-cytoscapejs": "^1.1.0",
-    "@types/react-dom": "16",
+    "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.20",
     "@types/react-router-dom": "5",
     "@veupathdb/base-webpack-config": "workspace:^",
@@ -62,12 +62,12 @@
     "immer": "^7.0.5",
     "jquery": "1.9.1",
     "mini-css-extract-plugin": "^2.7.6",
-    "notistack": "^1.0.10",
+    "notistack": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "popper.js": "^1.16.1",
-    "react": "17",
+    "react": "^18.3.1",
     "react-cytoscapejs": "^2.0.0",
-    "react-dom": "17",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.3.0",
     "react-spring": "^8.0.27",
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/cluster-graph/GraphAccordion.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/cluster-graph/GraphAccordion.tsx
index 1027a9660e..1a0b0e129a 100644
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/cluster-graph/GraphAccordion.tsx
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/cluster-graph/GraphAccordion.tsx
@@ -5,6 +5,7 @@ import './GraphAccordion.scss';
 interface Props {
   title: React.ReactNode;
   containerClassName?: string;
+  children: React.ReactNode;
 }
 
 export const GraphAccordion: React.FunctionComponent<Props> = function ({
diff --git a/yarn.lock b/yarn.lock
index ae0c92a663..c33c550a97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2111,66 +2111,66 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/babel-plugin-jsx-pragmatic@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "@emotion/babel-plugin-jsx-pragmatic@npm:0.2.0"
+"@emotion/babel-plugin-jsx-pragmatic@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "@emotion/babel-plugin-jsx-pragmatic@npm:0.2.1"
   dependencies:
     "@babel/plugin-syntax-jsx": ^7.17.12
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: fb7a386ff1335ba09f8db5617c14b87ed844beda181fa9eaf5516328a39ec2f1cfc9d332d53b4378682a869f375f63eaeedfcb18490cd2fd19b70433ffe9487b
+  checksum: 2c7e9c687c8e12855c9a419e9a8e530b236e1c42f5a196f1abaf5079947d18069733f1f8257e90c6bafa302c87f433577745ea799b63d4211c82d7b3a57917d6
   languageName: node
   linkType: hard
 
-"@emotion/babel-plugin@npm:^11.10.0, @emotion/babel-plugin@npm:^11.10.6, @emotion/babel-plugin@npm:^11.3.0":
-  version: 11.10.6
-  resolution: "@emotion/babel-plugin@npm:11.10.6"
+"@emotion/babel-plugin@npm:^11.11.0":
+  version: 11.11.0
+  resolution: "@emotion/babel-plugin@npm:11.11.0"
   dependencies:
     "@babel/helper-module-imports": ^7.16.7
     "@babel/runtime": ^7.18.3
-    "@emotion/hash": ^0.9.0
-    "@emotion/memoize": ^0.8.0
-    "@emotion/serialize": ^1.1.1
+    "@emotion/hash": ^0.9.1
+    "@emotion/memoize": ^0.8.1
+    "@emotion/serialize": ^1.1.2
     babel-plugin-macros: ^3.1.0
     convert-source-map: ^1.5.0
     escape-string-regexp: ^4.0.0
     find-root: ^1.1.0
     source-map: ^0.5.7
-    stylis: 4.1.3
-  checksum: 3eed138932e8edf2598352e69ad949b9db3051a4d6fcff190dacbac9aa838d7ef708b9f3e6c48660625d9311dae82d73477ae4e7a31139feef5eb001a5528421
+    stylis: 4.2.0
+  checksum: 6b363edccc10290f7a23242c06f88e451b5feb2ab94152b18bb8883033db5934fb0e421e2d67d09907c13837c21218a3ac28c51707778a54d6cd3706c0c2f3f9
   languageName: node
   linkType: hard
 
-"@emotion/babel-plugin@npm:^11.11.0":
-  version: 11.11.0
-  resolution: "@emotion/babel-plugin@npm:11.11.0"
+"@emotion/babel-plugin@npm:^11.3.0":
+  version: 11.10.6
+  resolution: "@emotion/babel-plugin@npm:11.10.6"
   dependencies:
     "@babel/helper-module-imports": ^7.16.7
     "@babel/runtime": ^7.18.3
-    "@emotion/hash": ^0.9.1
-    "@emotion/memoize": ^0.8.1
-    "@emotion/serialize": ^1.1.2
+    "@emotion/hash": ^0.9.0
+    "@emotion/memoize": ^0.8.0
+    "@emotion/serialize": ^1.1.1
     babel-plugin-macros: ^3.1.0
     convert-source-map: ^1.5.0
     escape-string-regexp: ^4.0.0
     find-root: ^1.1.0
     source-map: ^0.5.7
-    stylis: 4.2.0
-  checksum: 6b363edccc10290f7a23242c06f88e451b5feb2ab94152b18bb8883033db5934fb0e421e2d67d09907c13837c21218a3ac28c51707778a54d6cd3706c0c2f3f9
+    stylis: 4.1.3
+  checksum: 3eed138932e8edf2598352e69ad949b9db3051a4d6fcff190dacbac9aa838d7ef708b9f3e6c48660625d9311dae82d73477ae4e7a31139feef5eb001a5528421
   languageName: node
   linkType: hard
 
-"@emotion/babel-preset-css-prop@npm:^11.10.0":
-  version: 11.10.0
-  resolution: "@emotion/babel-preset-css-prop@npm:11.10.0"
+"@emotion/babel-preset-css-prop@npm:^11.11.0":
+  version: 11.11.0
+  resolution: "@emotion/babel-preset-css-prop@npm:11.11.0"
   dependencies:
     "@babel/plugin-transform-react-jsx": ^7.17.12
     "@babel/runtime": ^7.18.3
-    "@emotion/babel-plugin": ^11.10.0
-    "@emotion/babel-plugin-jsx-pragmatic": ^0.2.0
+    "@emotion/babel-plugin": ^11.11.0
+    "@emotion/babel-plugin-jsx-pragmatic": ^0.2.1
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 09d91e89ec5edf105ddcdfcbac5aa45c2c0c19213ee6fcf95fd570ca395b965022fe03a5483802e00eea2436983609cef2b2fcc88169b0a923a8e2c92411ec89
+  checksum: fcaddd107e2fb431cf22254e8a764d4e3308d1dab38611dc55d40a5e746f14b04aee0c12d349e3e0e4af1049d43efa52f8b8d5cc78167204159a40dffb7b4fde
   languageName: node
   linkType: hard
 
@@ -2186,19 +2186,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/cache@npm:^11.10.5":
-  version: 11.10.5
-  resolution: "@emotion/cache@npm:11.10.5"
-  dependencies:
-    "@emotion/memoize": ^0.8.0
-    "@emotion/sheet": ^1.2.1
-    "@emotion/utils": ^1.2.0
-    "@emotion/weak-memoize": ^0.3.0
-    stylis: 4.1.3
-  checksum: 1dd2d9af2d3ecbd3d4469ecdf91a335eef6034c851b57a474471b2d2280613eb35bbed98c0368cc4625f188619fbdaf04cf07e8107aaffce94b2178444c0fe7b
-  languageName: node
-  linkType: hard
-
 "@emotion/cache@npm:^11.11.0, @emotion/cache@npm:^11.4.0":
   version: 11.11.0
   resolution: "@emotion/cache@npm:11.11.0"
@@ -2273,12 +2260,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "@emotion/is-prop-valid@npm:1.2.0"
+"@emotion/is-prop-valid@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "@emotion/is-prop-valid@npm:1.2.2"
   dependencies:
-    "@emotion/memoize": ^0.8.0
-  checksum: cc7a19850a4c5b24f1514665289442c8c641709e6f7711067ad550e05df331da0692a16148e85eda6f47e31b3261b64d74c5e25194d053223be16231f969d633
+    "@emotion/memoize": ^0.8.1
+  checksum: 61f6b128ea62b9f76b47955057d5d86fcbe2a6989d2cd1e583daac592901a950475a37d049b9f7a7c6aa8758a33b408735db759fdedfd1f629df0f85ab60ea25
   languageName: node
   linkType: hard
 
@@ -2303,28 +2290,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:^11.10.0":
-  version: 11.10.6
-  resolution: "@emotion/react@npm:11.10.6"
-  dependencies:
-    "@babel/runtime": ^7.18.3
-    "@emotion/babel-plugin": ^11.10.6
-    "@emotion/cache": ^11.10.5
-    "@emotion/serialize": ^1.1.1
-    "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
-    "@emotion/utils": ^1.2.0
-    "@emotion/weak-memoize": ^0.3.0
-    hoist-non-react-statics: ^3.3.1
-  peerDependencies:
-    react: ">=16.8.0"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 4762042e39126ffaffe76052dc65c9bb0ba6b8893013687ba3cc13ed4dd834c31597f1230684c3c078e90aecc13ab6cd0e3cde0dec8b7761affd2571f4d80019
-  languageName: node
-  linkType: hard
-
-"@emotion/react@npm:^11.8.1":
+"@emotion/react@npm:^11.11.4, @emotion/react@npm:^11.8.1":
   version: 11.11.4
   resolution: "@emotion/react@npm:11.11.4"
   dependencies:
@@ -2384,7 +2350,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.1.3":
+"@emotion/serialize@npm:^1.1.3, @emotion/serialize@npm:^1.1.4":
   version: 1.1.4
   resolution: "@emotion/serialize@npm:1.1.4"
   dependencies:
@@ -2404,13 +2370,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/sheet@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "@emotion/sheet@npm:1.2.1"
-  checksum: ce78763588ea522438156344d9f592203e2da582d8d67b32e1b0b98eaba26994c6c270f8c7ad46442fc9c0a9f048685d819cd73ca87e544520fd06f0e24a1562
-  languageName: node
-  linkType: hard
-
 "@emotion/sheet@npm:^1.2.2":
   version: 1.2.2
   resolution: "@emotion/sheet@npm:1.2.2"
@@ -2418,23 +2377,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/styled@npm:^11.10.0":
-  version: 11.10.6
-  resolution: "@emotion/styled@npm:11.10.6"
+"@emotion/styled@npm:^11.11.5":
+  version: 11.11.5
+  resolution: "@emotion/styled@npm:11.11.5"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@emotion/babel-plugin": ^11.10.6
-    "@emotion/is-prop-valid": ^1.2.0
-    "@emotion/serialize": ^1.1.1
-    "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
-    "@emotion/utils": ^1.2.0
+    "@emotion/babel-plugin": ^11.11.0
+    "@emotion/is-prop-valid": ^1.2.2
+    "@emotion/serialize": ^1.1.4
+    "@emotion/use-insertion-effect-with-fallbacks": ^1.0.1
+    "@emotion/utils": ^1.2.1
   peerDependencies:
     "@emotion/react": ^11.0.0-rc.0
     react: ">=16.8.0"
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: ed0ee4bec3b63ee9c5eb8216b22646313ff1ada06c5183f128d25b73252126e9fde625e81c868be7ccd666b686a73076f923ce188dac25e93d5062ddffdad46f
+  checksum: ad5fc42d00e8aa9597f6d9665986036d5ebe0e8f8155af6d95831c5e8fb2319fb837724e6c5cd59e5346f14c3263711b7ce7271d34688e974d1f32ffeecb37ba
   languageName: node
   linkType: hard
 
@@ -2466,15 +2425,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.0"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 4f06a3b48258c832aa8022a262572061a31ff078d377e9164cccc99951309d70f4466e774fe704461b2f8715007a82ed625a54a5c7a127c89017d3ce3187d4f1
-  languageName: node
-  linkType: hard
-
 "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1":
   version: 1.0.1
   resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1"
@@ -2512,13 +2462,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/weak-memoize@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "@emotion/weak-memoize@npm:0.3.0"
-  checksum: f43ef4c8b7de70d9fa5eb3105921724651e4188e895beb71f0c5919dc899a7b8743e1fdd99d38b9092dd5722c7be2312ebb47fbdad0c4e38bea58f6df5885cc0
-  languageName: node
-  linkType: hard
-
 "@emotion/weak-memoize@npm:^0.3.1":
   version: 0.3.1
   resolution: "@emotion/weak-memoize@npm:0.3.1"
@@ -7444,12 +7387,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:<18":
-  version: 17.0.19
-  resolution: "@types/react-dom@npm:17.0.19"
+"@types/react-dom@npm:^18.0.0":
+  version: 18.3.0
+  resolution: "@types/react-dom@npm:18.3.0"
   dependencies:
-    "@types/react": ^17
-  checksum: 875a472d868b235435c905ded16cf92297bd2afb20a5a78f5dccd54312f6f038ccf452ea92bb41c0b39150c2f16f3ddff0265a2de756c6f63b0971dd5719578b
+    "@types/react": "*"
+  checksum: a0cd9b1b815a6abd2a367a9eabdd8df8dd8f13f95897b2f9e1359ea3ac6619f957c1432ece004af7d95e2a7caddbba19faa045f831f32d6263483fc5404a7596
   languageName: node
   linkType: hard
 
@@ -7562,14 +7505,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:<18":
-  version: 17.0.53
-  resolution: "@types/react@npm:17.0.53"
+"@types/react@npm:^18.0.0":
+  version: 18.3.2
+  resolution: "@types/react@npm:18.3.2"
   dependencies:
     "@types/prop-types": "*"
-    "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: dacfde02c260fd98bed2eb775ed0c7ce1397be4c0844f907a50763b081a4008f81f57071889a16eb1350ddcf0927f3cf1a6541702c8ad03de3c70383ef931e3f
+  checksum: d0b8b9d0ede6cd28dbbe34106d914b5e3652d9d7aa9d0f32fe6171506b6fc7c826d9d6571642976a5422bd29c5022fd893a710ed59a1177a0c1df8e02cf17ffe
   languageName: node
   linkType: hard
 
@@ -7607,13 +7549,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/scheduler@npm:*":
-  version: 0.16.2
-  resolution: "@types/scheduler@npm:0.16.2"
-  checksum: b6b4dcfeae6deba2e06a70941860fb1435730576d3689225a421280b7742318d1548b3d22c1f66ab68e414f346a9542f29240bc955b6332c5b11e561077583bc
-  languageName: node
-  linkType: hard
-
 "@types/semver@npm:^7.1.0, @types/semver@npm:^7.3.12":
   version: 7.3.13
   resolution: "@types/semver@npm:7.3.13"
@@ -8145,10 +8080,10 @@ __metadata:
     "@babel/core": ^7.17.9
     "@babel/plugin-syntax-flow": ^7.14.5
     "@babel/plugin-transform-react-jsx": ^7.14.9
-    "@emotion/babel-preset-css-prop": ^11.10.0
-    "@emotion/react": ^11.10.0
+    "@emotion/babel-preset-css-prop": ^11.11.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@emotion/utils": ^1.1.0
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
@@ -8158,8 +8093,8 @@ __metadata:
     "@testing-library/react": 12.1.2
     "@testing-library/user-event": 13.5.0
     "@types/node": ^14.0.0
-    "@types/react": ^17.0.47
-    "@types/react-dom": ^17.0.11
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-redux": ^7.1.20
     "@types/react-router-dom": ^5.3.3
     "@veupathdb/browserslist-config": "workspace:^"
@@ -8182,14 +8117,14 @@ __metadata:
     ify-loader: ^1.1.0
     jquery: 1.9.1
     lodash: ^4.17.21
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     path-browserify: ^1.0.1
     popper.js: ^1.16.1
     postcss: ^8.1.0
     querystring-es3: ^0.2.1
-    react: ^17.0.2
+    react: ^18.3.1
     react-app-rewired: ^2.2.1
-    react-dom: ^17.0.2
+    react-dom: ^18.3.1
     react-redux: ^7.1.3
     react-router: ^5.2.0
     react-router-dom: ^5.3.0
@@ -8229,14 +8164,14 @@ __metadata:
     "@babel/core": ^7.17.9
     "@babel/preset-env": ^7.16.11
     "@babel/preset-react": ^7.14.5
-    "@emotion/react": ^11.10.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/lab": ^4.0.0-alpha.61
-    "@types/react": ^17.0.43
-    "@types/react-dom": ^17.0.14
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-router-dom": ^5.3.3
     "@veupathdb/base-webpack-config": "workspace:^"
     "@veupathdb/browserslist-config": "workspace:^"
@@ -8260,10 +8195,10 @@ __metadata:
     html-webpack-plugin: ^4.5.2
     ify-loader: ^1.1.0
     mini-css-extract-plugin: ^2.7.6
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     npm-run-all: ^4.1.5
-    react: 17
-    react-dom: 17
+    react: ^18.3.1
+    react-dom: ^18.3.1
     react-redux: ^7.1.3
     react-router-dom: ^5.3.0
     redux: ^4.0.0
@@ -8292,7 +8227,7 @@ __metadata:
     "@babel/plugin-proposal-nullish-coalescing-operator": ^7.16.7
     "@babel/preset-env": ^7.16.11
     "@emotion/css": ^11.11.2
-    "@emotion/react": ^11.10.0
+    "@emotion/react": ^11.11.4
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/lab": ^4.0.0-alpha.61
@@ -8316,8 +8251,8 @@ __metadata:
     "@types/leaflet": ^1.7.9
     "@types/lodash": ^4.14.164
     "@types/md5": ^2.2.0
-    "@types/react": ^16.9.0
-    "@types/react-dom": ^16.9.0
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-leaflet": ^2.5.2
     "@types/react-plotly.js": ^2.2.4
     "@types/stats-lite": ^2.2.0
@@ -8360,10 +8295,10 @@ __metadata:
     npm-run-all: ^4.1.5
     plotly.js: ^2.23.2
     re-resizable: ^6.9.0
-    react: ^16.13.1
+    react: ^18.3.1
     react-bootstrap: ^1.3.0
     react-cool-dimensions: ^2.0.7
-    react-dom: ^16.13.1
+    react-dom: ^18.3.1
     react-html-parser: ^2.0.2
     react-leaflet: ^3.2.5
     react-leaflet-drift-marker: ^3.0.0
@@ -8396,10 +8331,10 @@ __metadata:
     "@babel/preset-react": ^7.14.5
     "@babel/preset-typescript": ^7.15.0
     "@emotion/babel-plugin": ^11.3.0
-    "@emotion/babel-preset-css-prop": ^11.10.0
-    "@emotion/react": ^11.10.0
+    "@emotion/babel-preset-css-prop": ^11.11.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@react-hook/size": ^2.1.2
@@ -8426,11 +8361,11 @@ __metadata:
     eslint-plugin-react-hooks: ^4.3.0
     eslint-plugin-storybook: ^0.5.7
     lodash: ^4.17.21
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     npm-run-all: ^4.1.5
-    react: ^17.0.2
+    react: ^18.3.1
     react-cool-dimensions: ^2.0.7
-    react-dom: ^17.0.2
+    react-dom: ^18.3.1
     react-draggable: ^4.4.5
     react-responsive-modal: ^6.2.0
     react-table: ^7.7.0
@@ -8460,9 +8395,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@veupathdb/eda@workspace:packages/libs/eda"
   dependencies:
-    "@emotion/babel-preset-css-prop": ^11.10.0
-    "@emotion/react": ^11.10.0
-    "@emotion/styled": ^11.10.0
+    "@emotion/babel-preset-css-prop": ^11.11.0
+    "@emotion/react": ^11.11.4
+    "@emotion/styled": ^11.11.5
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/lab": ^4.0.0-alpha.61
@@ -8478,8 +8413,8 @@ __metadata:
     "@types/lodash": ^4.14.182
     "@types/luxon": ^3.0.1
     "@types/node": ^12.0.0
-    "@types/react": ^16.9.53
-    "@types/react-dom": ^16.9.8
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-leaflet": ^2.5.2
     "@types/react-resizable": ^1.7.2
     "@types/react-router-dom": ^5.3.3
@@ -8507,15 +8442,15 @@ __metadata:
     lodash: ^4.17.21
     luxon: ^3.1.1
     monocle-ts: ^2.3.11
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     path-browserify: ^1.0.1
     postcss-normalize: ^10.0.1
     process: ^0.11.10
     querystring-es3: ^0.2.1
-    react: ^17.0.1
+    react: ^18.3.1
     react-app-rewired: ^2.2.1
     react-cool-dimensions: ^2.0.7
-    react-dom: ^17.0.1
+    react-dom: ^18.3.1
     react-draggable: ^4.4.3
     react-resizable: ^3.0.4
     react-router: ^5.2.1
@@ -8560,16 +8495,16 @@ __metadata:
     "@babel/core": ^7.17.9
     "@babel/preset-env": ^7.16.11
     "@babel/preset-react": ^7.14.5
-    "@emotion/react": ^11.10.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/lab": ^4.0.0-alpha.61
     "@types/cytoscape": ^3.14.7
     "@types/jqueryui": ^1.12.16
-    "@types/react": ^17.0.43
-    "@types/react-dom": ^17.0.14
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-router-dom": ^5.3.3
     "@types/react-select": 3
     "@veupathdb/base-webpack-config": "workspace:^"
@@ -8604,11 +8539,11 @@ __metadata:
     jquery: 1.9.1
     js-cookie: ^2.2.0
     mini-css-extract-plugin: ^2.7.6
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     npm-run-all: ^4.1.5
     popper.js: ^1.16.1
-    react: 17
-    react-dom: 17
+    react: ^18.3.1
+    react-dom: ^18.3.1
     react-redux: ^7.1.3
     react-router-dom: ^5.3.0
     react-spring: ^8.0.27
@@ -8658,14 +8593,14 @@ __metadata:
     "@babel/core": ^7.17.9
     "@babel/preset-env": ^7.16.11
     "@babel/preset-react": ^7.14.5
-    "@emotion/react": ^11.10.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/lab": ^4.0.0-alpha.61
-    "@types/react": ^17.0.43
-    "@types/react-dom": ^17.0.14
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-router-dom": ^5.3.3
     "@veupathdb/base-webpack-config": "workspace:^"
     "@veupathdb/browserslist-config": "workspace:^"
@@ -8689,10 +8624,10 @@ __metadata:
     html-webpack-plugin: ^4.5.2
     ify-loader: ^1.1.0
     mini-css-extract-plugin: ^2.7.6
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     npm-run-all: ^4.1.5
-    react: 17
-    react-dom: 17
+    react: ^18.3.1
+    react-dom: ^18.3.1
     react-redux: ^7.1.3
     react-router-dom: ^5.3.0
     redux: ^4.0.0
@@ -8718,9 +8653,9 @@ __metadata:
   resolution: "@veupathdb/multi-blast@workspace:packages/libs/multi-blast"
   dependencies:
     "@babel/core": ^7.17.9
-    "@emotion/react": ^11.10.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/lab": ^4.0.0-alpha.61
@@ -8732,8 +8667,8 @@ __metadata:
     "@types/jest": ^26.0.15
     "@types/lodash": ^4.14.181
     "@types/node": ^12.0.0
-    "@types/react": ^16.9.53
-    "@types/react-dom": ^16.9.8
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-redux": ^7.1.5
     "@types/react-router": ^5.1.17
     "@types/react-router-dom": ^5.3.3
@@ -8768,9 +8703,9 @@ __metadata:
     http-proxy-middleware: ^1.0.6
     io-ts: ^2.2.16
     lodash: ^4.17.21
-    react: ^17.0.2
+    react: ^18.3.1
     react-app-rewired: ^2.2.1
-    react-dom: ">=16.14.0"
+    react-dom: ^18.3.1
     react-redux: ^7.2.6
     react-router: ^5.2.0
     react-router-dom: ^5.2.0
@@ -8800,17 +8735,17 @@ __metadata:
     "@babel/core": ^7.17.9
     "@babel/preset-env": ^7.16.11
     "@babel/preset-react": ^7.14.5
-    "@emotion/react": ^11.10.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/lab": ^4.0.0-alpha.61
     "@types/cytoscape": ^3.14.7
     "@types/cytoscape-fcose": ^2.1.0
-    "@types/react": 16
+    "@types/react": ^18.3.1
     "@types/react-cytoscapejs": ^1.1.0
-    "@types/react-dom": 16
+    "@types/react-dom": ^18.3.0
     "@types/react-redux": ^7.1.20
     "@types/react-router-dom": 5
     "@veupathdb/base-webpack-config": "workspace:^"
@@ -8841,12 +8776,12 @@ __metadata:
     immer: ^7.0.5
     jquery: 1.9.1
     mini-css-extract-plugin: ^2.7.6
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     npm-run-all: ^4.1.5
     popper.js: ^1.16.1
-    react: 17
+    react: ^18.3.1
     react-cytoscapejs: ^2.0.0
-    react-dom: 17
+    react-dom: ^18.3.1
     react-redux: ^7.1.3
     react-router-dom: ^5.3.0
     react-spring: ^8.0.27
@@ -8872,9 +8807,9 @@ __metadata:
   resolution: "@veupathdb/preferred-organisms@workspace:packages/libs/preferred-organisms"
   dependencies:
     "@babel/core": ^7.17.9
-    "@emotion/react": ^11.10.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/lab": ^4.0.0-alpha.61
@@ -8884,8 +8819,8 @@ __metadata:
     "@testing-library/user-event": ^12.1.10
     "@types/jest": ^26.0.15
     "@types/node": ^12.0.0
-    "@types/react": ^16.9.53
-    "@types/react-dom": ^16.9.8
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-router": ^5.1.8
     "@types/react-router-dom": ^5.3.0
     "@typescript-eslint/eslint-plugin": ^4.0.0
@@ -8911,10 +8846,10 @@ __metadata:
     eslint-plugin-react-hooks: ^4.0.8
     http-proxy-middleware: ^1.0.6
     lodash: ^4.17.21
-    notistack: ^1.0.10
-    react: ^17.0.2
+    notistack: ^3.0.1
+    react: ^18.3.1
     react-app-rewired: ^2.2.1
-    react-dom: ^17.0.2
+    react-dom: ^18.3.1
     react-redux: ^7.2.6
     react-router: ^5.2.0
     react-router-dom: ^5.3.0
@@ -9030,10 +8965,10 @@ __metadata:
     "@babel/core": ^7.17.9
     "@babel/plugin-syntax-flow": ^7.14.5
     "@babel/plugin-transform-react-jsx": ^7.14.9
-    "@emotion/babel-preset-css-prop": ^11.10.0
-    "@emotion/react": ^11.10.0
+    "@emotion/babel-preset-css-prop": ^11.11.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@emotion/utils": ^1.1.0
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
@@ -9044,8 +8979,8 @@ __metadata:
     "@testing-library/user-event": 13.5.0
     "@types/history": ^4.7.4
     "@types/node": ^14.0.0
-    "@types/react": ^17.0.38
-    "@types/react-dom": ^17.0.11
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-redux": ^7.1.20
     "@types/react-router-dom": ^5.3.3
     "@veupathdb/browserslist-config": "workspace:^"
@@ -9066,13 +9001,13 @@ __metadata:
     eslint-config-react-app: ^7.0.0
     ify-loader: ^1.1.0
     lodash: ^4.17.21
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     path-browserify: ^1.0.1
     postcss: ^8.1.0
     querystring-es3: ^0.2.1
-    react: ^17.0.2
+    react: ^18.3.1
     react-app-rewired: ^2.2.1
-    react-dom: ^17.0.2
+    react-dom: ^18.3.1
     react-redux: ^7.1.3
     react-router-dom: ^5.3.0
     react-scripts: 5.0.0
@@ -9104,10 +9039,10 @@ __metadata:
     "@babel/core": ^7.17.9
     "@babel/plugin-syntax-flow": ^7.14.5
     "@babel/plugin-transform-react-jsx": ^7.14.9
-    "@emotion/babel-preset-css-prop": ^11.10.0
-    "@emotion/react": ^11.10.0
+    "@emotion/babel-preset-css-prop": ^11.11.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@emotion/utils": ^1.1.0
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
@@ -9118,8 +9053,8 @@ __metadata:
     "@testing-library/user-event": 13.5.0
     "@types/history": ^4.7.4
     "@types/node": ^14.0.0
-    "@types/react": ^17.0.38
-    "@types/react-dom": ^17.0.11
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-redux": ^7.1.20
     "@types/react-router-dom": ^5.3.3
     "@veupathdb/browserslist-config": "workspace:^"
@@ -9140,13 +9075,13 @@ __metadata:
     eslint-config-react-app: ^7.0.0
     ify-loader: ^1.1.0
     lodash: ^4.17.21
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     path-browserify: ^1.0.1
     postcss: ^8.1.0
     querystring-es3: ^0.2.1
-    react: ^17.0.2
+    react: ^18.3.1
     react-app-rewired: ^2.2.1
-    react-dom: ^17.0.2
+    react-dom: ^18.3.1
     react-redux: ^7.1.3
     react-router-dom: ^5.3.0
     react-scripts: 5.0.0
@@ -9175,7 +9110,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@veupathdb/wdk-client@workspace:packages/libs/wdk-client"
   dependencies:
-    "@emotion/react": ^11.10.0
+    "@emotion/react": ^11.11.4
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/lab": ^4.0.0-alpha.61
@@ -9191,8 +9126,8 @@ __metadata:
     "@types/node": ^14.14.7
     "@types/prop-types": ^15.7.3
     "@types/qtip2": ^2.2.29
-    "@types/react": ^16.9.18
-    "@types/react-dom": ^16.9.5
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-redux": ^7.1.5
     "@types/react-router": ^5.1.4
     "@types/react-router-dom": ^5.1.3
@@ -9218,11 +9153,11 @@ __metadata:
     lodash: ^4.17.21
     mansion-ui: 2.5
     natural-sort: ^1.0.0
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     npm-run-all: ^4.1.5
     prop-types: ^15.7.2
-    react: ^16.12.0
-    react-dom: ^16.12.0
+    react: ^18.3.1
+    react-dom: ^18.3.1
     react-redux: ^7.1.3
     react-router-dom: ^5.1.2
     react-select: ^3.0.4
@@ -9249,16 +9184,16 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@veupathdb/web-common@workspace:packages/libs/web-common"
   dependencies:
-    "@emotion/react": ^11.10.0
+    "@emotion/react": ^11.11.4
     "@emotion/serialize": ^1.0.2
-    "@emotion/styled": ^11.10.0
+    "@emotion/styled": ^11.11.5
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/lab": ^4.0.0-alpha.61
     "@types/jqueryui": ^1.12.16
     "@types/node": ^14.14.7
-    "@types/react": ^17.0.43
-    "@types/react-dom": ^17.0.14
+    "@types/react": ^18.3.1
+    "@types/react-dom": ^18.3.0
     "@types/react-router": ^5.1.18
     "@types/react-router-dom": ^5.3.3
     "@types/react-table": ^7.7.11
@@ -9276,10 +9211,10 @@ __metadata:
     icon-font-generator: ^2.1.11
     ify-loader: ^1.1.0
     md5: ^2.3.0
-    notistack: ^1.0.10
+    notistack: ^3.0.1
     npm-run-all: ^4.1.5
-    react: 16
-    react-dom: 16
+    react: ^18.3.1
+    react-dom: ^18.3.1
     react-router: 5
     react-router-dom: 5
     shelljs: ^0.8.4
@@ -20624,6 +20559,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"goober@npm:^2.0.33":
+  version: 2.1.14
+  resolution: "goober@npm:2.1.14"
+  peerDependencies:
+    csstype: ^3.0.10
+  checksum: 78978b7192d6a1af5cfbf1fd64b661b5f53ee6c733554b1f1b2ad3e1e2c979847fc080434390647640bb8358c0b193895d0007432c0886d12001f02f8f56b5e6
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -27481,17 +27425,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"notistack@npm:^1.0.10":
-  version: 1.0.10
-  resolution: "notistack@npm:1.0.10"
+"notistack@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "notistack@npm:3.0.1"
   dependencies:
     clsx: ^1.1.0
-    hoist-non-react-statics: ^3.3.0
+    goober: ^2.0.33
   peerDependencies:
-    "@material-ui/core": ^4.0.0
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 50223dbb30a33318bedfc03adbd81d75e5c74c8b74ae39aa9795377c51f556f0a7daa1061a516804e2a7cabf6a2f5a124dc5ed8e96c80731eec1377d16a65b42
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 421c970308690b8c8cb2e275e7f66020db7c1955e104f638e7fa562396a6b9322ff95f0e62492b07f3d36b0ef72adb4de2c2ce9803089c1c8f028d1a3b088e01
   languageName: node
   linkType: hard
 
@@ -31570,16 +31513,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:<18":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:^18.0.0":
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.23.2
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.3.1
+  checksum: 298954ecd8f78288dcaece05e88b570014d8f6dce5db6f66e6ee91448debeb59dcd31561dddb354eee47e6c1bb234669459060deb238ed0213497146e555a0b9
   languageName: node
   linkType: hard
 
@@ -32271,13 +32213,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:<18":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:^18.0.0":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: a27bcfa8ff7c15a1e50244ad0d0c1cb2ad4375eeffefd266a64889beea6f6b64c4966c9b37d14ee32d6c9fcd5aa6ba183b6988167ab4d127d13e7cb5b386a376
   languageName: node
   linkType: hard
 
@@ -33931,13 +33872,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
+  checksum: 3e82d1f419e240ef6219d794ff29c7ee415fbdc19e038f680a10c067108e06284f1847450a210b29bbaf97b9d8a97ced5f624c31c681248ac84c80d56ad5a2c4
   languageName: node
   linkType: hard