diff --git a/packages/react-core/global.d.ts b/packages/react-core/global.d.ts
new file mode 100644
index 00000000000..7a1b9def220
--- /dev/null
+++ b/packages/react-core/global.d.ts
@@ -0,0 +1,93 @@
+import * as preact from 'preact';
+
+// also modified
+// node_modules/preact/src/index.d.ts
+/*
+export interface VNode<P = {}> {
+	type: ComponentType<P> | string;
+	props: P & any;
+export function cloneElement(
+	vnode: ComponentChild,
+	props?: any,
+	...children: ComponentChildren[]
+): VNode<any>;
+*/
+
+// node_modules/preact/compat/src/index.d.ts
+/*
+export function createPortal(
+		vnode: preact.ComponentChild,
+		container: Element | DocumentFragment
+	): preact.VNode<any>;
+*/
+
+declare module 'react' {
+//     // https://github.com/preactjs/preact/issues/4114#issuecomment-1690930689
+    interface HTMLProps<T> extends preact.JSX.HTMLAttributes<T> {
+        icon?: string | undefined | preact.SignalLike<string | undefined> | preact.ComponentChild;
+        role?: preact.JSX.AriaRole | undefined | preact.SignalLike<preact.JSX.AriaRole | undefined>;
+    };
+    type AriaRole = preact.JSX.AriaRole;
+    type JSXElementConstructor<P> =
+        | ((props: P) => ReactElement<any, any> | null)
+        | (new (props: P) => Component<any, any>);
+    interface ButtonHTMLAttributes<T = any> extends preact.JSX.HTMLAttributes<T> {};
+    interface ImgHTMLAttributes<T = any> extends preact.JSX.HTMLAttributes<T> {};
+    interface InputHTMLAttributes<T = any> extends preact.JSX.HTMLAttributes<T> {};
+    interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
+        reversed?: boolean | undefined;
+        start?: number | undefined;
+        type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined;
+    };
+    interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
+        value?: string | ReadonlyArray<string> | number | undefined;
+    }
+    type ReactText = string | number;
+    type ComponentType<P = {}> = preact.ComponentType<P>;
+    type ElementType<P = any> =
+        {
+            [K in keyof preact.JSX.IntrinsicElements]: P extends preact.JSX.IntrinsicElements[K] ? K : never
+        }[keyof preact.JSX.IntrinsicElements] |
+        ComponentType<P>;
+    // interface VNode<P = {}> extends preact.VNode<P> {
+    //     props: P & { 
+    //         children: preact.ComponentChildren;
+    //         className: string;
+    //     };
+    // }
+    type LegacyRef<T> = string | Ref<T>;
+    // interface ReactElement<P = any, T = any> extends preact.VNode<P> {};
+    interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
+        type: T;
+        props: P;
+        key: Key | null;
+    }
+    type MouseEvent<T = any, E = any> = any;
+    type KeyboardEvent<T = any, E = any> = any;
+    type DragEvent<T = any, E = any> = any;
+    type FormEvent<T = any> = any;
+    type TouchEvent<T = any> = any;
+    type FocusEvent<T = any> = any;
+    type SyntheticEvent<T = any> = any;
+    type TransitionEvent<T = any> = any;
+    type ClipboardEvent<T = any> = any;
+    type TargetedEvent<
+		Target extends EventTarget = EventTarget,
+		TypedEvent extends Event = Event
+	> = preact.JSX.TargetedEvent & {
+        nativeEvent: any;
+    }
+    type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
+    type TargetedTransitionEvent<Target extends EventTarget> =
+		TargetedEvent<Target, TransitionEvent> & {
+            nativeEvent: any;
+        };
+    type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;
+    type SetStateAction<S> = S | ((prevState: S) => S);
+    type HTMLAttributeAnchorTarget =
+        | '_self'
+        | '_blank'
+        | '_parent'
+        | '_top'
+        | (string & {});
+}
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 56dbe10bfa6..390a8172bd5 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.2",
+  "version": "1.0.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -38,6 +38,8 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
+    "build:tsc": "npx tsc --project tsconfig.json",
+    "build:rollup": "rm -rf dist && npx rollup -c rollup-esm.config.js",
     "build:umd": "rollup -c --environment IS_PRODUCTION",
     "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
     "clean": "rimraf dist components layouts helpers next deprecated node_modules",
