diff --git a/package.json b/package.json
index 5e21c3fb1..65bfde6e9 100644
--- a/package.json
+++ b/package.json
@@ -92,8 +92,8 @@
         "lodash": "^4.17.21",
         "n3": "^1.26.0",
         "re-resizable": "^6.10.3",
-        "react": "^16.13.1",
-        "react-dom": "^16.14.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-flow-renderer": "9.7.4",
         "react-inlinesvg": "^3.0.3",
         "react-is": "^16.13.1",
@@ -132,7 +132,7 @@
         "@storybook/react-webpack5": "^8.6.14",
         "@storybook/test": "^8.6.14",
         "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^12.1.5",
+        "@testing-library/react": "^14.3.1",
         "@types/color": "^3.0.6",
         "@types/he": "^1.2.3",
         "@types/jest": "^30.0.0",
@@ -179,7 +179,7 @@
         "react": ">=16"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.90",
+        "**/@types/react": "^18.2.0",
         "node-sass-package-importer/**/postcss": "^8.5.6",
         "string-width": "^4.2.3",
         "wrap-ansi": "^7.0.0",
diff --git a/src/cmem/ActivityControl/ActivityControlWidget.tsx b/src/cmem/ActivityControl/ActivityControlWidget.tsx
index efda5060f..69d893652 100644
--- a/src/cmem/ActivityControl/ActivityControlWidget.tsx
+++ b/src/cmem/ActivityControl/ActivityControlWidget.tsx
@@ -27,16 +27,16 @@ export interface ActivityControlWidgetProps extends TestableComponent {
     /**
      * The label to be shown
      */
-    label?: string | JSX.Element;
+    label?: string | React.JSX.Element;
     /**
      * Element that wraps around the label.
      * Default: `<OverflowText inline={true} />`
      */
-    labelWrapper?: JSX.Element;
+    labelWrapper?: React.JSX.Element;
     /**
      * To add tags in addition to the widget status description
      */
-    tags?: JSX.Element;
+    tags?: React.JSX.Element;
     /**
      * The progress bar parameters if it should be show by a progres bar
      */
@@ -80,7 +80,7 @@ export interface ActivityControlWidgetProps extends TestableComponent {
     /**
      * execution timer messages for waiting and running times.
      */
-    timerExecutionMsg?: JSX.Element | null;
+    timerExecutionMsg?: React.JSX.Element | null;
     /**
      * additional actions that can serve as a complex component, positioned between the default actions and the context menu
      */
@@ -146,7 +146,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                     keepColors
                 >
                     {progressSpinnerFinishedIcon ? (
-                        React.cloneElement(progressSpinnerFinishedIcon as JSX.Element, { small, large: !small })
+                        React.cloneElement(progressSpinnerFinishedIcon as React.JSX.Element, { small, large: !small })
                     ) : (
                         <Spinner
                             position="inline"
diff --git a/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx b/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx
index 3f0ad6140..2497e7bdc 100644
--- a/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx
+++ b/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx
@@ -8,7 +8,7 @@ interface ActivityExecutionErrorReportModalProps {
     // Called when the close button is clicked
     onDiscard: () => any;
     // The error report
-    report: JSX.Element;
+    report: React.JSX.Element;
     // Value of the download button
     downloadButtonValue: string;
     // Value of the close button
diff --git a/src/cmem/ActivityControl/SilkActivityControl.tsx b/src/cmem/ActivityControl/SilkActivityControl.tsx
index 3997fe4e2..d4acac0e7 100644
--- a/src/cmem/ActivityControl/SilkActivityControl.tsx
+++ b/src/cmem/ActivityControl/SilkActivityControl.tsx
@@ -15,11 +15,11 @@ const progressBreakpointAnimation = 99;
 
 export interface SilkActivityControlProps extends TestableComponent {
     // The label of this activity
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * To add tags in addition to the widget status description
      */
-    tags?: JSX.Element;
+    tags?: React.JSX.Element;
     // Initial state
     initialStatus?: SilkActivityStatusProps;
     // Register a function in order to receive callbacks
@@ -80,7 +80,7 @@ export interface SilkActivityControlLayoutProps {
     // what type of progrss display should be uses, horizontal progress bar, circular spinner, or none of that
     visualization?: "none" | "progressbar" | "spinner";
     // wrapper around label
-    labelWrapper?: JSX.Element;
+    labelWrapper?: React.JSX.Element;
 }
 
 const defaultLayout: SilkActivityControlLayoutProps = {
@@ -94,7 +94,7 @@ interface IErrorReportAction {
     // The title of the error report modal
     title?: string;
     // The element that will be rendered in the modal, either as Markdown or object
-    renderReport: (report: string | SilkActivityExecutionReportProps) => JSX.Element;
+    renderReport: (report: string | SilkActivityExecutionReportProps) => React.JSX.Element;
     // What version of the report should be handed to the renderReport function, if false SilkActivityExecutionReportProps, if true the Markdown string
     renderMarkdown: boolean;
     // The function to fetch the error report. It returns undefined if something went wrong.
diff --git a/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx b/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx
index 374bb6529..e5ec7a796 100644
--- a/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx
+++ b/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx
@@ -31,7 +31,7 @@ export interface StringPreviewContentBlobTogglerProps
      * Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
      * This allows to add non-string elements to both the full-view content and the pure string content.
      */
-    noTogglerContentSuffix?: JSX.Element;
+    noTogglerContentSuffix?: React.JSX.Element;
     /**
      * If only the first non-empty line should be shown in the preview.
      * This will in addition also be shortened according to `previewMaxLength`.
diff --git a/src/cmem/react-flow/configuration/graph.ts b/src/cmem/react-flow/configuration/graph.ts
index e7abf6028..73489798d 100644
--- a/src/cmem/react-flow/configuration/graph.ts
+++ b/src/cmem/react-flow/configuration/graph.ts
@@ -1,8 +1,7 @@
+import { NodeProps } from "react-flow-renderer";
 import { EdgeBezier } from "./../../../extensions/react-flow/edges/EdgeBezier";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { GRAPH_NODE_TYPES } from "./typing";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeBezier,
@@ -16,7 +15,7 @@ const edgeTypes = {
     danger: EdgeBezier,
 };
 
-const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<GRAPH_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     graph: NodeDefault,
     class: NodeDefault,
diff --git a/src/cmem/react-flow/configuration/linking.ts b/src/cmem/react-flow/configuration/linking.ts
index 4a8326a78..f7bd55d74 100644
--- a/src/cmem/react-flow/configuration/linking.ts
+++ b/src/cmem/react-flow/configuration/linking.ts
@@ -2,8 +2,7 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { StickyNoteNode } from "./../nodes/StickyNoteNode";
 import { LINKING_NODE_TYPES } from "./typing";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
+import {NodeProps} from "react-flow-renderer";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -14,7 +13,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ComponentType<NodeProps> /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,
diff --git a/src/cmem/react-flow/configuration/workflow.ts b/src/cmem/react-flow/configuration/workflow.ts
index 5a8621a89..508e64076 100644
--- a/src/cmem/react-flow/configuration/workflow.ts
+++ b/src/cmem/react-flow/configuration/workflow.ts
@@ -2,8 +2,7 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { StickyNoteNode } from "./../nodes/StickyNoteNode";
 import { WORKFLOW_NODE_TYPES } from "./typing";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
+import {NodeProps} from "react-flow-renderer";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -12,7 +11,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     dataset: NodeDefault,
     linking: NodeDefault,
diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx
index 1c3b18a11..c63d6c6d7 100644
--- a/src/components/Accordion/AccordionItem.tsx
+++ b/src/components/Accordion/AccordionItem.tsx
@@ -18,7 +18,7 @@ export interface AccordionItemProps
     /**
      * header of accordion item
      */
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * use full available width for content
      */
diff --git a/src/components/Application/ApplicationSidebarNavigation.tsx b/src/components/Application/ApplicationSidebarNavigation.tsx
index c4c5e977d..0116eadf4 100644
--- a/src/components/Application/ApplicationSidebarNavigation.tsx
+++ b/src/components/Application/ApplicationSidebarNavigation.tsx
@@ -4,14 +4,18 @@ import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@c
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationSidebarNavigationProps
-    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
-        React.HTMLAttributes<HTMLElement> {}
+    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader"| "onToggle"> {
+            children: React.ReactNode;
+            className?: string;
+            onToggle?: any //todo change later
+        }
 
 export const ApplicationSidebarNavigation = ({
     children,
     className = "",
     ...otherCarbonSideNavProps
 }: ApplicationSidebarNavigationProps) => {
+
     return (
         <CarbonSideNav
             className={`${eccgui}-application__menu__sidebar ${className}`}
diff --git a/src/components/Application/ApplicationTitle.tsx b/src/components/Application/ApplicationTitle.tsx
index edec4d05e..a061d49df 100644
--- a/src/components/Application/ApplicationTitle.tsx
+++ b/src/components/Application/ApplicationTitle.tsx
@@ -60,7 +60,13 @@ export const ApplicationTitle = ({
             <span className={`${eccgui}-application__title--content`}>
                 {!!depiction && (
                     <>
-                        <span className={`${eccgui}-application__title--depiction`}>{depiction}</span>
+                        <span className={`${eccgui}-application__title--depiction`}>
+                            {React.isValidElement(depiction)
+                                ? depiction
+                                : depiction instanceof HTMLElement
+                                    ? <>{depiction.outerHTML}</>
+                                    : depiction}
+                        </span>
                     </>
                 )}
                 {!!prefix && (
diff --git a/src/components/Application/stories/ColorPalettes.stories.tsx b/src/components/Application/stories/ColorPalettes.stories.tsx
index ecee1e8df..e31d98d8b 100644
--- a/src/components/Application/stories/ColorPalettes.stories.tsx
+++ b/src/components/Application/stories/ColorPalettes.stories.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { render } from "react-dom";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 import Color from "color";
+import { createRoot } from 'react-dom/client';
 
 import CssCustomProperties from "./../../../common/utils/CssCustomProperties";
 import {
@@ -194,10 +194,11 @@ const ColorPaletteConfigurator = ({
                     }, 0 as number);
                 const warningsTarget = document.getElementById("sumWarnings");
                 if (warningsTarget) {
+                    const warningsRoot = createRoot(warningsTarget)
                     if (warnings > 0) {
-                        render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
+                        warningsRoot.render(<Badge intent={"warning"}>{warnings}</Badge>);
                     } else {
-                        render(<></>, warningsTarget);
+                        warningsRoot.render(<></>);
                     }
                 }
             }
diff --git a/src/components/AutoSuggestion/AutoSuggestion.tsx b/src/components/AutoSuggestion/AutoSuggestion.tsx
index 057164e29..9e956692b 100644
--- a/src/components/AutoSuggestion/AutoSuggestion.tsx
+++ b/src/components/AutoSuggestion/AutoSuggestion.tsx
@@ -124,10 +124,10 @@ export interface CodeAutocompleteFieldProps {
      */
     useTabForCompletions?: boolean;
     /** An additional element that is put to the left side of the input field */
-    leftElement?: JSX.Element | null;
+    leftElement?: React.JSX.Element | null;
     /** An additional element that is put to the right side of the input field
      */
-    rightElement?: JSX.Element | null;
+    rightElement?: React.JSX.Element | null;
     /** Placeholder tobe shown when no text has been entered, yet. */
     placeholder?: string;
     /** If the horizontal scrollbars should be shown. */
@@ -214,7 +214,7 @@ export const CodeAutocompleteField = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
-    const currentCm = React.useRef<EditorView>();
+    const currentCm = React.useRef<EditorView>(undefined);
     currentCm.current = cm;
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
@@ -361,7 +361,7 @@ export const CodeAutocompleteField = ({
         return { fromOffset, toOffset };
     };
 
-    const inputActionsDisplayed = React.useCallback((node) => {
+    const inputActionsDisplayed = React.useCallback((node:any) => {
         if (!node) return;
         const width = node.offsetWidth;
         const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);
diff --git a/src/components/AutoSuggestion/AutoSuggestionList.tsx b/src/components/AutoSuggestion/AutoSuggestionList.tsx
index ff524fad3..eb6889cb9 100644
--- a/src/components/AutoSuggestion/AutoSuggestionList.tsx
+++ b/src/components/AutoSuggestion/AutoSuggestionList.tsx
@@ -88,7 +88,7 @@ export const AutoSuggestionList = ({
 }: AutoSuggestionListProps) => {
     const [hoveredItem, setHoveredItem] = React.useState<CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined>(undefined);
     // Refs of list items
-    const [refs] = React.useState<React.RefObject<Element>[]>([]);
+    const [refs] = React.useState<React.RefObject<Element | null>[]>([]);
     const dropdownRef = React.useRef<HTMLDivElement>(null);
     const generateRef = (index: number) => {
         if (!refs[index]) {
diff --git a/src/components/AutocompleteField/AutoCompleteField.tsx b/src/components/AutocompleteField/AutoCompleteField.tsx
index 02f6a5613..8b64610e2 100644
--- a/src/components/AutocompleteField/AutoCompleteField.tsx
+++ b/src/components/AutocompleteField/AutoCompleteField.tsx
@@ -64,7 +64,7 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
         query: string,
         modifiers: SuggestFieldItemRendererModifierProps,
         handleClick: () => any
-    ): string | JSX.Element;
+    ): string | React.JSX.Element;
 
     /** Renders the string that should be displayed in the input field after the item has been selected.
      */
@@ -122,7 +122,7 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
             query: string,
             modifiers: SuggestFieldItemRendererModifierProps,
             handleClick: React.MouseEventHandler<HTMLElement>
-        ) => JSX.Element | undefined;
+        ) => React.JSX.Element | undefined;
 
         /** If the new item option will always be shown as the first entry in the suggestion list, else it will be the last entry.
          * @default false
@@ -160,19 +160,10 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
     loadMoreResults?: () => Promise<T[] | undefined>;
 }
 
-SuggestField.defaultProps = {
-    autoFocus: false,
-    disabled: false,
-    onlyDropdownWithQuery: false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
-    fill: true,
-    requestErrorPrefix: "",
-    hasBackDrop: false,
-};
-
 /**
  * A component with the appearance of an input field that allows to select and optionally create new items.
  * It shows suggestions for the entered text from which the user can select any option.
- * 
+ *
  * It has the following fixed behavior:
  *
  * - When not focused, a different representation of the item value can be shown, e.g. the label of the value.
@@ -187,21 +178,21 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
         className,
         reset,
         noResultText,
-        disabled,
-        onlyDropdownWithQuery,
+        disabled = false,
+        onlyDropdownWithQuery = false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
         itemValueSelector,
         itemRenderer,
         onSearch,
         onChange,
         initialValue,
-        autoFocus,
+        autoFocus = false,
         createNewItem,
         itemValueRenderer,
         resetQueryToValue,
         itemValueString,
-        requestErrorPrefix,
-        hasBackDrop,
-        fill,
+        requestErrorPrefix = "",
+        hasBackDrop = false,
+        fill = true,
         loadMoreResults,
         ...otherProps
     } = props;
diff --git a/src/components/AutocompleteField/autoCompleteFieldUtils.tsx b/src/components/AutocompleteField/autoCompleteFieldUtils.tsx
index ba2f75bdc..c395a3218 100644
--- a/src/components/AutocompleteField/autoCompleteFieldUtils.tsx
+++ b/src/components/AutocompleteField/autoCompleteFieldUtils.tsx
@@ -14,7 +14,7 @@ import { SuggestFieldItemRendererModifierProps } from "./interfaces";
  * @param iconName Optional icon to show left to the text.
  */
 export const createNewItemRendererFactory = (
-    itemTextRenderer: (query: string) => string | JSX.Element,
+    itemTextRenderer: (query: string) => string | React.JSX.Element,
     iconName?: ValidIconName | React.ReactElement<TestIconProps>
 ) => {
     // Return custom render function
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 7110d1c33..fcf253924 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -47,7 +47,7 @@ interface AdditionalButtonProps {
     /**
      * takes in either a string of text or a react element to display as a tooltip when the button is hovered.
      */
-    tooltip?: string | JSX.Element | null;
+    tooltip?: string | React.JSX.Element | null;
     /**
      * Object with additional properties for the tooltip.
      */
@@ -55,11 +55,11 @@ interface AdditionalButtonProps {
     /**
      * Icon displayed on button start.
      */
-    icon?: ValidIconName | JSX.Element;
+    icon?: ValidIconName | React.JSX.Element;
     /**
      * Icon displayed on button end.
      */
-    rightIcon?: ValidIconName | JSX.Element;
+    rightIcon?: ValidIconName | React.JSX.Element;
 }
 
 interface ExtendedButtonProps
diff --git a/src/components/Card/CardHeader.tsx b/src/components/Card/CardHeader.tsx
index 54baf9757..936793ba1 100644
--- a/src/components/Card/CardHeader.tsx
+++ b/src/components/Card/CardHeader.tsx
@@ -8,7 +8,7 @@ import CardOptions from "./CardOptions";
 import CardTitle from "./CardTitle";
 
 export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
-    children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
+    children: React.JSX.Element | (React.JSX.Element | undefined | null)[] | null | undefined;
 }
 
 export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => {
diff --git a/src/components/ContextOverlay/ContextMenu.tsx b/src/components/ContextOverlay/ContextMenu.tsx
index 8e9a5a057..c51ca0b33 100644
--- a/src/components/ContextOverlay/ContextMenu.tsx
+++ b/src/components/ContextOverlay/ContextMenu.tsx
@@ -17,13 +17,13 @@ export interface ContextMenuProps extends TestableComponent {
      * The elements of the context menu.
      * They will be wrapped in a `Menu` element automatically.
      */
-    children?: JSX.Element | JSX.Element[];
+    children?: React.JSX.Element | React.JSX.Element[];
     /**
      * Toggler that need to be used to display menu.
      * If a valid icon name is used then the icon element is displayed.
      * In this case `togglerText`, `togglerLarge` and `tooltipAsTitle` are used, too.
      */
-    togglerElement?: ValidIconName | JSX.Element;
+    togglerElement?: ValidIconName | React.JSX.Element;
     /**
      * Text displayed as title or tooltip on toggler element.
      */
diff --git a/src/components/ContextOverlay/ContextOverlay.tsx b/src/components/ContextOverlay/ContextOverlay.tsx
index 7b3c884ed..dc601e12f 100644
--- a/src/components/ContextOverlay/ContextOverlay.tsx
+++ b/src/components/ContextOverlay/ContextOverlay.tsx
@@ -13,7 +13,7 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
     /**
      * `target` element to use as toggler for the overlay display.
      */
-    children?: JSX.Element;
+    children?: React.JSX.Element;
     /**
      * Type of counter property to `Modal.forceTopPosition`.
      * Use it when you need to display modal dialogs out of the context overlay.
@@ -108,7 +108,7 @@ export const ContextOverlay = ({
         return () => {};
     }, [!!placeholderRef.current, otherPopoverProps.interactionKind]);
 
-    const refocus = React.useCallback((node) => {
+    const refocus = React.useCallback((node:any) => {
         const target = node?.targetRef.current.children[0];
         if (!eventMemory.current || !target) {
             return;
diff --git a/src/components/Depiction/Depiction.tsx b/src/components/Depiction/Depiction.tsx
index 619897c69..6bfeee938 100644
--- a/src/components/Depiction/Depiction.tsx
+++ b/src/components/Depiction/Depiction.tsx
@@ -65,7 +65,7 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Description of the depiction.
      */
-    caption?: string | JSX.Element;
+    caption?: string | React.JSX.Element;
     /**
      * How is the caption displayed.
      */
diff --git a/src/components/Dialog/SimpleDialog.tsx b/src/components/Dialog/SimpleDialog.tsx
index 8e910c3d5..54b4e44a7 100644
--- a/src/components/Dialog/SimpleDialog.tsx
+++ b/src/components/Dialog/SimpleDialog.tsx
@@ -30,7 +30,7 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
      * Can contain elements actionable/non-actionable elements display right-aligned to the dialog title.
      */
-    headerOptions?: null | JSX.Element | JSX.Element[];
+    headerOptions?: null | React.JSX.Element | React.JSX.Element[];
     /**
      * If enabled neither closing via `esc` key or clicking outside of the component will work, except explicitly specified.
      */
diff --git a/src/components/Form/FieldItem.tsx b/src/components/Form/FieldItem.tsx
index 252efcbef..28009a57f 100644
--- a/src/components/Form/FieldItem.tsx
+++ b/src/components/Form/FieldItem.tsx
@@ -24,7 +24,7 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
      * Text for user help.
      * Is displayed between label and input element.
      */
-    helperText?: string | JSX.Element;
+    helperText?: string | React.JSX.Element;
     /**
      * Feedback notification.
      * Is displayed below the included input element.
diff --git a/src/components/Form/FieldSet.tsx b/src/components/Form/FieldSet.tsx
index 9e9fbaec5..3287b6d8a 100644
--- a/src/components/Form/FieldSet.tsx
+++ b/src/components/Form/FieldSet.tsx
@@ -16,17 +16,17 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
     /**
      * Optional helper text. If given then it is displayed after the title.
      */
-    helperText?: string | JSX.Element;
+    helperText?: string | React.JSX.Element;
     /**
      * Optional notification text.
      * If given then it is displayed before the fieldset content and is colored reagarding the set intent state.
      */
-    messageText?: string | JSX.Element;
+    messageText?: string | React.JSX.Element;
     /**
      * Optional title, set the fieldset legend and if given it is display on top, colored reagarding the set intent state.
      *
      */
-    title?: string | JSX.Element;
+    title?: string | React.JSX.Element;
 }
 
 /**
diff --git a/src/components/HoverToggler/HoverToggler.tsx b/src/components/HoverToggler/HoverToggler.tsx
index eb4e4b279..525607af2 100644
--- a/src/components/HoverToggler/HoverToggler.tsx
+++ b/src/components/HoverToggler/HoverToggler.tsx
@@ -10,12 +10,12 @@ export interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElem
     /**
      * The content that is shown when not hovered.
      */
-    baseContent: JSX.Element;
+    baseContent: React.JSX.Element;
     baseContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
     /**
      * The content that is shown when hovered.
      */
-    hoverContent: JSX.Element;
+    hoverContent: React.JSX.Element;
     hoverContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
     /**
      * Display as inline element.
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index bef756225..f383fda4f 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -9,15 +9,15 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
     /**
      * Label text.
      */
-    text?: string | JSX.Element;
+    text?: string | React.JSX.Element;
     /**
      * Short info about label semantic, it is displayed in parentesis after the label text.
      */
-    info?: string | JSX.Element;
+    info?: string | React.JSX.Element;
     /**
      * Additional tooltip, attached to an info icon that is displayed after the info.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
     /**
      * Additonal tooltip properties, e.g. `hoverOpenDelay`.
      */
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 466911bdc..8858e56ad 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -23,7 +23,7 @@ export interface MenuItemProps
     /**
      * Tooltip, but only added to the label, not to the full menu item.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 }
 
 /**
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index 85809b942..3aa1043c7 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -20,11 +20,11 @@ export interface NotificationProps
     /**
      * Extra user action elements
      */
-    actions?: JSX.Element | JSX.Element[];
+    actions?: React.JSX.Element | React.JSX.Element[];
     /**
      * Notification message that can be used as alternative to children elements.
      */
-    message?: JSX.Element | string;
+    message?: React.JSX.Element | string;
     /**
      * Intent state of the notification.
      */
@@ -97,7 +97,7 @@ export const Notification = ({
             timeout={timeout ? timeout : 0}
             icon={
                 notificationIcon
-                    ? React.cloneElement(notificationIcon as JSX.Element, {
+                    ? React.cloneElement(notificationIcon as React.JSX.Element, {
                           className: (notificationIcon.props.className ?? "") + ` ${BlueprintClassNames.ICON}`,
                       })
                     : undefined
diff --git a/src/components/OverviewItem/OverviewItemActions.tsx b/src/components/OverviewItem/OverviewItemActions.tsx
index 172b57da6..0dd1ba950 100644
--- a/src/components/OverviewItem/OverviewItemActions.tsx
+++ b/src/components/OverviewItem/OverviewItemActions.tsx
@@ -18,7 +18,7 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
     /**
      * Display element while the rendering of the actual children is delayed.
      */
-    delaySkeleton?: JSX.Element;
+    delaySkeleton?: React.JSX.Element;
 }
 
 /**
diff --git a/src/components/OverviewItem/OverviewItemDepiction.tsx b/src/components/OverviewItem/OverviewItemDepiction.tsx
index b5bc6337d..1cb41e2a5 100644
--- a/src/components/OverviewItem/OverviewItemDepiction.tsx
+++ b/src/components/OverviewItem/OverviewItemDepiction.tsx
@@ -35,7 +35,7 @@ export const OverviewItemDepiction = ({
         "type" in children &&
         (children.type === Icon || children.type === TestIcon)
     ) {
-        return <Depiction image={children as JSX.Element} {...defaultDepictionDisplay} />;
+        return <Depiction image={children as React.JSX.Element} {...defaultDepictionDisplay} />;
     }
     return (
         <div
diff --git a/src/components/PropertyValuePair/PropertyValueList.tsx b/src/components/PropertyValuePair/PropertyValueList.tsx
index e446d2c49..85b86ca01 100644
--- a/src/components/PropertyValuePair/PropertyValueList.tsx
+++ b/src/components/PropertyValuePair/PropertyValueList.tsx
@@ -22,7 +22,7 @@ export const PropertyValueList = ({
         ? React.Children.map(children, (child) => {
               const originalChild = child as React.ReactElement;
               if (originalChild && originalChild.type && originalChild.type === PropertyValuePair) {
-                  return React.cloneElement(originalChild, { singleColumn: true });
+                  return React.cloneElement(originalChild as React.ReactElement<{singleColumn: boolean}>, { singleColumn: true });
               }
               return child;
           })
diff --git a/src/components/PropertyValuePair/PropertyValuePair.tsx b/src/components/PropertyValuePair/PropertyValuePair.tsx
index d26f3493e..988880d9a 100644
--- a/src/components/PropertyValuePair/PropertyValuePair.tsx
+++ b/src/components/PropertyValuePair/PropertyValuePair.tsx
@@ -37,7 +37,7 @@ export const PropertyValuePair = ({
         ? React.Children.map(children, (child) => {
               const originalChild = child as React.ReactElement;
               if (originalChild.type && (originalChild.type === PropertyName || originalChild.type === PropertyValue)) {
-                  return React.cloneElement(originalChild, { nowrap: true });
+                  return React.cloneElement(originalChild as React.ReactElement<{nowrap: boolean}>, { nowrap: true });
               }
               return child;
           })
diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
index 0cb017bb7..c0160094e 100644
--- a/src/components/Skeleton/Skeleton.tsx
+++ b/src/components/Skeleton/Skeleton.tsx
@@ -6,7 +6,7 @@ export interface SkeletonProps {
     /**
      * Element that need to displayed using the skeleton styles.
      */
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
 }
 
 /**
@@ -15,7 +15,7 @@ export interface SkeletonProps {
  */
 export function Skeleton({ children }: SkeletonProps) {
     const alteredChildren = React.Children.map(children, (child) => {
-        const originalChild = child as React.ReactElement;
+        const originalChild = child;
         if (originalChild.props) {
             return React.cloneElement(originalChild, {
                 className: originalChild.props.className ? originalChild.props.className + " " + SKELETON : SKELETON,
diff --git a/src/components/Structure/TitleSubsection.tsx b/src/components/Structure/TitleSubsection.tsx
index baddb725e..b60b588ca 100644
--- a/src/components/Structure/TitleSubsection.tsx
+++ b/src/components/Structure/TitleSubsection.tsx
@@ -6,7 +6,7 @@ export interface TitleSubsectionProps extends React.HTMLAttributes<HTMLElement>
     /**
      * HTML tag to use for element. As default element `h3` is used for a string as children, otherwise `div`.
      */
-    useHtmlElement?: keyof JSX.IntrinsicElements;
+    useHtmlElement?: keyof React.JSX.IntrinsicElements;
 }
 
 export const TitleSubsection = ({ children, className = "", useHtmlElement, ...restProps }: TitleSubsectionProps) => {
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 0f2e9b828..4e1d11729 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -50,7 +50,7 @@ export function Table({
     children,
     ...otherCarbonTableProps
 }: TableProps) {
-    let colLayout: boolean | JSX.Element = false;
+    let colLayout: boolean | React.JSX.Element = false;
     if (!!columnWidths && columnWidths.length > 0) {
         colLayout = (
             <colgroup className={`${eccgui}-simpletable__layout`}>
diff --git a/src/components/Table/TableContainer.tsx b/src/components/Table/TableContainer.tsx
index 8e91322c1..aadc4ecfb 100644
--- a/src/components/Table/TableContainer.tsx
+++ b/src/components/Table/TableContainer.tsx
@@ -19,14 +19,14 @@ export interface TableDataContainerProps
             >,
             "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
         >,
-        React.TableHTMLAttributes<HTMLTableElement> {
-    children(signature: any): JSX.Element;
+        Omit<React.TableHTMLAttributes<HTMLTableElement>, "children">  {
+    children(signature: any): React.JSX.Element;
     size?: TableProps["size"];
 }
 export interface TableSimpleContainerProps
     extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,
         React.HTMLAttributes<HTMLDivElement> {
-    children?: JSX.Element;
+    children?: React.JSX.Element;
 }
 
 export type TableContainerProps = TableDataContainerProps | TableSimpleContainerProps;
@@ -46,7 +46,7 @@ export function TableContainer({ className = "", ...otherProps }: TableContainer
             />
         </CarbonDataTable.TableContainer>
     ) : (
-        <CarbonDataTable.TableContainer {...otherProps} className={`${eccgui}-simpletable__container ` + className} />
+        <CarbonDataTable.TableContainer {...{...otherProps, children: otherProps.children as React.ReactNode}} className={`${eccgui}-simpletable__container ` + className} />
     );
 }
 
diff --git a/src/components/Tabs/TabTitle.tsx b/src/components/Tabs/TabTitle.tsx
index 2088ec587..d1583c8d3 100644
--- a/src/components/Tabs/TabTitle.tsx
+++ b/src/components/Tabs/TabTitle.tsx
@@ -29,7 +29,7 @@ export interface TabTitleProps {
     /**
      * Add a tooltip to a tab, displayed when user hoveres over it.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
     /**
      * Make the tab not usable, display is also narrowed.
      */
diff --git a/src/components/TextField/TextArea.tsx b/src/components/TextField/TextArea.tsx
index 52c463ca0..f7fcd7c66 100644
--- a/src/components/TextField/TextArea.tsx
+++ b/src/components/TextField/TextArea.tsx
@@ -32,7 +32,7 @@ export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
      * Element to render on right side of text area. Should be not too large.
      * This will update right padding on the text area.
      */
-    rightElement?: JSX.Element;
+    rightElement?: React.JSX.Element;
     /**
      * Add HTML properties to the wrapper element.
      * The element wraps `TextArea` in case of a given `wrapperDivProps`, `leftIcon` or `rightElement` property.
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 7a3108f7e..8934f9d79 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -123,7 +123,7 @@ export const Tooltip = ({
         return () => {};
     }, [!!placeholderRef.current]);
 
-    const refocus = React.useCallback((node) => {
+    const refocus = React.useCallback((node:any) => {
         if (eventMemory.current && node) {
             // we do not have a `targetRef` here, so we need to workaround it
             // const target = node.targetRef.current.children[0];
diff --git a/src/extensions/codemirror/CodeMirror.tsx b/src/extensions/codemirror/CodeMirror.tsx
index 1fb523539..b74cc896c 100644
--- a/src/extensions/codemirror/CodeMirror.tsx
+++ b/src/extensions/codemirror/CodeMirror.tsx
@@ -227,7 +227,7 @@ export const CodeEditor = ({
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
     const [view, setView] = React.useState<EditorView | undefined>();
-    const currentView = React.useRef<EditorView>()
+    const currentView = React.useRef<EditorView>(undefined)
     currentView.current = view
     const currentReadOnly = React.useRef(readOnly)
     currentReadOnly.current = readOnly
@@ -461,7 +461,7 @@ export const CodeEditor = ({
 
     const hasToolbarSupport = mode && ModeToolbarSupport.indexOf(mode) > -1 && useToolbar;
 
-    const editorToolbar = (mode?: SupportedCodeEditorModes): JSX.Element => {
+    const editorToolbar = (mode?: SupportedCodeEditorModes): React.JSX.Element => {
         switch (mode) {
             case "markdown":
                 return (
diff --git a/src/extensions/react-flow/edges/EdgeLabel.tsx b/src/extensions/react-flow/edges/EdgeLabel.tsx
index 767146a21..41f4a2f8b 100644
--- a/src/extensions/react-flow/edges/EdgeLabel.tsx
+++ b/src/extensions/react-flow/edges/EdgeLabel.tsx
@@ -14,11 +14,11 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      * Label of the edge.
      * Cannot overflow the parent container.
      */
-    text: string | JSX.Element;
+    text: string | React.JSX.Element;
     /**
      * One or multiple other elements displayed right from label.
      */
-    actions?: JSX.Element | JSX.Element[];
+    actions?: React.JSX.Element | React.JSX.Element[];
     /**
      * The element is increased in its size.
      */
@@ -109,7 +109,7 @@ export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObje
 export const EdgeLabelObject = memo(
     ({ children, edgeCenter, resizeTimeout = -1, ...otherForeignObjectProps }: EdgeLabelObjectProps) => {
         const containerCallback = React.useCallback(
-            (containerRef) => {
+            (containerRef:any) => {
                 if (containerRef) labelSize(containerRef);
             },
             [edgeCenter]
diff --git a/src/extensions/react-flow/edges/EdgeTools.tsx b/src/extensions/react-flow/edges/EdgeTools.tsx
index f5544a887..31cbc4079 100644
--- a/src/extensions/react-flow/edges/EdgeTools.tsx
+++ b/src/extensions/react-flow/edges/EdgeTools.tsx
@@ -13,7 +13,7 @@ interface PosOffset {
 
 export interface EdgeToolsProps extends Omit<ContextOverlayProps, "children"> {
     posOffset: PosOffset;
-    children: string | JSX.Element | JSX.Element[];
+    children: string | React.JSX.Element | React.JSX.Element[];
 }
 
 export const EdgeTools = memo(({ posOffset, children, ...otherProps }: EdgeToolsProps) => {
diff --git a/src/extensions/react-flow/handles/HandleContent.tsx b/src/extensions/react-flow/handles/HandleContent.tsx
index f18f3cf3b..7738195b3 100644
--- a/src/extensions/react-flow/handles/HandleContent.tsx
+++ b/src/extensions/react-flow/handles/HandleContent.tsx
@@ -7,7 +7,7 @@ export interface HandleContentProps extends Omit<React.HTMLAttributes<HTMLDivEle
     /**
      * Tooltip displayed as overlay on hover.
      */
-    extendedTooltip?: JSX.Element | string;
+    extendedTooltip?: React.JSX.Element | string;
     /**
      * Configure the tooltip and overwrite automatically set options.
      */
diff --git a/src/extensions/react-flow/handles/HandleTools.tsx b/src/extensions/react-flow/handles/HandleTools.tsx
index bbf336e60..a5a85e252 100644
--- a/src/extensions/react-flow/handles/HandleTools.tsx
+++ b/src/extensions/react-flow/handles/HandleTools.tsx
@@ -9,7 +9,7 @@ import { ContextOverlayProps } from "./../../../components/ContextOverlay/Contex
 export interface HandleToolsProps
     extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName">,
         TestableComponent {
-    children: string | JSX.Element | JSX.Element[];
+    children: string | React.JSX.Element | React.JSX.Element[];
 }
 
 export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToolsProps) => {
diff --git a/src/extensions/react-flow/markers/ReactFlowMarkers.tsx b/src/extensions/react-flow/markers/ReactFlowMarkers.tsx
index 2f99a0c08..82cdd1137 100644
--- a/src/extensions/react-flow/markers/ReactFlowMarkers.tsx
+++ b/src/extensions/react-flow/markers/ReactFlowMarkers.tsx
@@ -47,7 +47,7 @@ const ReactFlowMarker = ({ className, appearance = "arrow-closed", intent, rever
             refY="0"
             orient={reverse ? "auto-start-reverse" : "auto"}
         >
-            {markerDisplay[appearance]}
+            {markerDisplay[appearance] as React.ReactNode}
         </marker>
     );
 };
diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx
index ea7201808..5e023aa81 100644
--- a/src/extensions/react-flow/nodes/NodeContent.tsx
+++ b/src/extensions/react-flow/nodes/NodeContent.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Position, useStoreState as getStoreStateFlowV9 } from "react-flow-renderer";
 import { useStore as getStoreStateFlowV12 } from "@xyflow/react";
 import Color from "color";
-import { Resizable } from "re-resizable";
+import {NumberSize, Resizable, ResizeCallback} from "re-resizable";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { DepictionProps } from "../../../components";
@@ -62,15 +62,15 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Any element that should be displayed as depiction before the node label.
      */
-    leftElement?: JSX.Element;
+    leftElement?: React.JSX.Element;
     /**
      * Label that is displayed in the node header.
      */
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * Element that is displayed as subline under the label in the header.
      */
-    labelSubline?: JSX.Element;
+    labelSubline?: React.JSX.Element;
     /**
      * Content element, displayed in the node body.
      */
@@ -386,7 +386,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
             console.error(error);
         }
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
-    const nodeContentRef = React.useRef<any>();
+    const nodeContentRef = React.useRef<any>(undefined);
 
     const handleStack: Record<string, HandleDefaultProps[]> = {
         [Position.Top]: [],
@@ -735,7 +735,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
         return validatedHeight;
     };
 
-    const onResize = React.useCallback((_0, _1, _2, d) => {
+    const onResize = React.useCallback((_0:any, _1:any, _2:any, d:any) => {
         if (nodeContentRef.current) {
             const nextWidth = resizeDirections.right
                 ? (width ?? originalSize.current.width ?? 0) + d.width
@@ -756,7 +756,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
         }
     }, [resizeDirections, originalSize, width, height])
 
-    const onResizeStop = React.useCallback((_0, _1, _2, d) => {
+    const onResizeStop: ResizeCallback = React.useCallback((_0, _1, _2, d: NumberSize) => {
         const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
         const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height);
         setWidth(nextWidth);
diff --git a/src/extensions/react-flow/nodes/NodeTools.tsx b/src/extensions/react-flow/nodes/NodeTools.tsx
index 6db7cdbaf..970f3a0ca 100644
--- a/src/extensions/react-flow/nodes/NodeTools.tsx
+++ b/src/extensions/react-flow/nodes/NodeTools.tsx
@@ -14,8 +14,8 @@ export interface NodeToolsMenuFunctions {
 }
 
 export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
-    children: string | JSX.Element;
-    togglerElement?: ValidIconName | JSX.Element;
+    children: string | React.JSX.Element;
+    togglerElement?: ValidIconName | React.JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string;
     /** If defined this function will be called with the menu API object to be used externally. */