@@ -54,16 +56,21 @@
   },
   "devDependencies": {
     "@patternfly/patternfly": "5.1.0-prerelease.13",
+    "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
+    "preact": "^10.17.1",
+    "preact-compat": "^3.19.0",
     "rimraf": "^3.0.2",
     "rollup": "^3.21.5",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.35.0",
+    "sass": "^1.66.1",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
diff --git a/packages/react-core/rollup-esm.config.js b/packages/react-core/rollup-esm.config.js
new file mode 100644
index 00000000000..9ddedd9dd21
--- /dev/null
+++ b/packages/react-core/rollup-esm.config.js
@@ -0,0 +1,92 @@
+const alias = require('@rollup/plugin-alias');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const typescript = require('rollup-plugin-typescript2');
+const scss = require('rollup-plugin-scss');
+
+const packageJson = require('./package.json');
+
+module.exports = {
+  //   input: 'dist/esm/index.js',
+  input: 'src/index.ts',
+  output: [
+    {
+      file: packageJson.module,
+      format: 'esm', // ES Modules
+      sourcemap: true
+    }
+  ],
+  external: ['react', 'react-dom'],
+  plugins: [
+    alias({
+      entries: [
+        { find: 'react', replacement: 'preact/compat' },
+        { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+        { find: 'react-dom', replacement: 'preact/compat' },
+        { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
+      ]
+    }),
+    nodeResolve(),
+    typescript({
+      useTsconfigDeclarationDir: false
+    }),
+    scss()
+  ]
+};
+
+// const { nodeResolve } = require('@rollup/plugin-node-resolve');
+// const commonjs = require('@rollup/plugin-commonjs');
+// const scss = require('rollup-plugin-scss');
+// const replace = require('@rollup/plugin-replace');
+// const { terser } = require('rollup-plugin-terser');
+
+// const isProduction = process.env.IS_PRODUCTION;
+// let exitCode = 0;
+
+// function circularFailPlugin() {
+//   return {
+//     name: 'circluarFailPlugin',
+//     buildEnd() {
+//       if (exitCode !== 0) {
+//         process.exit(exitCode);
+//       }
+//     }
+//   };
+// }
+
+// module.exports = ({ packageName, name }) => ({
+//   input: 'dist/esm/index.js',
+//   output: {
+//     file: `dist/umd/${packageName}${isProduction ? '.min' : ''}.js`,
+//     format: 'umd',
+//     inlineDynamicImports: true,
+//     name,
+//     globals: {
+//       react: 'React',
+//       'react-dom': 'ReactDOM'
+//     }
+//   },
+//   external: ['react', 'react-dom'],
+//   plugins: [
+//     replace({
+//       'process.env.NODE_ENV': `'${isProduction ? 'production' : 'development'}'`
+//     }),
+//     nodeResolve(),
+//     commonjs(),
+//     scss(),
+//     isProduction && terser(),
+//     circularFailPlugin()
+//   ],
+//   onwarn(warning) {
+//     if (warning.code === 'CIRCULAR_DEPENDENCY') {
+//       const split = warning.message.split(':');
+//       if (warning.message.includes('d3-interpolate')) {
+//         // eslint-disable-next-line no-console
+//         console.error(`\x1b[33m(!) ${split[0]}:\x1b[0m${split[1]}`);
+//       } else {
+//         // eslint-disable-next-line no-console
+//         console.error(`\x1b[31m(!) ${split[0]}:\x1b[0m${split[1]}`);
+//         exitCode = 1;
+//       }
+//     }
+//   }
+// });
diff --git a/packages/react-core/src/components/Avatar/Avatar.tsx b/packages/react-core/src/components/Avatar/Avatar.tsx
index 874eb13d42a..d9cb6b7e82b 100644
--- a/packages/react-core/src/components/Avatar/Avatar.tsx
+++ b/packages/react-core/src/components/Avatar/Avatar.tsx
@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Avatar/avatar';
 import { css } from '@patternfly/react-styles';
 
 export interface AvatarProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+  extends Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'size'> {
   /** Additional classes added to the Avatar. */
   className?: string;
   /** Attribute that specifies the URL of the image for the Avatar. */
diff --git a/packages/react-core/src/components/BackToTop/BackToTop.tsx b/packages/react-core/src/components/BackToTop/BackToTop.tsx
index d47c2899d98..a27b2a34e21 100644
--- a/packages/react-core/src/components/BackToTop/BackToTop.tsx
+++ b/packages/react-core/src/components/BackToTop/BackToTop.tsx
@@ -11,7 +11,7 @@ interface BackToTopProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDiv
   /** Title to appear in back to top button. */
   title?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
   /** Selector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events. */
   scrollableSelector?: string;
   /** Flag to always show back to top button, defaults to false. */
@@ -89,7 +89,7 @@ const BackToTopBase: React.FunctionComponent<BackToTopProps> = ({
   );
 };
 
-export const BackToTop = React.forwardRef((props: BackToTopProps, ref: React.Ref<any>) => (
+export const BackToTop = React.forwardRef((props: BackToTopProps, ref: React.ForwardedRef<any>) => (
   <BackToTopBase innerRef={ref} {...props} />
 ));
 BackToTop.displayName = 'BackToTop';
diff --git a/packages/react-core/src/components/Brand/Brand.tsx b/packages/react-core/src/components/Brand/Brand.tsx
index 03ed8a9bcea..de170ebdb32 100644
--- a/packages/react-core/src/components/Brand/Brand.tsx
+++ b/packages/react-core/src/components/Brand/Brand.tsx
@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Brand/brand';
 import { setBreakpointCssVars } from '../../helpers';
 export interface BrandProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+  extends React.HTMLProps<HTMLPictureElement | HTMLImageElement> {
   /** Transforms the Brand into a <picture> element from an <img> element. Container for <source> child elements. */
   children?: React.ReactNode;
   /** Additional classes added to the either type of Brand. */
@@ -61,17 +61,17 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
     children !== undefined ? (
       <picture
         className={css(styles.brand, styles.modifiers.picture, className)}
-        style={{ ...style, ...responsiveStyles }}
-        {...props}
+        style={{ ...(style as any), ...responsiveStyles }}
+        {...props as React.HTMLProps<HTMLPictureElement>}
       >
         {children}
         <img src={src} alt={alt} />
       </picture>
     ) : (
       <img
-        {...props}
+        {...props as React.HTMLProps<HTMLImageElement>}
         className={css(styles.brand, className)}
-        style={{ ...style, ...responsiveStyles }}
+        style={{ ...(style as any), ...responsiveStyles }}
         src={src}
         alt={alt}
       />
diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
index 5b05d137f44..663d0711a96 100644
--- a/packages/react-core/src/components/Button/Button.tsx
+++ b/packages/react-core/src/components/Button/Button.tsx
@@ -37,6 +37,8 @@ export interface BadgeCountObject {
   className?: string;
 }
 
+export type Type = 'button' | 'submit' | 'reset';
+
 export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'size'>, OUIAProps {
   /** Content rendered inside the button */
   children?: React.ReactNode;
@@ -67,7 +69,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   /** Adds styling which affects the size of the button */
   size?: 'default' | 'sm' | 'lg';
   /** Sets button type */
-  type?: 'button' | 'submit' | 'reset';
+  type?: Type;
   /** Adds button variant styles */
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control';
   /** Sets position of the link icon */
@@ -81,7 +83,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
   /** Adds count number to button */
   countOptions?: BadgeCountObject;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -199,7 +201,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   );
 };
 
-export const Button = React.forwardRef((props: ButtonProps, ref: React.Ref<any>) => (
+export const Button = React.forwardRef((props: ButtonProps, ref: React.ForwardedRef<any>) => (
   <ButtonBase innerRef={ref} {...props} />
 ));
 
diff --git a/packages/react-core/src/components/Checkbox/Checkbox.tsx b/packages/react-core/src/components/Checkbox/Checkbox.tsx
index 699bbe3d3ff..c1bed1498ef 100644
--- a/packages/react-core/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react-core/src/components/Checkbox/Checkbox.tsx
@@ -103,8 +103,8 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     if (onChange !== defaultOnChange) {
       checkedProps.checked = isChecked;
     }
-    if ([false, true].includes(defaultChecked)) {
-      checkedProps.defaultChecked = defaultChecked;
+    if ([false, true].includes(defaultChecked as boolean)) {
+      checkedProps.defaultChecked = defaultChecked as boolean;
     }
 
     checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
diff --git a/packages/react-core/src/components/Chip/Chip.tsx b/packages/react-core/src/components/Chip/Chip.tsx
index af7b7369f9d..a055bc09fa0 100644
--- a/packages/react-core/src/components/Chip/Chip.tsx
+++ b/packages/react-core/src/components/Chip/Chip.tsx
@@ -110,7 +110,7 @@ class Chip extends React.Component<ChipProps, ChipState> {
         onClick={onClick}
         {...(textMaxWidth && {
           style: this.setChipStyle(),
-          ...style
+          ...(style as any)
         })}
         className={css(styles.chip, styles.modifiers.overflow, className)}
         {...(component === 'button' ? { type: 'button' } : {})}
@@ -192,7 +192,7 @@ class Chip extends React.Component<ChipProps, ChipState> {
     const { isOverflowChip } = this.props;
     return (
       <GenerateId>
-        {(randomId) => (isOverflowChip ? this.renderOverflowChip() : this.renderChip(this.props.id || randomId))}
+        {(randomId) => (isOverflowChip ? this.renderOverflowChip() : this.renderChip((this.props.id || randomId) as string))}
       </GenerateId>
     );
   }
diff --git a/packages/react-core/src/components/Chip/ChipGroup.tsx b/packages/react-core/src/components/Chip/ChipGroup.tsx
index 4c60657be1c..c5554760752 100644
--- a/packages/react-core/src/components/Chip/ChipGroup.tsx
+++ b/packages/react-core/src/components/Chip/ChipGroup.tsx
@@ -206,7 +206,7 @@ class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState> {
     };
 
     return numChildren === 0 ? null : (
-      <GenerateId>{(randomId) => renderChipGroup(this.props.id || randomId)}</GenerateId>
+      <GenerateId>{(randomId) => renderChipGroup((this.props.id || randomId) as string)}</GenerateId>
     );
   }
 }
diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyAction.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyAction.tsx
index 231c1713052..102f9f83bf6 100644
--- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyAction.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyAction.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import { css } from '@patternfly/react-styles';
 
-export interface ClipboardCopyActionProps extends React.HTMLProps<HTMLLIElement> {
+export interface ClipboardCopyActionProps extends React.HTMLProps<HTMLSpanElement> {
   /** Content rendered inside the clipboard copy action. */
   children?: React.ReactNode;
   /** Additional classes added to the clipboard copy action. */
diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx
index e0add211d15..b17b7e5d528 100644
--- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx
@@ -4,7 +4,7 @@ import { Button } from '../Button';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 
 export interface ClipboardCopyButtonProps
-  extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'type' | 'size' | 'tabIndex'> {
   /** Callback for the copy when the button is clicked */
   onClick: (event: React.MouseEvent) => void;
   /** Content of the copy button */
diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx
index efed5f79258..858e82d4ece 100644
--- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx
@@ -30,7 +30,7 @@ class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpandedProps>
 
     return (
       <div
-        suppressContentEditableWarning
+        // suppressContentEditableWarning
         className={css(styles.clipboardCopyExpandableContent, className)}
         onInput={(e: any) => onChange(e, e.target.innerText)}
         contentEditable={!isReadOnly}
diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
index 4e5ef1af604..2eaa3239ddc 100644
--- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
@@ -4,7 +4,7 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import { Button } from '../Button';
 
 export interface ClipboardCopyToggleProps
-  extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'type' | 'size' | 'tabIndex' | 'aria-label'> {
   onClick: (event: React.MouseEvent) => void;
   id: string;
   textId: string;
diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx
index b2f10575441..67e554f81a8 100644
--- a/packages/react-core/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react-core/src/components/DatePicker/DatePicker.tsx
@@ -121,7 +121,7 @@ const DatePickerBase = (
     inputProps = {},
     ...props
   }: DatePickerProps,
-  ref: React.Ref<DatePickerRef>
+  ref: React.ForwardedRef<DatePickerRef>
 ) => {
   const [value, setValue] = React.useState(valueProp);
   const [valueDate, setValueDate] = React.useState(dateParse(value));
@@ -131,7 +131,7 @@ const DatePickerBase = (
   const [pristine, setPristine] = React.useState(true);
   const [textInputFocused, setTextInputFocused] = React.useState(false);
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
-  const style = { '--pf-v5-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
+  const style = { '--pf-v5-c-date-picker__input--c-form-control--width-chars': widthChars, ...(styleProps as any) };
   const buttonRef = React.useRef<HTMLButtonElement>();
   const datePickerWrapperRef = React.useRef<HTMLDivElement>();
   const triggerRef = React.useRef<HTMLDivElement>();
diff --git a/packages/react-core/src/components/DescriptionList/DescriptionList.tsx b/packages/react-core/src/components/DescriptionList/DescriptionList.tsx
index 4957d6b8884..108320d4d84 100644
--- a/packages/react-core/src/components/DescriptionList/DescriptionList.tsx
+++ b/packages/react-core/src/components/DescriptionList/DescriptionList.tsx
@@ -101,19 +101,19 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
 }: DescriptionListProps) => {
   if (isAutoFit && autoFitMinModifier) {
     style = {
-      ...style,
+      ...(style as any),
       ...setBreakpointModifiers('--pf-v5-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
     };
   }
   if (termWidth) {
     style = {
-      ...style,
+      ...(style as any),
       ...{ '--pf-v5-c-description-list__term--width': termWidth }
     };
   }
   if (isHorizontal && horizontalTermWidthModifier) {
     style = {
-      ...style,
+      ...(style as any),
       ...setBreakpointModifiers('--pf-v5-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier)
     };
   }
diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx
index 35ccaba4555..19914e69e89 100644
--- a/packages/react-core/src/components/Divider/Divider.tsx
+++ b/packages/react-core/src/components/Divider/Divider.tsx
@@ -10,8 +10,6 @@ export enum DividerVariant {
 }
 
 export interface DividerProps extends React.HTMLProps<HTMLElement> {
-  /** Additional classes added to the divider */
-  className?: string;
   /** The component type to use */
   component?: 'hr' | 'li' | 'div';
   /** Insets at various breakpoints. */
diff --git a/packages/react-core/src/components/DragDrop/Draggable.tsx b/packages/react-core/src/components/DragDrop/Draggable.tsx
index e76b802946e..9cb5260f8fd 100644
--- a/packages/react-core/src/components/DragDrop/Draggable.tsx
+++ b/packages/react-core/src/components/DragDrop/Draggable.tsx
@@ -138,11 +138,11 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
     } else if (!consumerReordered) {
       // Animate item returning to where it started
       setStyle({
-        ...style,
+        ...(style as any),
         transition: 'transform 0.5s cubic-bezier(0.2, 1, 0.1, 1) 0s',
         transform: '',
-        background: styleProp.background,
-        boxShadow: styleProp.boxShadow
+        background: (styleProp as any).background,
+        boxShadow: (styleProp as any).boxShadow
       });
     }
   };
@@ -196,7 +196,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
 
     // Move hovering draggable and style it based on cursor position
     setStyle({
-      ...style,
+      ...(style as any),
       transform: `translate(${ev.pageX - startX}px, ${ev.pageY - startY}px)`
     });
     setIsValidDrag(Boolean(hoveringDroppable));
@@ -270,7 +270,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
 
     // Set initial style so future style mods take effect
     style = {
-      ...style,
+      ...(style as any),
       top: rect.y,
       left: rect.x,
       width: rect.width,
@@ -312,7 +312,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
     <React.Fragment>
       {/* Leave behind blank spot per-design */}
       {isDragging && (
-        <div draggable {...props} style={{ ...styleProp, visibility: 'hidden' }}>
+        <div draggable {...props} style={{ ...(styleProp as any), visibility: 'hidden' }}>
           {children}
         </div>
       )}
diff --git a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
index d929c19d396..bd74851d213 100644
--- a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
@@ -5,7 +5,7 @@ import { DrawerColorVariant, DrawerContext } from './Drawer';
 import { formatBreakpointMods } from '../../helpers/util';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
-export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement> {
+export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onResize'> {
   /** Additional classes added to the drawer. */
   className?: string;
   /** ID of the drawer panel */
@@ -261,7 +261,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
             className
           )}
           ref={panel}
-          onTransitionEnd={(ev) => {
+          onTransitionEnd={(ev: React.TransitionEventHandler<HTMLDivElement>) => {
             if ((ev.target as HTMLElement) === panel.current) {
               if (!hidden && ev.nativeEvent.propertyName === 'transform') {
                 onExpand(ev);
diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx
index b94c301f017..4481113c66e 100644
--- a/packages/react-core/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx
@@ -52,7 +52,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** Indicates if the menu should be scrollable. */
   isScrollable?: boolean;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -163,7 +163,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   );
 };
 
-export const Dropdown = React.forwardRef((props: DropdownProps, ref: React.Ref<any>) => (
+export const Dropdown = React.forwardRef((props: DropdownProps, ref: React.ForwardedRef<any>) => (
   <DropdownBase innerRef={ref} {...props} />
 ));
 Dropdown.displayName = 'Dropdown';
diff --git a/packages/react-core/src/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/components/Dropdown/DropdownItem.tsx
index d6cf6e127c1..cfdebdc8014 100644
--- a/packages/react-core/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownItem.tsx
@@ -13,7 +13,7 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   /** Classes applied to root element of dropdown item */
   className?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
+  innerRef?: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>;
   /** Description of the dropdown item */
   description?: React.ReactNode;
   /** Render item as disabled option */
@@ -66,7 +66,7 @@ const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
 };
 
 export const DropdownItem = React.forwardRef(
-  (props: DropdownItemProps, ref: React.Ref<HTMLAnchorElement | HTMLButtonElement>) => (
+  (props: DropdownItemProps, ref: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>) => (
     <DropdownItemBase {...props} innerRef={ref} />
   )
 );
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx
index 39bfe859e39..c248df7ee4b 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx
@@ -11,7 +11,7 @@ export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLD
   /** Content to be rendered in the dual list selector control. */
   children?: React.ReactNode;
   /** @hide forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
   /** Flag indicating the control is disabled. */
   isDisabled?: boolean;
   /** Additional classes applied to the dual list selector control. */
@@ -58,7 +58,7 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
 };
 DualListSelectorControlBase.displayName = 'DualListSelectorControlBase';
 
-export const DualListSelectorControl = React.forwardRef((props: DualListSelectorControlProps, ref: React.Ref<any>) => (
+export const DualListSelectorControl = React.forwardRef((props: DualListSelectorControlProps, ref: React.ForwardedRef<any>) => (
   <DualListSelectorControlBase innerRef={ref} {...props} />
 ));
 
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx
index 835879f250a..13cc481ddd2 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx
@@ -11,7 +11,7 @@ export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HT
   /** Additional classes added to the wrapper. */
   className?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.Ref<HTMLDivElement>;
   /** Accessible label for the dual list selector controls wrapper. */
   'aria-label'?: string;
 }
@@ -78,7 +78,7 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
 DualListSelectorControlsWrapperBase.displayName = 'DualListSelectorControlsWrapperBase';
 
 export const DualListSelectorControlsWrapper = React.forwardRef(
-  (props: DualListSelectorControlsWrapperProps, ref: React.Ref<HTMLDivElement>) => (
+  (props: DualListSelectorControlsWrapperProps, ref: React.ForwardedRef<HTMLDivElement>) => (
     <DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} role="group" {...props} />
   )
 );
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx
index e2c3e8433a6..f6406d395e6 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx
@@ -24,7 +24,7 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   /** @hide Internal field used to keep track of order of unfiltered options. */
   orderIndex?: number;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLLIElement>;
+  innerRef?: React.Ref<HTMLLIElement>;
   /** Flag indicating this item is draggable for reordring */
   isDraggable?: boolean;
   /** Accessible label for the draggable button on draggable list items */
@@ -98,7 +98,7 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
 DualListSelectorListItemBase.displayName = 'DualListSelectorListItemBase';
 
 export const DualListSelectorListItem = React.forwardRef(
-  (props: DualListSelectorListItemProps, ref: React.Ref<HTMLLIElement>) => (
+  (props: DualListSelectorListItemProps, ref: React.ForwardedRef<HTMLLIElement>) => (
     <DualListSelectorListItemBase innerRef={ref as React.MutableRefObject<any>} {...props} />
   )
 );
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx
index 642b53b0ed0..7dcf163e9c2 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx
@@ -15,7 +15,7 @@ export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDi
   /** Accessibly label for the list */
   'aria-labelledby': string;
   /** @hide forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.Ref<HTMLDivElement>;
   /** @hide Options to list in the pane. */
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */
@@ -120,7 +120,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
 DualListSelectorListWrapperBase.displayName = 'DualListSelectorListWrapperBase';
 
 export const DualListSelectorListWrapper = React.forwardRef(
-  (props: DualListSelectorListWrapperProps, ref: React.Ref<HTMLDivElement>) => (
+  (props: DualListSelectorListWrapperProps, ref: React.ForwardedRef<HTMLDivElement>) => (
     <DualListSelectorListWrapperBase innerRef={ref as React.MutableRefObject<any>} {...props} />
   )
 );
diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
index e43ffd85908..55da755c0d6 100644
--- a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
+++ b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
@@ -14,7 +14,7 @@ export enum ExpandableSectionVariant {
 
 /** The main expandable section component. */
 
-export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement> {
+export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable section. */
diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
index ebb416aca45..37e907c2c0b 100644
--- a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
+++ b/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
@@ -7,7 +7,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
  * property passed in. Allows for more custom control over the expandable section's toggle.
  */
 
-export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivElement> {
+export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Content rendered inside the expandable toggle. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable toggle. */
diff --git a/packages/react-core/src/components/FileUpload/FileUpload.tsx b/packages/react-core/src/components/FileUpload/FileUpload.tsx
index 47afa1a3d04..840ae7258be 100644
--- a/packages/react-core/src/components/FileUpload/FileUpload.tsx
+++ b/packages/react-core/src/components/FileUpload/FileUpload.tsx
@@ -145,7 +145,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
     ...oldInputProps,
     onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
       oldInputProps.onChange?.(e);
-      const files = await fromEvent(e.nativeEvent);
+      const files = await fromEvent((e as any).nativeEvent);
       if (files.length === 1) {
         onFileInputChange?.(e, files[0] as File);
       }
diff --git a/packages/react-core/src/components/Form/Form.tsx b/packages/react-core/src/components/Form/Form.tsx
index 0043c5c89b9..a66f740bb94 100644
--- a/packages/react-core/src/components/Form/Form.tsx
+++ b/packages/react-core/src/components/Form/Form.tsx
@@ -14,7 +14,7 @@ export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'>
   /** Sets a custom max-width for the form. */
   maxWidth?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
 }
 
 const FormBase: React.FunctionComponent<FormProps> = ({
@@ -31,7 +31,7 @@ const FormBase: React.FunctionComponent<FormProps> = ({
     {...(maxWidth && {
       style: {
         '--pf-v5-c-form--m-limit-width--MaxWidth': maxWidth,
-        ...props.style
+        ...(props as any).style
       } as React.CSSProperties
     })}
     {...props}
@@ -47,6 +47,6 @@ const FormBase: React.FunctionComponent<FormProps> = ({
   </form>
 );
 
-export const Form = React.forwardRef((props: FormProps, ref: React.Ref<any>) => <FormBase innerRef={ref} {...props} />);
+export const Form = React.forwardRef((props: FormProps, ref: React.ForwardedRef<any>) => <FormBase innerRef={ref} {...props} />);
 
 Form.displayName = 'Form';
diff --git a/packages/react-core/src/components/Form/FormFieldGroup.tsx b/packages/react-core/src/components/Form/FormFieldGroup.tsx
index aeaef921c06..886aafd40a1 100644
--- a/packages/react-core/src/components/Form/FormFieldGroup.tsx
+++ b/packages/react-core/src/components/Form/FormFieldGroup.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
 
-export interface FormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+export interface FormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
diff --git a/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx b/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
index 995e1d06e87..2fb8a07e8e9 100644
--- a/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
+++ b/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
 
-export interface FormFieldGroupExpandableProps extends React.HTMLProps<HTMLDivElement> {
+export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx
index ddd9a3e5723..99a8ea15c28 100644
--- a/packages/react-core/src/components/Form/FormGroup.tsx
+++ b/packages/react-core/src/components/Form/FormGroup.tsx
@@ -30,7 +30,7 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   /** Sets the role of the form group. Pass in "radiogroup" when the form group contains multiple
    * radio inputs, or pass in "group" when the form group contains multiple of any other input type.
    */
-  role?: string;
+  role?: React.AriaRole;
 }
 
 export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
diff --git a/packages/react-core/src/components/Form/FormSection.tsx b/packages/react-core/src/components/Form/FormSection.tsx
index ac2fe359a65..7ccd5552918 100644
--- a/packages/react-core/src/components/Form/FormSection.tsx
+++ b/packages/react-core/src/components/Form/FormSection.tsx
@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
-export interface FormSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+export interface FormSectionProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'title'> {
   /** Content rendered inside the section */
   children?: React.ReactNode;
   /** Additional classes added to the section */
diff --git a/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx b/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
index 36a412f93ea..1f469b0e8ec 100644
--- a/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
+++ b/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
 import { GenerateId } from '../../helpers';
 
-export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
diff --git a/packages/react-core/src/components/FormControl/FormControlIcon.tsx b/packages/react-core/src/components/FormControl/FormControlIcon.tsx
index 5275ab01d53..d477bb47a74 100644
--- a/packages/react-core/src/components/FormControl/FormControlIcon.tsx
+++ b/packages/react-core/src/components/FormControl/FormControlIcon.tsx
@@ -11,7 +11,7 @@ export const statusIcons = {
   warning: ExclamationTriangleIcon
 };
 
-export interface FormControlIconProps extends React.HTMLProps<HTMLDivElement> {
+export interface FormControlIconProps extends React.HTMLProps<HTMLSpanElement> {
   /** Additional class names added to the text input icon wrapper. */
   className?: string;
   /** A custom icon to render instead of a status icon. */
diff --git a/packages/react-core/src/components/InputGroup/InputGroup.tsx b/packages/react-core/src/components/InputGroup/InputGroup.tsx
index 55cc6d90c29..57d9f7b6e2f 100644
--- a/packages/react-core/src/components/InputGroup/InputGroup.tsx
+++ b/packages/react-core/src/components/InputGroup/InputGroup.tsx
@@ -11,7 +11,7 @@ export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the input group. */
   children: React.ReactNode;
   /** @hide A reference object to attach to the input box */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
 }
 
 export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
@@ -80,7 +80,7 @@ export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
 };
 InputGroupBase.displayName = 'InputGroupBase';
 
-export const InputGroup = React.forwardRef((props: InputGroupProps, ref: React.Ref<HTMLDivElement>) => (
+export const InputGroup = React.forwardRef((props: InputGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => (
   <InputGroupBase innerRef={ref} {...props} />
 ));
 InputGroup.displayName = 'InputGroup';
diff --git a/packages/react-core/src/components/Label/LabelGroup.tsx b/packages/react-core/src/components/Label/LabelGroup.tsx
index 476e0946e47..e0bdf1c2d1b 100644
--- a/packages/react-core/src/components/Label/LabelGroup.tsx
+++ b/packages/react-core/src/components/Label/LabelGroup.tsx
@@ -232,7 +232,7 @@ class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState> {
     };
 
     return numChildren === 0 && addLabelControl === undefined ? null : (
-      <GenerateId>{(randomId) => renderLabelGroup(this.props.id || randomId)}</GenerateId>
+      <GenerateId>{(randomId) => renderLabelGroup((this.props.id || randomId) as string)}</GenerateId>
     );
   }
 }
diff --git a/packages/react-core/src/components/List/List.tsx b/packages/react-core/src/components/List/List.tsx
index 1dbea7d550a..f6062f4a4d0 100644
--- a/packages/react-core/src/components/List/List.tsx
+++ b/packages/react-core/src/components/List/List.tsx
@@ -54,7 +54,7 @@ export const List: React.FunctionComponent<ListProps> = ({
 }: ListProps) =>
   component === ListComponent.ol ? (
     <ol
-      ref={ref as React.LegacyRef<HTMLOListElement>}
+      ref={ref as React.Ref<HTMLOListElement>}
       type={type}
       {...(isPlain && { role: 'list' })}
       {...props}
@@ -71,7 +71,7 @@ export const List: React.FunctionComponent<ListProps> = ({
     </ol>
   ) : (
     <ul
-      ref={ref as React.LegacyRef<HTMLUListElement>}
+      ref={ref as React.Ref<HTMLUListElement>}
       {...(isPlain && { role: 'list' })}
       {...props}
       className={css(
diff --git a/packages/react-core/src/components/LoginPage/LoginHeader.tsx b/packages/react-core/src/components/LoginPage/LoginHeader.tsx
index 9d94a48c350..7922ee11f33 100644
--- a/packages/react-core/src/components/LoginPage/LoginHeader.tsx
+++ b/packages/react-core/src/components/LoginPage/LoginHeader.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Login/login';
 import { css } from '@patternfly/react-styles';
 
-export interface LoginHeaderProps extends React.HTMLProps<HTMLDivElement> {
+export interface LoginHeaderProps extends React.HTMLProps<HTMLElement> {
   /** Content rendered inside the header of the login layout */
   children?: React.ReactNode;
   /** Additional classes added to the login header */
diff --git a/packages/react-core/src/components/LoginPage/LoginMainHeader.tsx b/packages/react-core/src/components/LoginPage/LoginMainHeader.tsx
index 2b9552e9db3..f5a52039cb4 100644
--- a/packages/react-core/src/components/LoginPage/LoginMainHeader.tsx
+++ b/packages/react-core/src/components/LoginPage/LoginMainHeader.tsx
@@ -3,7 +3,7 @@ import { Title, TitleSizes } from '../Title';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Login/login';
 
-export interface LoginMainHeaderProps extends React.HTMLProps<HTMLDivElement> {
+export interface LoginMainHeaderProps extends React.HTMLProps<HTMLElement> {
   /** Content rendered inside the login main header */
   children?: React.ReactNode;
   /** Additional classes added to the login main header */
diff --git a/packages/react-core/src/components/Masthead/Masthead.tsx b/packages/react-core/src/components/Masthead/Masthead.tsx
index 897f7e2f0c5..f1bd6c0d957 100644
--- a/packages/react-core/src/components/Masthead/Masthead.tsx
+++ b/packages/react-core/src/components/Masthead/Masthead.tsx
@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
 import { PageContext } from '../Page/PageContext';
 
-export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
+export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLElement>, HTMLElement> {
   /** Content rendered inside of the masthead */
   children?: React.ReactNode;
   /** Additional classes added to the masthead */
diff --git a/packages/react-core/src/components/Masthead/MastheadToggle.tsx b/packages/react-core/src/components/Masthead/MastheadToggle.tsx
index 2f2c36b10d0..241593dc420 100644
--- a/packages/react-core/src/components/Masthead/MastheadToggle.tsx
+++ b/packages/react-core/src/components/Masthead/MastheadToggle.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import { css } from '@patternfly/react-styles';
 
-export interface MastheadToggleProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
+export interface MastheadToggleProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLSpanElement>, HTMLSpanElement> {
   /** Content rendered inside of the masthead toggle. */
   children?: React.ReactNode;
   /** Additional classes added to the masthead toggle. */
diff --git a/packages/react-core/src/components/Menu/DrilldownMenu.tsx b/packages/react-core/src/components/Menu/DrilldownMenu.tsx
index e12dddad4a0..838b60028e8 100644
--- a/packages/react-core/src/components/Menu/DrilldownMenu.tsx
+++ b/packages/react-core/src/components/Menu/DrilldownMenu.tsx
@@ -4,7 +4,7 @@ import { MenuContent } from './MenuContent';
 import { MenuList } from './MenuList';
 import { MenuContext } from './MenuContext';
 
-export interface DrilldownMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'ref' | 'onSelect'> {
+export interface DrilldownMenuProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'onSelect' | 'id' | 'className'> {
   /** Items within drilldown sub-menu */
   children?: React.ReactNode;
   /** ID of the drilldown sub-menu */
@@ -26,7 +26,7 @@ export const DrilldownMenu: React.FunctionComponent<DrilldownMenuProps> = ({
   <MenuContext.Consumer>
     {({ menuId, parentMenu, flyoutRef, setFlyoutRef, disableHover, ...context }) => (
       <Menu
-        id={id}
+        id={id as any}
         parentMenu={menuId}
         isMenuDrilledIn={isMenuDrilledIn}
         isRootMenu={false}
diff --git a/packages/react-core/src/components/Menu/Menu.tsx b/packages/react-core/src/components/Menu/Menu.tsx
index fb6b91c9e00..1f746d92fa6 100644
--- a/packages/react-core/src/components/Menu/Menu.tsx
+++ b/packages/react-core/src/components/Menu/Menu.tsx
@@ -5,7 +5,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 import { MenuContext } from './MenuContext';
 import { canUseDOM } from '../../helpers/util';
 import { KeyboardHandler } from '../../helpers';
-export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'ref' | 'onSelect'>, OUIAProps {
+export interface MenuProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'onSelect' | 'id' | 'className'>, OUIAProps {
   /** Anything that can be rendered inside of the Menu */
   children?: React.ReactNode;
   /** Additional classes added to the Menu */
@@ -48,7 +48,7 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   /** @beta itemId of the currently active item. You can also specify isActive on the MenuItem. */
   activeItemId?: string | number;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<HTMLDivElement>;
+  innerRef?: React.ForwardedRef<HTMLDivElement>;
   /** Internal flag indicating if the Menu is the root of a menu tree */
   isRootMenu?: boolean;
   /** Indicates if the menu should be without the outer box-shadow */
@@ -61,7 +61,7 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   ouiaSafe?: boolean;
   /** @beta Determines the accessible role of the menu. For a non-checkbox menu that can have
    * one or more items selected, pass in "listbox". */
-  role?: string;
+  role?: React.AriaRole;
 }
 
 export interface MenuState {
@@ -75,7 +75,7 @@ export interface MenuState {
 class MenuBase extends React.Component<MenuProps, MenuState> {
   static displayName = 'Menu';
   static contextType = MenuContext;
-  context!: React.ContextType<typeof MenuContext>;
+  declare context: React.ContextType<typeof MenuContext>;
   private menuRef = React.createRef<HTMLDivElement>();
   private activeMenu = null as Element;
   static defaultProps: MenuProps = {
@@ -338,7 +338,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
   }
 }
 
-export const Menu = React.forwardRef((props: MenuProps, ref: React.Ref<HTMLDivElement>) => (
+export const Menu = React.forwardRef((props: MenuProps, ref: React.ForwardedRef<HTMLDivElement>) => (
   <MenuBase {...props} innerRef={ref} />
 ));
 Menu.displayName = 'Menu';
diff --git a/packages/react-core/src/components/Menu/MenuContent.tsx b/packages/react-core/src/components/Menu/MenuContent.tsx
index be8f906d140..06b3c62bf27 100644
--- a/packages/react-core/src/components/Menu/MenuContent.tsx
+++ b/packages/react-core/src/components/Menu/MenuContent.tsx
@@ -16,7 +16,7 @@ export interface MenuContentProps extends React.HTMLProps<HTMLElement> {
   getHeight?: (height: string) => void;
 }
 
-export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React.Ref<HTMLDivElement>) => {
+export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React.ForwardedRef<HTMLDivElement>) => {
   const { getHeight, children, menuHeight, maxMenuHeight, ...rest } = props;
   const menuContentRef = React.createRef<HTMLDivElement>();
   const refCallback = (el: HTMLElement, menuId: string, onGetMenuHeight: (menuId: string, height: number) => void) => {
diff --git a/packages/react-core/src/components/Menu/MenuGroup.tsx b/packages/react-core/src/components/Menu/MenuGroup.tsx
index 91e235f087a..25edfa33ff4 100644
--- a/packages/react-core/src/components/Menu/MenuGroup.tsx
+++ b/packages/react-core/src/components/Menu/MenuGroup.tsx
@@ -12,7 +12,7 @@ export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   /** ID for title label */
   titleId?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
   /** Group label heading level. Default is h1. */
   labelHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
@@ -26,10 +26,10 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   labelHeadingLevel: HeadingLevel = 'h1',
   ...props
 }: MenuGroupProps) => {
-  const Wrapper = typeof label === 'function' ? label : HeadingLevel;
+  const Wrapper = label;
   return (
     <section {...props} className={css(styles.menuGroup, className)} ref={innerRef}>
-      <>
+      {/* <>
         {['function', 'string'].includes(typeof label) ? (
           <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
             {label}
@@ -38,12 +38,23 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
           label
         )}
         {children}
+      </> */}
+      <>
+        {['function', 'string'].includes(typeof label) ? typeof label === 'function' ? (<label className={css(styles.menuGroupTitle)} id={titleId}>
+            {label}
+          </label>) : React.createElement(HeadingLevel, {
+          className: css(styles.menuGroupTitle),
+          id: titleId
+        }, label) : (
+          label
+        )}
+        {children}
       </>
     </section>
   );
 };
 
-export const MenuGroup = React.forwardRef((props: MenuGroupProps, ref: React.Ref<HTMLElement>) => (
+export const MenuGroup = React.forwardRef((props: MenuGroupProps, ref: React.ForwardedRef<HTMLElement>) => (
   <MenuGroupBase {...props} innerRef={ref} />
 ));
 MenuGroup.displayName = 'MenuGroup';
diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx
index c3deae335bf..e7a615ca872 100644
--- a/packages/react-core/src/components/Menu/MenuItem.tsx
+++ b/packages/react-core/src/components/Menu/MenuItem.tsx
@@ -78,7 +78,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   /** Adds an accessible name to the menu item. */
   'aria-label'?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
+  innerRef?: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>;
   /** Sets the id attribute on the menu item component. */
   id?: string;
 }
@@ -457,7 +457,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   );
 };
 
-export const MenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<any>) => (
+export const MenuItem = React.forwardRef((props: MenuItemProps, ref: React.ForwardedRef<any>) => (
   <MenuItemBase {...props} innerRef={ref} />
 ));
 
diff --git a/packages/react-core/src/components/Menu/MenuItemAction.tsx b/packages/react-core/src/components/Menu/MenuItemAction.tsx
index 2117f0583a9..cda36a93639 100644
--- a/packages/react-core/src/components/Menu/MenuItemAction.tsx
+++ b/packages/react-core/src/components/Menu/MenuItemAction.tsx
@@ -20,7 +20,7 @@ export interface MenuItemActionProps extends Omit<React.HTMLProps<HTMLButtonElem
   /** Identifies the action item in the onActionClick on the Menu */
   actionId?: any;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
 }
 
 const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
@@ -70,7 +70,7 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
   </MenuContext.Consumer>
 );
 
-export const MenuItemAction = React.forwardRef((props: MenuItemActionProps, ref: React.Ref<HTMLButtonElement>) => (
+export const MenuItemAction = React.forwardRef((props: MenuItemActionProps, ref: React.ForwardedRef<HTMLButtonElement>) => (
   <MenuItemActionBase {...props} innerRef={ref} />
 ));
 MenuItemAction.displayName = 'MenuItemAction';
diff --git a/packages/react-core/src/components/Menu/MenuSearch.tsx b/packages/react-core/src/components/Menu/MenuSearch.tsx
index 4ab12f76108..99a46bba45a 100644
--- a/packages/react-core/src/components/Menu/MenuSearch.tsx
+++ b/packages/react-core/src/components/Menu/MenuSearch.tsx
@@ -9,7 +9,7 @@ export interface MenuSearchProps extends React.HTMLProps<HTMLElement> {
   innerRef?: React.Ref<any>;
 }
 
-export const MenuSearch = React.forwardRef((props: MenuSearchProps, ref: React.Ref<HTMLDivElement>) => (
+export const MenuSearch = React.forwardRef((props: MenuSearchProps, ref: React.ForwardedRef<HTMLDivElement>) => (
   <div {...props} className={css(styles.menuSearch, props.className)} ref={ref} />
 ));
 MenuSearch.displayName = 'MenuSearch';
diff --git a/packages/react-core/src/components/Menu/MenuSearchInput.tsx b/packages/react-core/src/components/Menu/MenuSearchInput.tsx
index 83840594e28..1cc2c8cf95b 100644
--- a/packages/react-core/src/components/Menu/MenuSearchInput.tsx
+++ b/packages/react-core/src/components/Menu/MenuSearchInput.tsx
@@ -8,7 +8,7 @@ export interface MenuSearchInputProps extends React.HTMLProps<HTMLElement> {
   innerRef?: React.Ref<any>;
 }
 
-export const MenuSearchInput = React.forwardRef((props: MenuSearchInputProps, ref: React.Ref<HTMLDivElement>) => (
+export const MenuSearchInput = React.forwardRef((props: MenuSearchInputProps, ref: React.ForwardedRef<HTMLDivElement>) => (
   // Update to use the styles object when core adds the class
   <div {...props} className={css('pf-v5-c-menu__search-input', props.className)} ref={ref} />
 ));
diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
index d9ebb9913d9..494784f2ca4 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -14,12 +14,8 @@ export interface SplitButtonOptions {
 }
 
 export interface MenuToggleProps
-  extends Omit<
-    React.DetailedHTMLProps<
-      React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
-      MenuToggleElement
-    >,
-    'ref'
+  extends Omit<React.HTMLProps<MenuToggleElement>,
+    'ref' | 'icon'
   > {
   /** Content rendered inside the toggle */
   children?: React.ReactNode;
@@ -44,7 +40,7 @@ export interface MenuToggleProps
   /** Optional badge rendered inside the toggle, after the children content */
   badge?: BadgeProps | React.ReactNode;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<MenuToggleElement>;
+  innerRef?: React.ForwardedRef<MenuToggleElement>;
 }
 
 class MenuToggleBase extends React.Component<MenuToggleProps> {
@@ -176,7 +172,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
   }
 }
 
-export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.Ref<MenuToggleElement>) => (
+export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.ForwardedRef<MenuToggleElement>) => (
   <MenuToggleBase innerRef={ref} {...props} />
 ));
 
diff --git a/packages/react-core/src/components/Nav/Nav.tsx b/packages/react-core/src/components/Nav/Nav.tsx
index 6fe6eb9ca73..3758b705c2f 100644
--- a/packages/react-core/src/components/Nav/Nav.tsx
+++ b/packages/react-core/src/components/Nav/Nav.tsx
@@ -10,7 +10,7 @@ export type NavSelectClickHandler = (
   to: string
 ) => void;
 export interface NavProps
-  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect'>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'onSelect' | 'onToggle'>,
     OUIAProps {
   /** Anything that can be rendered inside of the nav */
   children?: React.ReactNode;
diff --git a/packages/react-core/src/components/Nav/NavExpandable.tsx b/packages/react-core/src/components/Nav/NavExpandable.tsx
index d69327115b4..26c36511435 100644
--- a/packages/react-core/src/components/Nav/NavExpandable.tsx
+++ b/packages/react-core/src/components/Nav/NavExpandable.tsx
@@ -9,7 +9,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface NavExpandableProps
-  extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>,
+  extends React.HTMLProps<HTMLLIElement>,
     OUIAProps {
   /** Title shown for the expandable list */
   title: string;
diff --git a/packages/react-core/src/components/Nav/NavGroup.tsx b/packages/react-core/src/components/Nav/NavGroup.tsx
index af6601fa80c..b267eb6de05 100644
--- a/packages/react-core/src/components/Nav/NavGroup.tsx
+++ b/packages/react-core/src/components/Nav/NavGroup.tsx
@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import { getUniqueId } from '../../helpers/util';
 
-export interface NavGroupProps extends React.HTMLProps<HTMLDivElement> {
+export interface NavGroupProps extends React.HTMLProps<HTMLElement> {
   /** Title shown for the group */
   title?: string;
   /** Anything that can be rendered inside of the group */
diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
index acb8de5776e..7c25dc1bd2d 100644
--- a/packages/react-core/src/components/Nav/NavList.tsx
+++ b/packages/react-core/src/components/Nav/NavList.tsx
@@ -23,7 +23,7 @@ export interface NavListProps
 class NavList extends React.Component<NavListProps> {
   static displayName = 'NavList';
   static contextType = NavContext;
-  context!: React.ContextType<typeof NavContext>;
+  declare context: React.ContextType<typeof NavContext>;
   static defaultProps: NavListProps = {
     ariaLeftScroll: 'Scroll left',
     ariaRightScroll: 'Scroll right'
diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawer.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawer.tsx
index 3d126b2888d..7f9ae9063fc 100644
--- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawer.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawer.tsx
@@ -9,7 +9,7 @@ export interface NotificationDrawerProps extends React.HTMLProps<HTMLDivElement>
   /**  Additional classes added to the notification drawer */
   className?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
 }
 
 const NotificationDrawerBase: React.FunctionComponent<NotificationDrawerProps> = ({
@@ -22,7 +22,7 @@ const NotificationDrawerBase: React.FunctionComponent<NotificationDrawerProps> =
     {children}
   </div>
 );
-export const NotificationDrawer = React.forwardRef((props: NotificationDrawerProps, ref: React.Ref<any>) => (
+export const NotificationDrawer = React.forwardRef((props: NotificationDrawerProps, ref: React.ForwardedRef<any>) => (
   <NotificationDrawerBase innerRef={ref} {...props} />
 ));
 NotificationDrawer.displayName = 'NotificationDrawer';
diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx
index a08f53209f3..08ca755ff34 100644
--- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx
@@ -8,7 +8,7 @@ import maxLines from '@patternfly/react-tokens/dist/esm/c_notification_drawer__g
 import { Badge } from '../Badge';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 
-export interface NotificationDrawerGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+export interface NotificationDrawerGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'title'> {
   /**  Content rendered inside the group */
   children?: React.ReactNode;
   /**  Additional classes added to the group */
diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx
index 2e5143b0fd2..ca46eda8c1c 100644
--- a/packages/react-core/src/components/NumberInput/NumberInput.tsx
+++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx
@@ -109,7 +109,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
       {...(widthChars && {
         style: {
           '--pf-v5-c-number-input--c-form-control--width-chars': widthChars,
-          ...props.style
+          ...(props as any).style
         } as React.CSSProperties
       })}
       {...props}
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index dc1bead60ee..ad39230b868 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -34,7 +34,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   /** Skip to content component for the page */
   skipToContent?: React.ReactElement;
   /** Sets the value for role on the <main> element */
-  role?: string;
+  role?: React.AriaRole;
   /** an id to use for the [role="main"] element */
   mainContainerId?: string;
   /** tabIndex to use for the [role="main"] element, null to unset it */
diff --git a/packages/react-core/src/components/Panel/Panel.tsx b/packages/react-core/src/components/Panel/Panel.tsx
index 77d7e0df4c8..9130a281da4 100644
--- a/packages/react-core/src/components/Panel/Panel.tsx
+++ b/packages/react-core/src/components/Panel/Panel.tsx
@@ -12,7 +12,7 @@ export interface PanelProps extends React.HTMLProps<HTMLDivElement> {
   /** Flag to add scrollable styling to the panel */
   isScrollable?: boolean;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
 }
 
 const PanelBase: React.FunctionComponent<PanelProps> = ({
@@ -38,7 +38,7 @@ const PanelBase: React.FunctionComponent<PanelProps> = ({
   </div>
 );
 
-export const Panel = React.forwardRef((props: PanelProps, ref: React.Ref<any>) => (
+export const Panel = React.forwardRef((props: PanelProps, ref: React.ForwardedRef<any>) => (
   <PanelBase innerRef={ref} {...props} />
 ));
 Panel.displayName = 'Panel';
diff --git a/packages/react-core/src/components/Popover/PopoverFooter.tsx b/packages/react-core/src/components/Popover/PopoverFooter.tsx
index 8643cbe5587..3e2012fbfd3 100644
--- a/packages/react-core/src/components/Popover/PopoverFooter.tsx
+++ b/packages/react-core/src/components/Popover/PopoverFooter.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { css } from '@patternfly/react-styles';
 
-export interface PopoverFooterProps extends React.HTMLProps<HTMLDivElement> {
+export interface PopoverFooterProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes added to the Popover footer */
   className?: string;
   /** Footer node */
diff --git a/packages/react-core/src/components/Popover/PopoverHeader.tsx b/packages/react-core/src/components/Popover/PopoverHeader.tsx
index 45ba779149b..d3d55291445 100644
--- a/packages/react-core/src/components/Popover/PopoverHeader.tsx
+++ b/packages/react-core/src/components/Popover/PopoverHeader.tsx
@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { PopoverHeaderIcon } from './PopoverHeaderIcon';
 import { PopoverHeaderText } from './PopoverHeaderText';
 
-export interface PopoverHeaderProps extends Omit<React.HTMLProps<HTMLHeadingElement>, 'size'> {
+export interface PopoverHeaderProps extends Omit<React.HTMLProps<HTMLElement>, 'size'> {
   /** Content of the popover header. */
   children: React.ReactNode;
   /** Indicates the header contains an icon. */
diff --git a/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx b/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx
index 0bc63dc449a..55e68e2726f 100644
--- a/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx
+++ b/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx
@@ -15,8 +15,7 @@ export enum ProgressStepVariant {
   warning = 'warning'
 }
 
-export interface ProgressStepProps
-  extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
+export interface ProgressStepProps extends Omit<React.HTMLProps<HTMLLIElement>, 'icon'> {
   /** Content rendered inside the progress step. */
   children?: React.ReactNode;
   /** Additional classes applied to the progress step container. */
diff --git a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx b/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx
index f8d927619ce..f55b91ed315 100644
--- a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx
+++ b/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx
@@ -7,7 +7,7 @@ import { SearchInputSearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
 
-export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onSearch'> {
   /** Delimiter in the query string for pairing attributes with search values.
    * Required whenever attributes are passed as props.
    */
diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx
index 1381199ee68..1410ad4aa37 100644
--- a/packages/react-core/src/components/SearchInput/SearchInput.tsx
+++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx
@@ -43,7 +43,7 @@ export interface SearchInputExpandable {
 
 /** The main search input component. */
 
-export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'results' | 'ref'> {
+export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'results' | 'ref' | 'onSearch'> {
   /** Delimiter in the query string for pairing attributes with search values.
    * Required whenever attributes are passed as props.
    */
@@ -71,7 +71,7 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** A suggestion for autocompleting. */
   hint?: string;
   /** @hide A reference object to attach to the input box. */
-  innerRef?: React.RefObject<any>;
+  innerRef?: React.Ref<any>;
   /** A flag for controlling the open state of a custom advanced search implementation. */
   isAdvancedSearchOpen?: boolean;
   /** Flag indicating if search input is disabled. */
@@ -459,7 +459,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 };
 SearchInputBase.displayName = 'SearchInputBase';
 
-export const SearchInput = React.forwardRef((props: SearchInputProps, ref: React.Ref<HTMLInputElement>) => (
+export const SearchInput = React.forwardRef((props: SearchInputProps, ref: React.ForwardedRef<HTMLInputElement>) => (
   <SearchInputBase {...props} innerRef={ref as React.MutableRefObject<any>} />
 ));
 SearchInput.displayName = 'SearchInput';
diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx
index d3f71d5862f..bf3e012e681 100644
--- a/packages/react-core/src/components/Select/Select.tsx
+++ b/packages/react-core/src/components/Select/Select.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaRole } from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
 import { Popper } from '../../helpers/Popper/Popper';
@@ -53,11 +53,11 @@ export interface SelectProps extends MenuProps, OUIAProps {
   /** Indicates if the select should be without the outer box-shadow */
   isPlain?: boolean;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<HTMLDivElement>;
+  innerRef?: React.ForwardedRef<HTMLDivElement>;
   /** z-index of the select menu */
   zIndex?: number;
   /** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */
-  role?: string;
+  role?: AriaRole;
   /** Additional properties to pass to the popper */
   popperProps?: SelectPopperProps;
 }
@@ -75,7 +75,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   isPlain,
   innerRef,
   zIndex = 9999,
-  role = 'listbox',
+  role = 'listbox' as AriaRole,
   popperProps,
   ...props
 }: SelectProps & OUIAProps) => {
@@ -164,7 +164,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   );
 };
 
-export const Select = React.forwardRef((props: SelectProps, ref: React.Ref<any>) => (
+export const Select = React.forwardRef((props: SelectProps, ref: React.ForwardedRef<any>) => (
   <SelectBase innerRef={ref} {...props} />
 ));
 
diff --git a/packages/react-core/src/components/Select/SelectOption.tsx b/packages/react-core/src/components/Select/SelectOption.tsx
index ba050908dd2..37a7bb32be5 100644
--- a/packages/react-core/src/components/Select/SelectOption.tsx
+++ b/packages/react-core/src/components/Select/SelectOption.tsx
@@ -12,7 +12,7 @@ export interface SelectOptionProps extends Omit<MenuItemProps, 'ref'> {
   /** Classes applied to root element of select option */
   className?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
+  innerRef?: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>;
   /** Identifies the component in the Select onSelect callback */
   value?: any;
   /** Indicates the option has a checkbox */
@@ -45,7 +45,7 @@ const SelectOptionBase: React.FunctionComponent<MenuItemProps> = ({
   </MenuItem>
 );
 
-export const SelectOption = React.forwardRef((props: SelectOptionProps, ref: React.Ref<any>) => (
+export const SelectOption = React.forwardRef((props: SelectOptionProps, ref: React.ForwardedRef<any>) => (
   <SelectOptionBase {...props} innerRef={ref} />
 ));
 
diff --git a/packages/react-core/src/components/SimpleList/SimpleListGroup.tsx b/packages/react-core/src/components/SimpleList/SimpleListGroup.tsx
index 8f85f302291..13473e4e392 100644
--- a/packages/react-core/src/components/SimpleList/SimpleListGroup.tsx
+++ b/packages/react-core/src/components/SimpleList/SimpleListGroup.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/SimpleList/simple-list';
 
-export interface SimpleListGroupProps extends Omit<React.HTMLProps<HTMLTableSectionElement>, 'title'> {
+export interface SimpleListGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'title'> {
   /** Content rendered inside the SimpleList group */
   children?: React.ReactNode;
   /** Additional classes added to the SimpleList <ul> */
diff --git a/packages/react-core/src/components/Skeleton/Skeleton.tsx b/packages/react-core/src/components/Skeleton/Skeleton.tsx
index 5bbd6677808..5c5d9e44a13 100644
--- a/packages/react-core/src/components/Skeleton/Skeleton.tsx
+++ b/packages/react-core/src/components/Skeleton/Skeleton.tsx
@@ -44,7 +44,7 @@ export const Skeleton: React.FunctionComponent<SkeletonProps> = ({
         style: {
           '--pf-v5-c-skeleton--Width': width ? width : undefined,
           '--pf-v5-c-skeleton--Height': height ? height : undefined,
-          ...props.style
+          ...(props as any).style
         } as React.CSSProperties
       })}
     >
diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index a889032e3a3..e222bd3f878 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/packages/react-core/src/components/Slider/Slider.tsx
@@ -391,7 +391,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   return (
     <div
       className={css(styles.slider, className, isDisabled && styles.modifiers.disabled)}
-      style={{ ...style, ...inputStyle }}
+      style={{ ...(style as any), ...inputStyle }}
       {...props}
     >
       {leftActions && <div className={css(styles.sliderActions)}>{leftActions}</div>}
diff --git a/packages/react-core/src/components/Spinner/Spinner.tsx b/packages/react-core/src/components/Spinner/Spinner.tsx
index cd4953c974d..f1a31b5765a 100644
--- a/packages/react-core/src/components/Spinner/Spinner.tsx
+++ b/packages/react-core/src/components/Spinner/Spinner.tsx
@@ -9,7 +9,7 @@ export enum spinnerSize {
   xl = 'xl'
 }
 
-export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+export interface SpinnerProps extends Omit<React.SVGProps<SVGSVGElement>, 'size'> {
   /** Additional classes added to the Spinner. */
   className?: string;
   /** Size variant of progress. */
diff --git a/packages/react-core/src/components/Switch/Switch.tsx b/packages/react-core/src/components/Switch/Switch.tsx
index c428080babf..b768307974c 100644
--- a/packages/react-core/src/components/Switch/Switch.tsx
+++ b/packages/react-core/src/components/Switch/Switch.tsx
@@ -94,7 +94,7 @@ class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: str
           id={this.id}
           className={css(styles.switchInput)}
           type="checkbox"
-          onChange={(event) => onChange(event, event.target.checked)}
+          onChange={(event) => onChange(event, (event.target as HTMLInputElement).checked)}
           {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
           disabled={isDisabled}
           aria-labelledby={!isAriaLabelledBy ? null : `${this.id}-${isChecked !== true ? 'off' : 'on'}`}
diff --git a/packages/react-core/src/components/Tabs/Tab.tsx b/packages/react-core/src/components/Tabs/Tab.tsx
index 6712520f44d..928ef9a93c6 100644
--- a/packages/react-core/src/components/Tabs/Tab.tsx
+++ b/packages/react-core/src/components/Tabs/Tab.tsx
@@ -34,7 +34,7 @@ export interface TabProps
   /** Events to prevent when the button is in an aria-disabled state */
   inoperableEvents?: string[];
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
   /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
   tooltip?: React.ReactElement<any>;
   /** Aria-label for the close button added by passing the onClose property to Tabs. */
@@ -142,5 +142,5 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   );
 };
 
-export const Tab = React.forwardRef((props: TabProps, ref: React.Ref<any>) => <TabBase innerRef={ref} {...props} />);
+export const Tab = React.forwardRef((props: TabProps, ref: React.ForwardedRef<any>) => <TabBase innerRef={ref} {...props} />);
 Tab.displayName = 'Tab';
diff --git a/packages/react-core/src/components/Tabs/TabAction.tsx b/packages/react-core/src/components/Tabs/TabAction.tsx
index 2806767bd89..4e67ca89596 100644
--- a/packages/react-core/src/components/Tabs/TabAction.tsx
+++ b/packages/react-core/src/components/Tabs/TabAction.tsx
@@ -16,7 +16,7 @@ export interface TabActionProps extends Omit<React.HTMLProps<HTMLButtonElement>,
   /** Accessible label for the tab action */
   'aria-label'?: string;
   /** @hide Callback for the section ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
 }
 
 const TabActionBase: React.FunctionComponent<TabActionProps> = ({
@@ -47,7 +47,7 @@ const TabActionBase: React.FunctionComponent<TabActionProps> = ({
   </span>
 );
 
-export const TabAction = React.forwardRef((props: TabActionProps, ref: React.Ref<HTMLElement>) => (
+export const TabAction = React.forwardRef((props: TabActionProps, ref: React.ForwardedRef<HTMLElement>) => (
   <TabActionBase {...props} innerRef={ref} />
 ));
 
diff --git a/packages/react-core/src/components/Tabs/TabContent.tsx b/packages/react-core/src/components/Tabs/TabContent.tsx
index 53d479d8b24..2712be8486a 100644
--- a/packages/react-core/src/components/Tabs/TabContent.tsx
+++ b/packages/react-core/src/components/Tabs/TabContent.tsx
@@ -16,7 +16,7 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
   /** uniquely identifies the controlling Tab if used outside Tabs component */
   eventKey?: number | string;
   /** @hide Callback for the section ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
   /** id passed from parent to identify the content section */
   id: string;
   /** title of controlling Tab if used outside Tabs component */
@@ -82,6 +82,6 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   return null;
 };
 
-export const TabContent = React.forwardRef((props: TabContentProps, ref: React.Ref<HTMLElement>) => (
+export const TabContent = React.forwardRef((props: TabContentProps, ref: React.ForwardedRef<HTMLElement>) => (
   <TabContentBase {...props} innerRef={ref} />
 ));
diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx
index 5781894ac37..81638921b7f 100644
--- a/packages/react-core/src/components/Tabs/Tabs.tsx
+++ b/packages/react-core/src/components/Tabs/Tabs.tsx
@@ -32,7 +32,7 @@ export interface HorizontalOverflowObject {
 type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabProps>>;
 type TabsChild = TabElement | boolean | null | undefined;
 
-export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'>, OUIAProps {
+export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle' | 'onClose'>, OUIAProps {
   /** Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here. */
   children: TabsChild | TabsChild[];
   /** Additional classes added to the tabs */
diff --git a/packages/react-core/src/components/TextArea/TextArea.tsx b/packages/react-core/src/components/TextArea/TextArea.tsx
index 0c870cf743d..d3e50ad7404 100644
--- a/packages/react-core/src/components/TextArea/TextArea.tsx
+++ b/packages/react-core/src/components/TextArea/TextArea.tsx
@@ -45,7 +45,7 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   /** Custom flag to show that the text area requires an associated id or aria-label. */
   'aria-label'?: string;
   /** @hide A reference object to attach to the text area. */
-  innerRef?: React.RefObject<any>;
+  innerRef?: React.Ref<any>;
 }
 
 class TextAreaBase extends React.Component<TextAreaProps> {
@@ -162,7 +162,7 @@ class TextAreaBase extends React.Component<TextAreaProps> {
   }
 }
 
-export const TextArea = React.forwardRef((props: TextAreaProps, ref: React.Ref<HTMLTextAreaElement>) => (
+export const TextArea = React.forwardRef((props: TextAreaProps, ref: React.ForwardedRef<HTMLTextAreaElement>) => (
   <TextAreaBase {...props} innerRef={ref as React.MutableRefObject<any>} />
 ));
 TextArea.displayName = 'TextArea';
diff --git a/packages/react-core/src/components/TextInput/TextInput.tsx b/packages/react-core/src/components/TextInput/TextInput.tsx
index a78f6bd2801..0a02aff3211 100644
--- a/packages/react-core/src/components/TextInput/TextInput.tsx
+++ b/packages/react-core/src/components/TextInput/TextInput.tsx
@@ -66,7 +66,7 @@ export interface TextInputProps
   /** Aria-label. The text input requires an associated id or aria-label. */
   'aria-label'?: string;
   /** @hide A reference object to attach to the text input box. */
-  innerRef?: React.RefObject<any>;
+  innerRef?: React.Ref<any>;
   /** Trim text on left */
   isLeftTruncated?: boolean;
   /** Callback function when text input is focused */
@@ -232,7 +232,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     typeof value === 'string' ? value.replace(/\n/g, ' ') : value;
 }
 
-export const TextInput = React.forwardRef((props: TextInputProps, ref: React.Ref<HTMLInputElement>) => (
+export const TextInput = React.forwardRef((props: TextInputProps, ref: React.ForwardedRef<HTMLInputElement>) => (
   <TextInputBase {...props} innerRef={ref as React.MutableRefObject<any>} />
 ));
 TextInput.displayName = 'TextInput';
diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx
index 1df27886894..cf286f600ef 100644
--- a/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx
+++ b/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx
@@ -12,7 +12,7 @@ export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Flag to indicate the toggle has no border or background */
   isPlain?: boolean;
   /** @hide A reference object to attach to the input box */
-  innerRef?: React.RefObject<any>;
+  innerRef?: React.Ref<any>;
 }
 
 export const TextInputGroupContext = React.createContext<Partial<TextInputGroupProps>>({
diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
index 094d2642e71..23aafd579dc 100644
--- a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
+++ b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
@@ -38,7 +38,7 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   /** Placeholder value for the input */
   placeholder?: string;
   /** @hide A reference object to attach to the input box */
-  innerRef?: React.RefObject<any>;
+  innerRef?: React.Ref<any>;
   /** Name for the input */
   name?: string;
   /** @beta The id of the active element. Required if role has a value of "combobox", and focus
@@ -46,7 +46,7 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
    */
   'aria-activedescendant'?: string;
   /** @beta Determines the accessible role of the input. */
-  role?: string;
+  role?: React.AriaRole;
   /** @beta Flag for whether an associated element controlled by the input is visible. Required if
    * role has a value of "combobox".
    */
@@ -120,7 +120,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
 };
 
 export const TextInputGroupMain = React.forwardRef(
-  (props: TextInputGroupMainProps, ref: React.Ref<HTMLInputElement>) => (
+  (props: TextInputGroupMainProps, ref: React.ForwardedRef<HTMLInputElement>) => (
     <TextInputGroupMainBase innerRef={ref as React.MutableRefObject<any>} {...props} />
   )
 );
diff --git a/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx
index bf3eddc257c..9d7383c9646 100644
--- a/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx
+++ b/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx
@@ -25,9 +25,9 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
   ...props
 }: ToggleGroupProps) => {
   const toggleGroupItemList = React.Children.map(children, (child) =>
-    !(React.isValidElement(child) && child.type === ToggleGroupItem)
+    !(React.isValidElement(child) && (child as any).type === ToggleGroupItem)
       ? child
-      : React.cloneElement<ToggleGroupItemProps>(child, areAllGroupsDisabled ? { isDisabled: true } : {})
+      : React.cloneElement<ToggleGroupItemProps>(child as React.ReactElement<any>, areAllGroupsDisabled ? { isDisabled: true } : {})
   );
 
   return (
diff --git a/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx
index 463db0c5b29..4699b0321eb 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx
@@ -29,7 +29,7 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivEl
 class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentProps> {
   static displayName = 'ToolbarExpandableContent';
   static contextType = ToolbarContext;
-  context!: React.ContextType<typeof ToolbarContext>;
+  declare context: React.ContextType<typeof ToolbarContext>;
   static defaultProps: PickOptional<ToolbarExpandableContentProps> = {
     isExpanded: false,
     clearFiltersButtonText: 'Clear all filters'
diff --git a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
index 4c71e7ce245..717f54904d2 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
@@ -46,7 +46,7 @@ interface ToolbarFilterState {
 class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterState> {
   static displayName = 'ToolbarFilter';
   static contextType = ToolbarContext;
-  context!: React.ContextType<typeof ToolbarContext>;
+  declare context: React.ContextType<typeof ToolbarContext>;
   static defaultProps: PickOptional<ToolbarFilterProps> = {
     chips: [] as (string | ToolbarChip)[],
     showToolbarItem: true
diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
index cfd28b2638c..9dff74f2d5f 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
@@ -56,7 +56,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation. */
   isOverflowContainer?: boolean;
   /** @hide Reference to pass to this group if it has .pf-m-chip-container modifier */
-  innerRef?: React.RefObject<any>;
+  innerRef?: React.Ref<any>;
 }
 
 class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
index e92800b2012..f7a462edd1a 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
@@ -17,7 +17,7 @@ export enum ToolbarItemVariant {
   'expand-all' = 'expand-all'
 }
 
-export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
+export interface ToolbarItemProps extends React.HTMLProps<HTMLElement | HTMLDivElement> {
   /** Classes applied to root element of the data toolbar item */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of item */
@@ -94,7 +94,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
-    return <Divider className={css(styles.modifiers.vertical, className)} {...props} />;
+    return <Divider className={css(styles.modifiers.vertical, className)} {...props as React.HTMLProps<HTMLElement>} />;
   }
 
   const widthStyles: any = {};
@@ -136,8 +136,8 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           )}
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
-          {...props}
-          {...(widths && { style: { ...widthStyles, ...props.style } as React.CSSProperties })}
+          {...props as React.HTMLProps<HTMLDivElement>}
+          {...(widths && { style: { ...widthStyles, ...(props as any).style } as React.CSSProperties })}
         >
           {children}
         </div>
diff --git a/packages/react-core/src/components/Wizard/utils.ts b/packages/react-core/src/components/Wizard/utils.ts
index f83a42a0381..a30a58db294 100644
--- a/packages/react-core/src/components/Wizard/utils.ts
+++ b/packages/react-core/src/components/Wizard/utils.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WizardStepType } from './types';
+import { WizardStepType, WizardBasicStep } from './types';
 import { WizardStep, WizardStepProps } from './WizardStep';
 
 /**
@@ -22,7 +22,7 @@ export const buildSteps = (children: React.ReactNode | React.ReactNode[]) =>
           component: child,
           ...(index === 0 && !childStepComponents?.length && { isVisited: true }),
           ...(childStepComponents && {
-            subStepIds: childStepComponents?.map((childStepComponent, subStepIndex) => {
+            subStepIds: (childStepComponents as any[])?.map((childStepComponent, subStepIndex) => {
               subSteps.push({
                 index: stepIndex + subStepIndex + 1,
                 component: childStepComponent,
diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts
index a322279493d..d749c3f7f87 100644
--- a/packages/react-core/src/components/index.ts
+++ b/packages/react-core/src/components/index.ts
@@ -1,5 +1,5 @@
 /** Keep alphabetically sorted */
-export * from './AboutModal';
+// export * from './AboutModal';
 export * from './Accordion';
 export * from './ActionList';
 export * from './Alert';
@@ -23,11 +23,11 @@ export * from './DatePicker';
 export * from './DescriptionList';
 export * from './Divider';
 export * from './Drawer';
-export * from './Dropdown';
+// export * from './Dropdown';
 export * from './DualListSelector';
 export * from './EmptyState';
 export * from './ExpandableSection';
-export * from './FileUpload';
+// export * from './FileUpload';
 export * from './Form';
 export * from './FormSelect';
 export * from './HelperText';
@@ -37,12 +37,12 @@ export * from './InputGroup';
 export * from './JumpLinks';
 export * from './Label';
 export * from './List';
-export * from './LoginPage';
+// export * from './LoginPage';
 export * from './Masthead';
 export * from './Menu';
 export * from './MenuToggle';
 export * from './Modal';
-export * from './MultipleFileUpload';
+// export * from './MultipleFileUpload';
 export * from './Nav';
 export * from './NotificationBadge';
 export * from './NotificationDrawer';
@@ -62,7 +62,7 @@ export * from './SkipToContent';
 export * from './Slider';
 export * from './Spinner';
 export * from './Switch';
-export * from './Tabs';
+// export * from './Tabs';
 export * from './Text';
 export * from './TextArea';
 export * from './TextInput';
diff --git a/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx b/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx
index 977bd8809d2..ac97f9d0b6a 100644
--- a/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx
+++ b/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx
@@ -1,8 +1,9 @@
 import { createFocusTrap, FocusTrap as FocusTrapInstance, Options as FocusTrapOptions } from 'focus-trap';
-import React, { ComponentPropsWithRef, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { HTMLProps, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { useUnmountEffect } from '../useUnmountEffect';
 
-export interface FocusTrapProps extends ComponentPropsWithRef<'div'> {
+// extends ComponentPropsWithRef<'div'>
+export interface FocusTrapProps extends Omit<HTMLProps<HTMLDivElement>, 'ref'> {
   active?: boolean;
   paused?: boolean;
   focusTrapOptions?: FocusTrapOptions;
diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx
index 403e232dfd6..b6aac4c2d0a 100644
--- a/packages/react-core/src/helpers/Popper/Popper.tsx
+++ b/packages/react-core/src/helpers/Popper/Popper.tsx
@@ -5,6 +5,7 @@ import { Placement, Modifier } from './thirdparty/popper-core';
 import { clearTimeouts } from '../util';
 import { css } from '@patternfly/react-styles';
 import '@patternfly/react-styles/css/components/Popper/Popper.css';
+import { VNode } from 'preact';
 
 const hash = {
   left: 'right',
@@ -57,7 +58,7 @@ export interface PopperProps {
    */
   triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** The popper (menu/tooltip/popover) element */
-  popper: React.ReactElement;
+  popper: VNode;
   /**
    * @beta Reference to the popper (menu/tooltip/popover) element.
    * Passing this prop will remove the wrapper div element from the popper.
diff --git a/packages/react-core/src/helpers/favorites.ts b/packages/react-core/src/helpers/favorites.ts
index da6bdeddc6c..c97c21a248a 100644
--- a/packages/react-core/src/helpers/favorites.ts
+++ b/packages/react-core/src/helpers/favorites.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ApplicationLauncherSeparator } from '../deprecated/components/ApplicationLauncher/ApplicationLauncherSeparator';
+// import { ApplicationLauncherSeparator } from '../deprecated/components/ApplicationLauncher/ApplicationLauncherSeparator';
 import { Divider } from '../components/Divider/Divider';
 
 /**
@@ -61,7 +61,7 @@ export const extendItemsWithFavorite = (items: object, isGrouped: boolean, favor
     return (items as React.ReactElement[]).map((group) =>
       React.cloneElement(group, {
         children: React.Children.map(group.props.children as React.ReactElement[], (item) => {
-          if (item.type === ApplicationLauncherSeparator || item.type === Divider) {
+          if (/*item.type === ApplicationLauncherSeparator || */item.type === Divider) {
             return item;
           }
           return React.cloneElement(item, {
diff --git a/packages/react-core/src/helpers/typeUtils.ts b/packages/react-core/src/helpers/typeUtils.ts
index c7db7c3e542..39d5c1576c3 100644
--- a/packages/react-core/src/helpers/typeUtils.ts
+++ b/packages/react-core/src/helpers/typeUtils.ts
@@ -15,4 +15,4 @@ export type PickOptional<T> = Pick<T, OptionalKeys<T>>;
 // so that they cannot be accidentally omitted when providing default values
 export type PickAndRequireOptional<T> = Required<Pick<T, OptionalKeys<T>>>;
 
-export type DropEvent = React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | DragEvent | Event;
+export type DropEvent = React.ChangeEvent<HTMLInputElement> | DragEvent | Event;
diff --git a/packages/react-core/src/helpers/util.ts b/packages/react-core/src/helpers/util.ts
index 6c127df494f..8c3d255e88f 100644
--- a/packages/react-core/src/helpers/util.ts
+++ b/packages/react-core/src/helpers/util.ts
@@ -505,7 +505,7 @@ export const preventedEvents = (events: string[]) =>
   events.reduce(
     (handlers, eventToPrevent) => ({
       ...handlers,
-      [eventToPrevent]: (event: React.SyntheticEvent<HTMLElement>) => {
+      [eventToPrevent]: (event: any) => {
         event.preventDefault();
       }
     }),
diff --git a/packages/react-core/src/layouts/Flex/Flex.tsx b/packages/react-core/src/layouts/Flex/Flex.tsx
index 92399cc7aca..46a4ada91a1 100644
--- a/packages/react-core/src/layouts/Flex/Flex.tsx
+++ b/packages/react-core/src/layouts/Flex/Flex.tsx
@@ -536,7 +536,7 @@ export const Flex: React.FunctionComponent<FlexProps> = ({
         className
       )}
       style={
-        style || order ? { ...style, ...setBreakpointCssVars(order, flexToken.l_flex_item_Order.name) } : undefined
+        style || order ? { ...(style as any), ...setBreakpointCssVars(order, flexToken.l_flex_item_Order.name) } : undefined
       }
       {...props}
     >
diff --git a/packages/react-core/src/layouts/Flex/FlexItem.tsx b/packages/react-core/src/layouts/Flex/FlexItem.tsx
index 84e70586c80..27aa813fc4e 100644
--- a/packages/react-core/src/layouts/Flex/FlexItem.tsx
+++ b/packages/react-core/src/layouts/Flex/FlexItem.tsx
@@ -170,7 +170,7 @@ export const FlexItem: React.FunctionComponent<FlexItemProps> = ({
         className
       )}
       style={
-        style || order ? { ...style, ...setBreakpointCssVars(order, flexToken.l_flex_item_Order.name) } : undefined
+        style || order ? { ...(style as any), ...setBreakpointCssVars(order, flexToken.l_flex_item_Order.name) } : undefined
       }
     >
       {children}
diff --git a/packages/react-core/src/layouts/Gallery/Gallery.tsx b/packages/react-core/src/layouts/Gallery/Gallery.tsx
index f4e6250cd8b..a09e3851d70 100644
--- a/packages/react-core/src/layouts/Gallery/Gallery.tsx
+++ b/packages/react-core/src/layouts/Gallery/Gallery.tsx
@@ -65,7 +65,7 @@ export const Gallery: React.FunctionComponent<GalleryProps> = ({
     <Component
       className={css(styles.gallery, hasGutter && styles.modifiers.gutter, className)}
       {...props}
-      {...((minWidths || maxWidths) && { style: { ...widthStyles, ...props.style } as React.CSSProperties })}
+      {...((minWidths || maxWidths) && { style: { ...widthStyles, ...(props as any).style } as React.CSSProperties })}
     >
       {children}
     </Component>
diff --git a/packages/react-core/src/layouts/Grid/Grid.tsx b/packages/react-core/src/layouts/Grid/Grid.tsx
index 08293715c77..d59975e10e6 100644
--- a/packages/react-core/src/layouts/Grid/Grid.tsx
+++ b/packages/react-core/src/layouts/Grid/Grid.tsx
@@ -65,7 +65,7 @@ export const Grid: React.FunctionComponent<GridProps> = ({
     <Component
       className={css(...classes, hasGutter && styles.modifiers.gutter, className)}
       style={
-        style || order ? { ...style, ...setBreakpointCssVars(order, gridToken.l_grid_item_Order.name) } : undefined
+        style || order ? { ...(style as any), ...setBreakpointCssVars(order, gridToken.l_grid_item_Order.name) } : undefined
       }
       {...props}
     >
diff --git a/packages/react-core/src/layouts/Grid/GridItem.tsx b/packages/react-core/src/layouts/Grid/GridItem.tsx
index 4d420d7e888..dd16fe8cd3f 100644
--- a/packages/react-core/src/layouts/Grid/GridItem.tsx
+++ b/packages/react-core/src/layouts/Grid/GridItem.tsx
@@ -108,7 +108,7 @@ export const GridItem: React.FunctionComponent<GridItemProps> = ({
     <Component
       className={css(...classes, className)}
       style={
-        style || order ? { ...style, ...setBreakpointCssVars(order, gridToken.l_grid_item_Order.name) } : undefined
+        style || order ? { ...(style as any), ...setBreakpointCssVars(order, gridToken.l_grid_item_Order.name) } : undefined
       }
       {...props}
     >
diff --git a/packages/react-core/tsconfig.json b/packages/react-core/tsconfig.json
index 3a4be05f922..6b7b9976944 100644
--- a/packages/react-core/tsconfig.json
+++ b/packages/react-core/tsconfig.json
@@ -1,17 +1,62 @@
 {
-  "extends": "../tsconfig.base.json",
+  // "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "react",
+    "assumeChangesOnlyAffectDirectDependencies": false,
+    "lib": [
+      "es2015",
+      "dom"
+    ],
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "importHelpers": true,
+    "composite": true,
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "strict": true,
+    "strictNullChecks": false,
+    "isolatedModules": true,
+    "plugins": [
+      { "transform": "transformer-cjs-imports" }
+    ],
     "rootDir": "./src",
     "outDir": "./dist/esm",
     "tsBuildInfoFile": "dist/esm.tsbuildinfo",
-    "baseUrl": ".",
+    "baseUrl": "./",
     "paths": {
       "./next": ["./src/next"],
-      "./deprecated": ["./src/deprecated"]
-    }
+      "./deprecated": ["./src/deprecated"],
+      // have to comment this line, run tsc, 
+      // then uncomment it again for changes in global.d.ts to take effect
+      "react": ["../../node_modules/preact/compat/"],
+      "react-dom": ["../../node_modules/preact/compat/"]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
   },
-  "include": ["./src/*", "./src/**/*"],
+  "include": [
+    "./src/*",
+    "./src/**/*",
+    "./global.d.ts",
+  ],
+  "exclude": [
+    "**/**.test.tsx",
+    "**/**.test.ts",
+    "**/examples/**",
+    "**/__mocks__/**",
+    "**/__tests__/**",
+    "dist",
+    "dist-rollup",
+    "./src/deprecated/**",
+    "./src/components/AboutModal/**",
+    "./src/components/Tabs/**",
+    "./src/components/FileUpload/**",
+    "./src/components/MultipleFileUpload/**",
+    "./src/components/LoginPage/**"
+  ],
   "references": [
     {
       "path": "../react-styles"
diff --git a/packages/tsconfig.base.json b/packages/tsconfig.base.json
index 8b1bd94e118..feff6739175 100644
--- a/packages/tsconfig.base.json
+++ b/packages/tsconfig.base.json
@@ -20,7 +20,12 @@
     "isolatedModules": true,
     "plugins": [
       { "transform": "transformer-cjs-imports" }
-    ]
+    ],
+    // preact
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    },
   },
   "exclude": [
     "**/**.test.tsx",
diff --git a/packages/tsconfig.cjs.json b/packages/tsconfig.cjs.json
index 6a79555e886..c7b6c9045b7 100644
--- a/packages/tsconfig.cjs.json
+++ b/packages/tsconfig.cjs.json
@@ -16,8 +16,8 @@
     {
       "path": "./react-styles/tsconfig.cjs.json"
     },
-    {
-      "path": "./react-table/tsconfig.cjs.json"
-    }
+    // {
+    //   "path": "./react-table/tsconfig.cjs.json"
+    // }
   ]
 }
diff --git a/packages/tsconfig.json b/packages/tsconfig.json
index 8e6c82bdb5f..f1415dc6afd 100644
--- a/packages/tsconfig.json
+++ b/packages/tsconfig.json
@@ -16,8 +16,8 @@
     {
       "path": "./react-styles"
     },
-    {
-      "path": "./react-table"
-    }
+    // {
+    //   "path": "./react-table"
+    // }
   ]
 }