diff --git a/packages/react-core/src/components/Accordion/examples/Accordion.md b/packages/react-core/src/components/Accordion/examples/Accordion.md
index 93037f27f6b..56fe2e7231d 100644
--- a/packages/react-core/src/components/Accordion/examples/Accordion.md
+++ b/packages/react-core/src/components/Accordion/examples/Accordion.md
@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-accordion
 propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 
+import { useState } from 'react';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
 ## Examples
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
index 7cd0a01ba40..45b4c6a4272 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Accordion,
   AccordionItem,
@@ -10,8 +11,8 @@ import {
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
 export const AccordionBordered: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('bordered-toggle4');
-  const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
+  const [expanded, setExpanded] = useState('bordered-toggle4');
+  const [isDisplayLarge, setIsDisplayLarge] = useState(false);
 
   const displaySize = isDisplayLarge ? 'lg' : 'default';
   const onToggle = (id: string) => {
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx b/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
index 938877aa888..c0cf781da5d 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionDefinitionList: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('def-list-toggle2');
+  const [expanded, setExpanded] = useState('def-list-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
index b4f68eba239..2ae7cdd7605 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState(['ex2-toggle4']);
+  const [expanded, setExpanded] = useState(['ex2-toggle4']);
 
   const toggle = (id) => {
     const index = expanded.indexOf(id);
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
index a39ebad4578..64e4755485a 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('ex-toggle2');
+  const [expanded, setExpanded] = useState('ex-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx b/packages/react-core/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx
index 4da46e0f1d2..9519d2a8870 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionToggleIconAtStart: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('start-toggle-toggle2');
+  const [expanded, setExpanded] = useState('start-toggle-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {
diff --git a/packages/react-core/src/components/ActionList/examples/ActionList.md b/packages/react-core/src/components/ActionList/examples/ActionList.md
index ff1e7fb698e..e23eba3e738 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionList.md
+++ b/packages/react-core/src/components/ActionList/examples/ActionList.md
@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-action-list
 propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
index 9d4ca00a6dc..75fa07880a8 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   ActionList,
   ActionListGroup,
@@ -14,7 +14,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx
index f14cdee9e51..fe2086c0bc3 100644
--- a/packages/react-core/src/components/Alert/Alert.tsx
+++ b/packages/react-core/src/components/Alert/Alert.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState, type JSX } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 import { AlertIcon } from './AlertIcon';
@@ -22,7 +22,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   /** Close button; use the alert action close button component.  */
   actionClose?: React.ReactNode;
   /** Action links; use a single alert action link component or multiple wrapped in an array
-   * or React.Fragment.
+   * or React fragment.
    */
   actionLinks?: React.ReactNode;
   /** Content rendered inside the alert. */
@@ -54,7 +54,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   /** Title of the alert.  */
   title: React.ReactNode;
   /** Sets the element to use as the alert title. Default is h4. */
-  component?: keyof JSX.IntrinsicElements;
+  component?: keyof React.JSX.IntrinsicElements;
   /** Adds accessible text to the alert toggle. */
   toggleAriaLabel?: string;
   /** Position of the tooltip which is displayed if text is truncated. */
diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md
index 2a7b436bac9..bacf683bb8a 100644
--- a/packages/react-core/src/components/Alert/examples/Alert.md
+++ b/packages/react-core/src/components/Alert/examples/Alert.md
@@ -7,7 +7,7 @@ ouia: true
 ---
 
 import './alert.css';
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
 import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
@@ -30,15 +30,16 @@ PatternFly supports several alert variants for different scenarios. Each variant
 | Danger | Use to indicate that a critical or blocking error has occurred |
 
 ```ts
+import { Fragment } from 'react';
 import { Alert } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <Alert title="Custom alert title" ouiaId="CustomAlert" />
   <Alert variant="info" title="Info alert title" ouiaId="InfoAlert" />
   <Alert variant="success" title="Success alert title" ouiaId="SuccessAlert" />
   <Alert variant="warning" title="Warning alert title" ouiaId="WarningAlert" />
   <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Alert variations
@@ -56,14 +57,15 @@ PatternFly supports several properties and variations that can be used to add ex
   - If there is a description passed via `children` prop, then the `component` prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`.
 
 ```ts
+import { Fragment } from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <Alert
     variant="success"
     title="Success alert title"
     actionLinks={
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           View details
         </AlertActionLink>
@@ -72,7 +74,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
         >
           Ignore
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     }
   >
     <p>Success alert description. This should tell the user more information about the alert.</p>
@@ -95,7 +97,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
   <Alert variant="success" title="h6 Success alert title" component="h6">
     <p>Short alert description.</p>
   </Alert>
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Alert timeout
@@ -103,11 +105,12 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
 Use the `timeout` property to automatically dismiss an alert after a period of time. If set to `true`, the `timeout` will be 8000 milliseconds. Provide a specific value to dismiss the alert after a different number of milliseconds.
 
 ```ts
+import { Fragment, useState } from 'react';
 import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core';
 
 const AlertTimeout: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<React.ReactNode[]>([]);
-  const [newAlertKey, setNewAlertKey] = React.useState<number>(0);
+  const [alerts, setAlerts] = useState<React.ReactNode[]>([]);
+  const [newAlertKey, setNewAlertKey] = useState<number>(0);
 
   const onClick = () => {
     const timeout = 8000;
@@ -119,7 +122,7 @@ const AlertTimeout: React.FunctionComponent = () => {
           title="Default timeout Alert"
           timeout={timeout}
           actionLinks={
-            <React.Fragment>
+            <Fragment>
               <AlertActionLink component="a" href="#">
                 View details
               </AlertActionLink>
@@ -128,7 +131,7 @@ const AlertTimeout: React.FunctionComponent = () => {
               >
                 Ignore
               </AlertActionLink>
-            </React.Fragment>
+            </Fragment>
           }
           key={newAlertKey}
         >
@@ -139,7 +142,7 @@ const AlertTimeout: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Button variant="secondary" onClick={onClick}>
         Add alert
       </Button>
@@ -147,7 +150,7 @@ const AlertTimeout: React.FunctionComponent = () => {
         Remove all alerts
       </Button>
       <AlertGroup isLiveRegion>{alerts}</AlertGroup>
-    </React.Fragment>
+    </Fragment>
   );
 };
 ```
@@ -161,9 +164,10 @@ It is not recommended to use an expandable alert with a `timeout` in a [toast al
 See the [toast alert considerations](/components/alert/accessibility#toast-alerts) section of the alert accessibility documentation to understand the accessibility risks associated with using toast alerts.
 
 ```ts
+import { Fragment } from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <Alert
     isExpandable
     variant="success"
@@ -179,7 +183,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     variant="success"
     title="Success alert title"
     actionLinks={
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           View details
         </AlertActionLink>
@@ -188,12 +192,12 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
         >
           Ignore
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     }
   >
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </Alert>
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Truncated alerts
@@ -201,9 +205,10 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
 Use the `truncateTitle` property to shorten a long `title`. Set `truncateTitle` equal to a number (passed in as `{n}`) to reduce the number of lines of text in the alert's `title`. Users may hover over or tab to a truncated `title` to see the full message in a tooltip.
 
 ```ts
+import { Fragment } from 'react';
 import { Alert } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <Alert
     variant="info"
     truncateTitle={1}
@@ -225,7 +230,7 @@ import { Alert } from '@patternfly/react-core';
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
   `}
   />
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Custom icons
@@ -233,6 +238,7 @@ import { Alert } from '@patternfly/react-core';
 Use the `customIcon` property to replace a default alert icon with a custom icon.
 
 ```ts
+import { Fragment } from 'react';
 import { Alert } from '@patternfly/react-core';
 import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
 import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
@@ -240,13 +246,13 @@ import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 
-<React.Fragment>
+<Fragment>
   <Alert customIcon={<UsersIcon />} title="Default alert title" />
   <Alert customIcon={<BoxIcon />} variant="info" title="Info alert title" />
   <Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
   <Alert customIcon={<ServerIcon />} variant="warning" title="Warning alert title" />
   <Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Inline alerts variants
@@ -254,14 +260,15 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 Use inline alerts to display an alert inline with content. All alert variants may use the `isInline` property to position alerts in content-heavy areas, such as within forms, wizards, or drawers.
 
 ```ts
+import { Fragment } from 'react';
 import { Alert } from '@patternfly/react-core';
-<React.Fragment>
+<Fragment>
   <Alert variant="custom" isInline title="Custom inline alert title" />
   <Alert variant="info" isInline title="Info inline alert title" />
   <Alert variant="success" isInline title="Success inline alert title" />
   <Alert variant="warning" isInline title="Warning inline alert title" />
   <Alert variant="danger" isInline title="Danger inline alert title" />
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Inline alert variations
@@ -269,14 +276,15 @@ import { Alert } from '@patternfly/react-core';
 All general alert variations can use the `isInline` property to apply inline styling.
 
 ```ts
+import { Fragment } from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
-<React.Fragment>
+<Fragment>
   <Alert
     isInline
     variant="success"
     title="Success alert title"
     actionLinks={
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           View details
         </AlertActionLink>
@@ -285,7 +293,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
         >
           Ignore
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     }
   >
     <p>Success alert description. This should tell the user more information about the alert.</p>
@@ -309,7 +317,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
   <Alert isInline variant="success" title="h6 Success alert title" component="h6">
     <p>Short alert description.</p>
   </Alert>
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Plain inline alert variants
@@ -317,14 +325,15 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
 Use the `isPlain` property to make any inline alert plain. Plain styling removes the colored background but keeps colored text and icons.
 
 ```ts
+import { Fragment } from 'react';
 import { Alert } from '@patternfly/react-core';
-<React.Fragment>
+<Fragment>
   <Alert variant="custom" isInline isPlain title="Custom inline alert title" />
   <Alert variant="info" isInline isPlain title="Info inline alert title" />
   <Alert variant="success" isInline isPlain title="Success inline alert title" />
   <Alert variant="warning" isInline isPlain title="Warning inline alert title" />
   <Alert variant="danger" isInline isPlain title="Danger inline alert title" />
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Plain inline alert variations
@@ -345,9 +354,10 @@ Live region alerts allow you to expose dynamic content changes in a way that can
 By default, `isLiveRegion`alerts are static.
 
 ```ts
+import { Fragment } from 'react';
 import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <Alert
     isLiveRegion
     variant="info"
@@ -369,7 +379,7 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
     You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on the
     containing element.
   </Alert>
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### Dynamic live region alerts
diff --git a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
index d80bdaa8c7d..6fe11a82222 100644
--- a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { Alert, AlertGroup, AlertVariant, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 interface AlertInfo {
@@ -8,15 +8,15 @@ interface AlertInfo {
 }
 
 export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<AlertInfo[]>([]);
-  const [isActive, setIsActive] = React.useState(false);
+  const [alerts, setAlerts] = useState<AlertInfo[]>([]);
+  const [isActive, setIsActive] = useState(false);
   const getUniqueId: () => number = () => new Date().getTime();
 
   const addAlert = (alertInfo: AlertInfo) => {
     setAlerts((prevAlertInfo) => [...prevAlertInfo, alertInfo]);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     let timer = null;
     if (isActive) {
       timer = setInterval(() => {
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx
index b608134f040..610d4fc0581 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -12,8 +12,8 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupAsync: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
-  const [isRunning, setIsRunning] = React.useState(false);
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
+  const [isRunning, setIsRunning] = useState(false);
 
   const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');
 
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx
index 9d98bd923e6..451252c4160 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -11,7 +11,7 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
 
   const addAlerts = (incomingAlerts: Partial<AlertProps>[]) => {
     setAlerts((prevAlerts) => [...prevAlerts, ...incomingAlerts]);
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx
index 1df8dc6296c..8f471476121 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -11,7 +11,7 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
 
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
     setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]);
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx
index f7736ad4d42..1e26d95465e 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -11,8 +11,8 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
-  const [overflowMessage, setOverflowMessage] = React.useState<string>('');
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
+  const [overflowMessage, setOverflowMessage] = useState<string>('');
 
   const maxDisplayed = 4;
 
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx
index 1d38f86308b..1c5613ef0a6 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -11,7 +11,7 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupToast: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
 
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
     setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]);
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx
index b8ddd9cd611..3d68793a3b9 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Alert,
   AlertProps,
@@ -11,8 +11,8 @@ import {
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
-  const [overflowMessage, setOverflowMessage] = React.useState<string>('');
+  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
+  const [overflowMessage, setOverflowMessage] = useState<string>('');
 
   const maxDisplayed = 4;
 
diff --git a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
index 3309609ff97..fdc6975e649 100644
--- a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
+++ b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
@@ -6,6 +6,7 @@ propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---
 
+import { useRef, useState } from 'react';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
index 6d1fc2266a6..87e0ec6541e 100644
--- a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
+++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -46,8 +47,8 @@ const dropdownItems = [
 ];
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const badgeToggleRef = React.useRef<HTMLButtonElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const badgeToggleRef = useRef<HTMLButtonElement>(undefined);
 
   const onToggle = () => setIsOpen(!isOpen);
 
diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md
index a082ee23279..b816256151f 100644
--- a/packages/react-core/src/components/Button/examples/Button.md
+++ b/packages/react-core/src/components/Button/examples/Button.md
@@ -6,7 +6,7 @@ propComponents: ['Button', 'BadgeCountObject']
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
diff --git a/packages/react-core/src/components/Button/examples/ButtonProgress.tsx b/packages/react-core/src/components/Button/examples/ButtonProgress.tsx
index 44b07f44e3b..fd78b5fb8db 100644
--- a/packages/react-core/src/components/Button/examples/ButtonProgress.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonProgress.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Button, Flex } from '@patternfly/react-core';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
@@ -9,10 +10,10 @@ interface LoadingPropsType {
 }
 
 export const ButtonProgress: React.FunctionComponent = () => {
-  const [isPrimaryLoading, setIsPrimaryLoading] = React.useState<boolean>(true);
-  const [isSecondaryLoading, setIsSecondaryLoading] = React.useState<boolean>(true);
-  const [isInlineLoading, setIsInlineLoading] = React.useState<boolean>(true);
-  const [isUploading, setIsUploading] = React.useState<boolean>(false);
+  const [isPrimaryLoading, setIsPrimaryLoading] = useState<boolean>(true);
+  const [isSecondaryLoading, setIsSecondaryLoading] = useState<boolean>(true);
+  const [isInlineLoading, setIsInlineLoading] = useState<boolean>(true);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
 
   const primaryLoadingProps = {} as LoadingPropsType;
   primaryLoadingProps.spinnerAriaValueText = 'Loading';
diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
index 08f75672704..ebfd522ff90 100644
--- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
+++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type JSX } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Select, SelectList, SelectOption } from '../Select';
@@ -23,7 +23,7 @@ export enum Weekday {
 
 export interface CalendarMonthInlineProps {
   /** Component wrapping the calendar month when used inline. Recommended to be 'article'. */
-  component?: keyof JSX.IntrinsicElements;
+  component?: keyof React.JSX.IntrinsicElements;
   /** Title of the calendar rendered above the inline calendar month. Recommended to be a 'title' component. */
   title?: React.ReactNode;
   /** Id of the accessible label of the calendar month. Recommended to map to the title. */
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
index 2b784e4f5f9..ab5a6a3005e 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
@@ -5,6 +5,7 @@ subsection: date-and-time
 cssPrefix: pf-v6-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---
+import { useState } from 'react';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
index 0e9d49a1065..876f2b3dda0 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/react-core';
 
 export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
-  const [date, setDate] = React.useState(new Date(2020, 10, 24));
+  const [date, setDate] = useState(new Date(2020, 10, 24));
 
   const onMonthChange = (
     _event: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement> | undefined,
diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx
index d78c9b40544..5e7b7e73de0 100644
--- a/packages/react-core/src/components/Card/Card.tsx
+++ b/packages/react-core/src/components/Card/Card.tsx
@@ -1,4 +1,4 @@
-import { createContext, type JSX } from 'react';
+import { createContext } from 'react';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 import { useOUIAProps, OUIAProps } from '../../helpers';
@@ -11,7 +11,7 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   /** Additional classes added to the Card */
   className?: string;
   /** Sets the base component to render. defaults to div */
-  component?: keyof JSX.IntrinsicElements;
+  component?: keyof React.JSX.IntrinsicElements;
   /** Modifies the card to include compact styling. Should not be used with isLarge. */
   isCompact?: boolean;
   /** Flag indicating that the card is selectable. */
diff --git a/packages/react-core/src/components/Card/CardTitle.tsx b/packages/react-core/src/components/Card/CardTitle.tsx
index f5b48e82953..2df2ced37f7 100644
--- a/packages/react-core/src/components/Card/CardTitle.tsx
+++ b/packages/react-core/src/components/Card/CardTitle.tsx
@@ -1,4 +1,4 @@
-import { useContext, type JSX } from 'react';
+import { useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
@@ -9,7 +9,7 @@ export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the CardTitle */
   className?: string;
   /** Sets the base component to render. defaults to div */
-  component?: keyof JSX.IntrinsicElements;
+  component?: keyof React.JSX.IntrinsicElements;
 }
 
 export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
diff --git a/packages/react-core/src/components/Card/__tests__/Card.test.tsx b/packages/react-core/src/components/Card/__tests__/Card.test.tsx
index fa73fbbed70..9a11e584111 100644
--- a/packages/react-core/src/components/Card/__tests__/Card.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/Card.test.tsx
@@ -1,5 +1,3 @@
-import { type JSX } from 'react';
-
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
@@ -33,7 +31,7 @@ describe('Card', () => {
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
 
-    render(<Card component={Component as unknown as keyof JSX.IntrinsicElements} />);
+    render(<Card component={Component as unknown as keyof React.JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 
diff --git a/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx b/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx
index 41e176eef5a..a1e6478c633 100644
--- a/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx
@@ -1,4 +1,3 @@
-import { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardBody } from '../CardBody';
 
@@ -30,7 +29,7 @@ describe('CardBody', () => {
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
 
-    render(<CardBody component={Component as unknown as keyof JSX.IntrinsicElements} />);
+    render(<CardBody component={Component as unknown as keyof React.JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 
diff --git a/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx b/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx
index 1b2c44ed4a7..ed7a55d67c2 100644
--- a/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx
@@ -1,4 +1,3 @@
-import { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardFooter } from '../CardFooter';
 
@@ -27,7 +26,7 @@ describe('CardFooter', () => {
 
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
-    render(<CardFooter component={Component as unknown as keyof JSX.IntrinsicElements} />);
+    render(<CardFooter component={Component as unknown as keyof React.JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 });
diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
index 11928543aee..b183c06b1b8 100644
--- a/packages/react-core/src/components/Card/examples/Card.md
+++ b/packages/react-core/src/components/Card/examples/Card.md
@@ -16,7 +16,7 @@ propComponents:
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 import pfLogoSmall from '../../assets/PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
diff --git a/packages/react-core/src/components/Card/examples/CardClickable.tsx b/packages/react-core/src/components/Card/examples/CardClickable.tsx
index 654d8736202..5bb2506535d 100644
--- a/packages/react-core/src/components/Card/examples/CardClickable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardClickable.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const CardClickable: React.FunctionComponent = () => {
-  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
+  const [isSecondary, setIsSecondary] = useState<boolean>(false);
 
   const toggleVariant = (checked: boolean) => {
     setIsSecondary(checked);
diff --git a/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx b/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx
index 0e2c57537ae..6bad412a5c1 100644
--- a/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx
@@ -1,11 +1,12 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardTitle, CardBody, Button, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const CardClickable: React.FunctionComponent = () => {
-  const [isChecked1, setIsChecked1] = React.useState(false);
-  const [isChecked2, setIsChecked2] = React.useState(false);
-  const [isChecked3, setIsChecked3] = React.useState(false);
-  const [isClicked, setIsClicked] = React.useState(false);
-  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
+  const [isChecked1, setIsChecked1] = useState(false);
+  const [isChecked2, setIsChecked2] = useState(false);
+  const [isChecked3, setIsChecked3] = useState(false);
+  const [isClicked, setIsClicked] = useState(false);
+  const [isSecondary, setIsSecondary] = useState<boolean>(false);
 
   const id1 = 'clickable-selectable-card-input-1';
   const id2 = 'clickable-selectable-card-input-2';
diff --git a/packages/react-core/src/components/Card/examples/CardExpandable.tsx b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
index 39378dfe660..54c05beed7d 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -17,10 +17,10 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardExpandable: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
-  const [isToggleRightAligned, setIsToggleRightAligned] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const [isToggleRightAligned, setIsToggleRightAligned] = useState<boolean>(false);
 
   const onSelect = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
index fb3a227622a..19a706791c0 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -16,9 +17,9 @@ import pfLogoSmall from '../../PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardExpandableWithIcon: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   const onSelect = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
index 59ce8254bcc..ab7ef1f7ba3 100644
--- a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
+++ b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -15,8 +16,8 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardTitleInHeader: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
 
   const onSelect = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
index e955f1c5c18..e6d7db885dc 100644
--- a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
+++ b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Checkbox,
   Card,
@@ -13,8 +14,8 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
 
   const onSelect = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
index 26c3aca9393..2d32bcdedaf 100644
--- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const SelectableCard: React.FunctionComponent = () => {
-  const [isChecked1, setIsChecked1] = React.useState(false);
-  const [isChecked2, setIsChecked2] = React.useState(false);
-  const [isChecked3, setIsChecked3] = React.useState(false);
-  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
+  const [isChecked1, setIsChecked1] = useState(false);
+  const [isChecked2, setIsChecked2] = useState(false);
+  const [isChecked3, setIsChecked3] = useState(false);
+  const [isSecondary, setIsSecondary] = useState<boolean>(false);
 
   const id1 = 'selectable-card-input-1';
   const id2 = 'selectable-card-input-2';
diff --git a/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
index f6073dd47de..83f116e40c0 100644
--- a/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardTitle, CardBody, Gallery } from '@patternfly/react-core';
 
 export const SingleSelectableCard: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState('');
+  const [isChecked, setIsChecked] = useState('');
   const id1 = 'single-selectable-card-input-1';
   const id2 = 'single-selectable-card-input-2';
   const id3 = 'single-selectable-card-input-3';
diff --git a/packages/react-core/src/components/Card/examples/CardTile.tsx b/packages/react-core/src/components/Card/examples/CardTile.tsx
index 24f0f41c0ec..2ed07685ba1 100644
--- a/packages/react-core/src/components/Card/examples/CardTile.tsx
+++ b/packages/react-core/src/components/Card/examples/CardTile.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 export const CardTile: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState('');
+  const [isChecked, setIsChecked] = useState('');
   const id1 = 'tile-1';
   const id2 = 'tile-2';
   const id3 = 'tile-3';
diff --git a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx
index 310e037dd1e..c41816b5ba6 100644
--- a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx
+++ b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx
@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 export const CardTileMulti: React.FunctionComponent = () => {
-  const [isChecked1, setIsChecked1] = React.useState(false);
-  const [isChecked2, setIsChecked2] = React.useState(false);
-  const [isChecked3, setIsChecked3] = React.useState(false);
+  const [isChecked1, setIsChecked1] = useState(false);
+  const [isChecked2, setIsChecked2] = useState(false);
+  const [isChecked3, setIsChecked3] = useState(false);
   const id1 = 'multi-tile-1';
   const id2 = 'multi-tile-2';
   const id3 = 'multi-tile-3';
diff --git a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
index de361622506..d77fc82a0f7 100644
--- a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Brand,
   Card,
@@ -17,9 +18,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 
 export const CardWithImageAndActions: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [hasNoOffset, setHasNoOffset] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [hasNoOffset, setHasNoOffset] = useState<boolean>(false);
 
   const onSelect = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx b/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
index 9b18185f07d..637a868f10a 100644
--- a/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 
 export const CardWithModifiers: React.FunctionComponent = () => {
   const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain'];
-  const [modifiers, setModifiers] = React.useState({});
+  const [modifiers, setModifiers] = useState({});
 
   return (
     <Fragment>
diff --git a/packages/react-core/src/components/Checkbox/examples/Checkbox.md b/packages/react-core/src/components/Checkbox/examples/Checkbox.md
index c7a87545404..d860af1e4eb 100644
--- a/packages/react-core/src/components/Checkbox/examples/Checkbox.md
+++ b/packages/react-core/src/components/Checkbox/examples/Checkbox.md
@@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-check
 propComponents: ['Checkbox']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx b/packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx
index d91da501c2a..ed125618496 100644
--- a/packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx
+++ b/packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx
@@ -1,11 +1,11 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { Checkbox } from '@patternfly/react-core';
 
 export const CheckboxControlled: React.FunctionComponent = () => {
-  const [isChecked1, setIsChecked1] = React.useState<boolean>(false);
-  const [isChecked2, setIsChecked2] = React.useState<boolean>(false);
-  const [isChecked3, setIsChecked3] = React.useState<boolean>(false);
-  const [isChecked4, setIsChecked4] = React.useState<boolean>(false);
+  const [isChecked1, setIsChecked1] = useState<boolean>(false);
+  const [isChecked2, setIsChecked2] = useState<boolean>(false);
+  const [isChecked3, setIsChecked3] = useState<boolean>(false);
+  const [isChecked4, setIsChecked4] = useState<boolean>(false);
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     const target = event.currentTarget;
@@ -30,14 +30,14 @@ export const CheckboxControlled: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isChecked1 !== null) {
       setIsChecked2(isChecked1);
       setIsChecked3(isChecked1);
     }
   }, [isChecked1]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsChecked1((isChecked2 && isChecked3) || (isChecked2 || isChecked3 ? null : false));
   }, [isChecked2, isChecked3]);
 
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md b/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md
index dc3b730c942..ebbde9e5bf0 100644
--- a/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md
+++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md
@@ -15,6 +15,7 @@ propComponents:
   ]
 ---
 
+import { useState } from 'react';
 import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover, Checkbox, Card } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx
index 63ad0076a42..3c9f75ef828 100644
--- a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx
+++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   DescriptionList,
@@ -9,8 +10,8 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListWithCard: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [isSelectable, setSelectable] = React.useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [isSelectable, setSelectable] = useState<boolean>(false);
 
   const toggleSelectable = (checked: boolean) => {
     setSelectable(checked ? true : false);
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx
index 22e3962bf4f..2c41c0e454a 100644
--- a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx
+++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   DescriptionList,
@@ -9,8 +10,8 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [displaySize, setDisplaySize] = useState<'lg' | '2xl'>('lg');
 
   const toggleDisplaySize = (checked: boolean) => {
     setDisplaySize(checked ? '2xl' : 'lg');
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx
index 238990874ea..53c798206a4 100644
--- a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx
+++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   DescriptionList,
@@ -9,8 +10,8 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [displaySize, setDisplaySize] = useState<'lg' | '2xl'>('lg');
 
   const toggleDisplaySize = (checked: boolean) => {
     setDisplaySize(checked ? '2xl' : 'lg');
diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md
index 2c05cc4a652..7db5e2ad906 100644
--- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md
+++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md
@@ -16,6 +16,7 @@ propComponents:
   ]
 ---
 
+import { useState } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
index adfbe3080e5..846a846a0b4 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 
 export const DropdownBasic: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx
index 3cb1f12e9d6..2cd8eb484a0 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 
 export const DropdownWithDescriptions: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx
index cdd53aed518..7a68605eda1 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Dropdown,
   DropdownGroup,
@@ -9,7 +10,7 @@ import {
 } from '@patternfly/react-core';
 
 export const DropdownWithGroups: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
index c195359b0c2..6dc43da0604 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DropdownWithKebab: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md
index 1654b7325bc..3966abfa196 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyState.md
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyState.md
@@ -4,6 +4,8 @@ section: components
 cssPrefix: pf-v6-c-empty-state
 propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
 ---
+
+import { useState } from 'react';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx
index 81765806961..c9b3a9bceca 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   EmptyState,
   EmptyStateBody,
@@ -8,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 
 export const EmptyStateWithStatus: React.FunctionComponent = () => {
-  const [status, setStatus] = React.useState<EmptyStateStatus>(EmptyStateStatus.success);
+  const [status, setStatus] = useState<EmptyStateStatus>(EmptyStateStatus.success);
 
   const toggleStatus = () => {
     interface StatusToggleMap {
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx
index ff77ba98af2..9d76f6e10b9 100644
--- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ExpandableSection } from '@patternfly/react-core';
 
 export const ExpandableSectionBasic: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx
index 7c6b5f99a83..3f9048722da 100644
--- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { ExpandableSection, Badge } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx
index 21d17d0e74a..3f7f9042e96 100644
--- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
 
 export const ExpandableSectionDetached: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (isExpanded: boolean) => {
     setIsExpanded(isExpanded);
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx
index 2990fe52bf5..e9360aa5b13 100644
--- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ExpandableSection } from '@patternfly/react-core';
 
 export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx
index 83de90fb416..fd0f687bceb 100644
--- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ExpandableSection, ExpandableSectionVariant } from '@patternfly/react-core';
 
 export const ExpandableSectionTruncateExpansion: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUpload.md b/packages/react-core/src/components/FileUpload/examples/FileUpload.md
index 4280d6a22c3..e6b86e780cb 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUpload.md
+++ b/packages/react-core/src/components/FileUpload/examples/FileUpload.md
@@ -6,6 +6,7 @@ section: components
 subsection: file-upload
 ---
 
+import { useState } from 'react';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx
index c0aa86c7e67..0a33f46eb75 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<File>();
-  const [filename, setFilename] = React.useState('');
+  const [value, setValue] = useState<File>();
+  const [filename, setFilename] = useState('');
 
   const handleFileInputChange = (_, file: File) => {
     setValue(file);
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadCustomUpload.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadCustomUpload.tsx
index 27e4d3bffe8..159b26dc5a2 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadCustomUpload.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadCustomUpload.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Checkbox } from '@patternfly/react-core';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
@@ -13,17 +14,17 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
     'hasPlaceholderText'
   ];
 
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState(false);
-  const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = React.useState(true);
-  const [isClearButtonDisabled, setIsClearButtonDisabled] = React.useState(true);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isDragActive, setIsDragActive] = React.useState(false);
-  const [hideDefaultPreview, setHideDefaultPreview] = React.useState(false);
-  const [hasCustomFilePreview, setHasCustomFilePreview] = React.useState(false);
-  const [hasHelperText, setHasHelperText] = React.useState(false);
-  const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);
-  const [checkedState, setCheckedState] = React.useState([
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState(false);
+  const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = useState(true);
+  const [isClearButtonDisabled, setIsClearButtonDisabled] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const [hideDefaultPreview, setHideDefaultPreview] = useState(false);
+  const [hasCustomFilePreview, setHasCustomFilePreview] = useState(false);
+  const [hasHelperText, setHasHelperText] = useState(false);
+  const [hasPlaceholderText, setHasPlaceholderText] = useState(false);
+  const [checkedState, setCheckedState] = useState([
     filename,
     isBrowseButtonDisabled,
     isClearButtonDisabled,
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx
index d8d5fae2610..f9e9fea9dcf 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { FileUpload } from '@patternfly/react-core';
 
 export const SimpleFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState('');
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState('');
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx
index 876d6f773ee..ee28f15bd27 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { FileUpload, DropEvent } from '@patternfly/react-core';
 
 export const SimpleTextFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx
index 18e3a368019..013e5eb9a09 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { FileUpload, DropEvent } from '@patternfly/react-core';
 
 export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx
index d0284856406..5f4f9f3c726 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   FileUpload,
   DropzoneErrorCode,
@@ -10,11 +11,11 @@ import {
 } from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isRejected, setIsRejected] = React.useState(false);
-  const [message, setMessage] = React.useState('Must be a CSV file no larger than 1 KB');
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRejected, setIsRejected] = useState(false);
+  const [message, setMessage] = useState('Must be a CSV file no larger than 1 KB');
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadWithHelperText.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadWithHelperText.tsx
index ddeb124b14e..38b8bf5eb67 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadWithHelperText.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadWithHelperText.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { FileUpload, FileUploadHelperText, HelperText, HelperTextItem, DropEvent } from '@patternfly/react-core';
 
 export const FileUploadWithHelperText: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelect.md b/packages/react-core/src/components/FormSelect/examples/FormSelect.md
index ba075ff4a6d..0a2d572af92 100644
--- a/packages/react-core/src/components/FormSelect/examples/FormSelect.md
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelect.md
@@ -6,6 +6,7 @@ cssPrefix: pf-v6-c-form-control
 propComponents: ['FormSelect', 'FormSelectOption', 'FormSelectOptionGroup']
 ouia: true
 ---
+import { useState } from 'react';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx
index cf70afb039d..0ee1d7749ad 100644
--- a/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const FormSelectBasic: React.FunctionComponent = () => {
-  const [formSelectValue, setFormSelectValue] = React.useState('mrs');
+  const [formSelectValue, setFormSelectValue] = useState('mrs');
 
   const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormSelectValue(value);
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx
index 257a8e8cd4a..d8508fc079f 100644
--- a/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const FormSelectDisabled: React.FunctionComponent = () => {
-  const [formSelectValue, setFormSelectValue] = React.useState('mrs');
+  const [formSelectValue, setFormSelectValue] = useState('mrs');
 
   const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormSelectValue(value);
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx
index 9aafd8a6c5c..c45d0f41ea9 100644
--- a/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
 
 export const FormSelectGrouped: React.FunctionComponent = () => {
-  const [formSelectValue, setFormSelectValue] = React.useState('2');
+  const [formSelectValue, setFormSelectValue] = useState('2');
 
   const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormSelectValue(value);
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx
index 0ccd5624d33..a8acfbaf972 100644
--- a/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Form,
   FormGroup,
@@ -10,9 +11,9 @@ import {
 } from '@patternfly/react-core';
 
 export const FormSelectValidated: React.FunctionComponent = () => {
-  const [formValue, setFormValue] = React.useState('');
-  const [helperText, setHelperText] = React.useState('');
-  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
+  const [formValue, setFormValue] = useState('');
+  const [helperText, setHelperText] = useState('');
+  const [validated, setValidated] = useState<ValidatedOptions>(ValidatedOptions.default);
 
   const simulateNetworkCall = (callback: () => void) => {
     setTimeout(callback, 2000);
diff --git a/packages/react-core/src/components/Hint/examples/Hint.md b/packages/react-core/src/components/Hint/examples/Hint.md
index 57aa3740de1..28fd2e21b1a 100644
--- a/packages/react-core/src/components/Hint/examples/Hint.md
+++ b/packages/react-core/src/components/Hint/examples/Hint.md
@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-hint
 propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
diff --git a/packages/react-core/src/components/Hint/examples/HintActionsWithNoOffset.tsx b/packages/react-core/src/components/Hint/examples/HintActionsWithNoOffset.tsx
index 96e8259a5af..841fb4d6b95 100644
--- a/packages/react-core/src/components/Hint/examples/HintActionsWithNoOffset.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintActionsWithNoOffset.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Hint, HintTitle, HintBody, Button, Checkbox } from '@patternfly/react-core';
 
 export const HintActionsWithNoOffset: React.FunctionComponent = () => {
-  const [hasNoActionsOffset, setHasNoActionsOffset] = React.useState<boolean>(false);
+  const [hasNoActionsOffset, setHasNoActionsOffset] = useState<boolean>(false);
 
   const toggleOffset = (checked: boolean) => {
     setHasNoActionsOffset(checked);
diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
index 1d7997114b2..47740a26ec6 100644
--- a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Hint,
   HintTitle,
@@ -14,7 +15,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const HintBasicWithTitle: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
index 7884dc245fa..313a6c1c184 100644
--- a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Hint,
   HintBody,
@@ -14,7 +14,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const HintBasicWithoutTitle: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Icon/examples/Icon.md b/packages/react-core/src/components/Icon/examples/Icon.md
index fcdef78bfb5..172ad48183c 100644
--- a/packages/react-core/src/components/Icon/examples/Icon.md
+++ b/packages/react-core/src/components/Icon/examples/Icon.md
@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-icon
 propComponents: ['Icon']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
diff --git a/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx b/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx
index 9e319fc0191..e03bd578d4f 100644
--- a/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx
+++ b/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Icon, Spinner, Checkbox } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 export const IconProgress: React.FunctionComponent = () => {
-  const [isInProgress, setIsInProgress] = React.useState<boolean>(false);
+  const [isInProgress, setIsInProgress] = useState<boolean>(false);
   return (
     <Fragment>
       <div style={{ marginBottom: '12px' }}>
diff --git a/packages/react-core/src/components/Icon/examples/IconProgress.tsx b/packages/react-core/src/components/Icon/examples/IconProgress.tsx
index b9889989a84..f0c59f0cd1e 100644
--- a/packages/react-core/src/components/Icon/examples/IconProgress.tsx
+++ b/packages/react-core/src/components/Icon/examples/IconProgress.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Icon, Checkbox } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 export const IconProgress: React.FunctionComponent = () => {
-  const [isInProgress, setIsInProgress] = React.useState<boolean>(false);
+  const [isInProgress, setIsInProgress] = useState<boolean>(false);
   return (
     <Fragment>
       <div style={{ marginBottom: '12px' }}>
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroup.md b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
index 6d0d89210e6..901f61cc80c 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroup.md
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-input-group
 propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
 import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
index a74d789c126..cf6a38718ee 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   InputGroup,
@@ -12,7 +12,7 @@ import {
 } from '@patternfly/react-core';
 
 export const InputGroupWithDropdown: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx
index 4f4927e7042..3ca507dba39 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx
@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
+import { Fragment, useRef } from 'react';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import { Button, InputGroup, InputGroupItem, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
 
 export const InputGroupWithPopover: React.FunctionComponent = () => {
-  const inputGroupRef1 = React.useRef(null);
-  const inputGroupRef2 = React.useRef(null);
+  const inputGroupRef1 = useRef(null);
+  const inputGroupRef2 = useRef(null);
   return (
     <Fragment>
       <InputGroup ref={inputGroupRef1}>
diff --git a/packages/react-core/src/components/Label/examples/Label.md b/packages/react-core/src/components/Label/examples/Label.md
index 122b6764cd6..4110ebdf4a1 100644
--- a/packages/react-core/src/components/Label/examples/Label.md
+++ b/packages/react-core/src/components/Label/examples/Label.md
@@ -5,7 +5,7 @@ cssPrefix: ['pf-v6-c-label', 'pf-v6-c-label-group']
 propComponents: ['Label', 'LabelGroup']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import './Label.css';
diff --git a/packages/react-core/src/components/Label/examples/LabelEditable.tsx b/packages/react-core/src/components/Label/examples/LabelEditable.tsx
index 75cca9015be..762ff42b076 100644
--- a/packages/react-core/src/components/Label/examples/LabelEditable.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelEditable.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Label } from '@patternfly/react-core';
 
 export const LabelEditable: React.FunctionComponent = () => {
-  const [labelText, setLabelText] = React.useState('Editable label');
-  const [compactLabelText, setCompactLabelText] = React.useState('Compact editable label');
+  const [labelText, setLabelText] = useState('Editable label');
+  const [compactLabelText, setCompactLabelText] = useState('Compact editable label');
 
   const onEditCancel = (_event: KeyboardEvent, prevText: string) => {
     setLabelText(prevText);
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx b/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx
index 7b2a67c1cd8..d4435e94f70 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
-  const [labels, setLabels] = React.useState([
+  const [labels, setLabels] = useState([
     ['Label 1', 'grey'],
     ['Label 2', 'blue'],
     ['Label 3', 'green'],
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx
index 9038b17a0e2..99ee3b6e653 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { LabelGroup, Label } from '@patternfly/react-core';
 
 export const LabelGroupEditableAdd: React.FunctionComponent = () => {
-  const [idIndex, setIdIndex] = React.useState<number>(3);
-  const [labels, setLabels] = React.useState<any>([
+  const [idIndex, setIdIndex] = useState<number>(3);
+  const [labels, setLabels] = useState<any>([
     { name: 'Label 1', id: 0 },
     { name: 'Label 2', id: 1 },
     {
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx
index 9fa281067b5..51d1d78b976 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx
@@ -1,13 +1,14 @@
+import { useEffect, useRef, useState } from 'react';
 import { LabelGroup, Label, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
 export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
-  const toggleRef = React.useRef<HTMLDivElement>(undefined);
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
-  const containerRef = React.useRef<HTMLDivElement>(undefined);
+  const toggleRef = useRef<HTMLDivElement>(undefined);
+  const menuRef = useRef<HTMLDivElement>(undefined);
+  const containerRef = useRef<HTMLDivElement>(undefined);
 
-  const [idIndex, setIdIndex] = React.useState<number>(3);
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [labels, setLabels] = React.useState<any>([
+  const [idIndex, setIdIndex] = useState<number>(3);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [labels, setLabels] = useState<any>([
     { name: 'Label 1', id: 0 },
     { name: 'Label 2', id: 1 },
     {
@@ -67,7 +68,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
index 2ef1ff016b9..d641a5fd0ec 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   LabelGroup,
   Label,
@@ -17,27 +18,27 @@ import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
-  const [isModalOpen, setModalOpen] = React.useState<boolean>(false);
-  const [idIndex, setIdIndex] = React.useState<number>(7);
-  const [labelText, setLabelText] = React.useState<string>('');
-  const [color, setColor] = React.useState<string>();
-  const [icon, setIcon] = React.useState<any>();
-  const [labelType, setLabelType] = React.useState<string>('filled');
-  const [isClosable, setIsCloseable] = React.useState<boolean>(false);
-  const [isEditable, setIsEditable] = React.useState<boolean>(false);
-  const labelInputRef = React.useRef(null);
+  const [isModalOpen, setModalOpen] = useState<boolean>(false);
+  const [idIndex, setIdIndex] = useState<number>(7);
+  const [labelText, setLabelText] = useState<string>('');
+  const [color, setColor] = useState<string>();
+  const [icon, setIcon] = useState<any>();
+  const [labelType, setLabelType] = useState<string>('filled');
+  const [isClosable, setIsCloseable] = useState<boolean>(false);
+  const [isEditable, setIsEditable] = useState<boolean>(false);
+  const labelInputRef = useRef(null);
 
-  const [isColorOpen, setIsColorOpen] = React.useState<boolean>(false);
-  const colorMenuRef = React.useRef<HTMLDivElement>(null);
-  const colorContainerRef = React.useRef<HTMLDivElement>(null);
-  const colorToggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isColorOpen, setIsColorOpen] = useState<boolean>(false);
+  const colorMenuRef = useRef<HTMLDivElement>(null);
+  const colorContainerRef = useRef<HTMLDivElement>(null);
+  const colorToggleRef = useRef<HTMLButtonElement>(null);
 
-  const [isIconOpen, setIsIconOpen] = React.useState<boolean>(false);
-  const iconMenuRef = React.useRef<HTMLDivElement>(null);
-  const iconContainerRef = React.useRef<HTMLDivElement>(null);
-  const iconToggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isIconOpen, setIsIconOpen] = useState<boolean>(false);
+  const iconMenuRef = useRef<HTMLDivElement>(null);
+  const iconContainerRef = useRef<HTMLDivElement>(null);
+  const iconToggleRef = useRef<HTMLButtonElement>(null);
 
-  const [labels, setLabels] = React.useState<any>([
+  const [labels, setLabels] = useState<any>([
     { name: 'Label 1', id: 4 },
     { name: 'Label 2', id: 5 },
     {
@@ -106,7 +107,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
     setModalOpen(!isModalOpen);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isModalOpen && labelInputRef && labelInputRef.current) {
       (labelInputRef.current as HTMLInputElement).focus();
     }
@@ -136,7 +137,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx
index 4e35edd9341..de97126c99a 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { LabelGroup, Label } from '@patternfly/react-core';
 
 export const LabelGroupEditableLabels: React.FunctionComponent = () => {
-  const [label1, setLabel1] = React.useState('Editable label');
-  const [label2, setLabel2] = React.useState('Editable label 2');
-  const [label3, setLabel3] = React.useState('Editable label 3');
+  const [label1, setLabel1] = useState('Editable label');
+  const [label2, setLabel2] = useState('Editable label 2');
+  const [label3, setLabel3] = useState('Editable label 3');
 
   return (
     <LabelGroup numLabels={5} isEditable>
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx b/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
index d0836b118e1..494bf74b96f 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {
-  const [labels, setLabels] = React.useState([
+  const [labels, setLabels] = useState([
     ['Label 1', 'grey'],
     ['Label 2', 'blue'],
     ['Label 3', 'green'],
diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPage.md b/packages/react-core/src/components/LoginPage/examples/LoginPage.md
index c191d6dff15..7443ce7e6e8 100644
--- a/packages/react-core/src/components/LoginPage/examples/LoginPage.md
+++ b/packages/react-core/src/components/LoginPage/examples/LoginPage.md
@@ -18,7 +18,7 @@ propComponents:
   ]
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx
index a13fcb66a6e..d75d069582a 100644
--- a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx
+++ b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
@@ -18,12 +18,12 @@ import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-
 import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 export const SimpleLoginPage: React.FunctionComponent = () => {
-  const [showHelperText, setShowHelperText] = React.useState(false);
-  const [username, setUsername] = React.useState('');
-  const [isValidUsername, setIsValidUsername] = React.useState(true);
-  const [password, setPassword] = React.useState('');
-  const [isValidPassword, setIsValidPassword] = React.useState(true);
-  const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
+  const [showHelperText, setShowHelperText] = useState(false);
+  const [username, setUsername] = useState('');
+  const [isValidUsername, setIsValidUsername] = useState(true);
+  const [password, setPassword] = useState('');
+  const [isValidPassword, setIsValidPassword] = useState(true);
+  const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);
 
   const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setUsername(value);
diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx
index 23ce6b7a56e..ddb32c8c6a6 100644
--- a/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx
+++ b/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
@@ -23,14 +23,14 @@ import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-
 import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 export const LoginPageLanguageSelect: React.FunctionComponent = () => {
-  const [showHelperText, setShowHelperText] = React.useState(false);
-  const [username, setUsername] = React.useState('');
-  const [isValidUsername, setIsValidUsername] = React.useState(true);
-  const [password, setPassword] = React.useState('');
-  const [isValidPassword, setIsValidPassword] = React.useState(true);
-  const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
-  const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = React.useState(false);
-  const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState('English');
+  const [showHelperText, setShowHelperText] = useState(false);
+  const [username, setUsername] = useState('');
+  const [isValidUsername, setIsValidUsername] = useState(true);
+  const [password, setPassword] = useState('');
+  const [isValidPassword, setIsValidPassword] = useState(true);
+  const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);
+  const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = useState(false);
+  const [selectedHeaderUtils, setSelectedHeaderUtils] = useState('English');
 
   /** i18n object is used to simulate i18n integration of native language translation */
   const i18n = {
diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx
index 1abf80bbcaa..88f7bead8f3 100644
--- a/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx
+++ b/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
@@ -18,12 +18,12 @@ import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-
 import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 export const LoginPageHideShowPassword: React.FunctionComponent = () => {
-  const [showHelperText, setShowHelperText] = React.useState(false);
-  const [username, setUsername] = React.useState('');
-  const [isValidUsername, setIsValidUsername] = React.useState(true);
-  const [password, setPassword] = React.useState('');
-  const [isValidPassword, setIsValidPassword] = React.useState(true);
-  const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
+  const [showHelperText, setShowHelperText] = useState(false);
+  const [username, setUsername] = useState('');
+  const [isValidUsername, setIsValidUsername] = useState(true);
+  const [password, setPassword] = useState('');
+  const [isValidPassword, setIsValidPassword] = useState(true);
+  const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);
 
   const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setUsername(value);
diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md
index 105e82ad476..cc7453a89c4 100644
--- a/packages/react-core/src/components/Menu/examples/Menu.md
+++ b/packages/react-core/src/components/Menu/examples/Menu.md
@@ -20,7 +20,7 @@ propComponents:
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, createRef, useEffect, useRef, useState } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
diff --git a/packages/react-core/src/components/Menu/examples/MenuBasic.tsx b/packages/react-core/src/components/Menu/examples/MenuBasic.tsx
index 9cfd8c6f48f..adbe88058c4 100644
--- a/packages/react-core/src/components/Menu/examples/MenuBasic.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuBasic.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Checkbox } from '@patternfly/react-core';
 
 export const MenuBasic: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const [isPlain, setIsPlain] = React.useState(false);
+  const [activeItem, setActiveItem] = useState(0);
+  const [isPlain, setIsPlain] = useState(false);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx b/packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx
index cbe5cca57fc..231c75f3f88 100644
--- a/packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Divider, Menu, MenuContent, MenuItem, MenuList } from '@patternfly/react-core';
 
 export const MenuDangerMenuItem: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
diff --git a/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx b/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx
index de9925cc349..512db494d7c 100644
--- a/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx
@@ -1,3 +1,4 @@
+import { createRef, useState } from 'react';
 import {
   Menu,
   MenuContent,
@@ -11,10 +12,10 @@ import {
 } from '@patternfly/react-core';
 
 export const MenuWithDrilldown: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('filter_drilldown-rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<any>({});
+  const [activeMenu, setActiveMenu] = useState<string>('filter_drilldown-rootMenu');
 
   const drillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,
@@ -44,8 +45,8 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
     }
   };
 
-  const searchRef = React.createRef<HTMLInputElement>();
-  const [startInput, setStartInput] = React.useState('');
+  const searchRef = createRef<HTMLInputElement>();
+  const [startInput, setStartInput] = useState('');
 
   const handleStartTextInputChange = (value: string) => {
     setStartInput(value);
diff --git a/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx b/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx
index 7e650dcfdd1..af9bc152f98 100644
--- a/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Menu,
   MenuList,
@@ -10,8 +11,8 @@ import {
 } from '@patternfly/react-core';
 
 export const MenuFilteringWithSearchInput: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const [input, setInput] = React.useState('');
+  const [activeItem, setActiveItem] = useState(0);
+  const [input, setInput] = useState('');
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx b/packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx
index 7f04d95f6c4..55f6a21ce87 100644
--- a/packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
 
 export const MenuOptionMultiSelect: React.FunctionComponent = () => {
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
diff --git a/packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx b/packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx
index f0933e56841..14dfd07279d 100644
--- a/packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
 
 export const MenuOptionSingleSelect: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const [selectedItem, setSelectedItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
+  const [selectedItem, setSelectedItem] = useState(0);
 
   const onSelect = (_event, itemId) => {
     setActiveItem(itemId);
diff --git a/packages/react-core/src/components/Menu/examples/MenuScrollable.tsx b/packages/react-core/src/components/Menu/examples/MenuScrollable.tsx
index 14fa48aef16..187c79cc5a5 100644
--- a/packages/react-core/src/components/Menu/examples/MenuScrollable.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuScrollable.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuScrollable: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event, itemId) => {
     // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx b/packages/react-core/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx
index 0cb266f0a26..eb5d8129ccb 100644
--- a/packages/react-core/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuScrollableCustomMenuHeight: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event, itemId) => {
     // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithActions.tsx b/packages/react-core/src/components/Menu/examples/MenuWithActions.tsx
index c36a34ab9ac..00f47e38e8e 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithActions.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithActions.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, MenuItemAction } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
@@ -5,7 +6,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const MenuWithActions: React.FunctionComponent = () => {
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([0, 2, 3]);
+  const [selectedItems, setSelectedItems] = useState<number[]>([0, 2, 3]);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx b/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx
index 7669eaa4d73..b90e3bd45d3 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuWithCheckbox: React.FunctionComponent = () => {
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
 
   /* eslint no-unused-vars: ["error", {"args": "after-used"}] */
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDescription.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDescription.tsx
index a7010bece52..c260665fec2 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithDescription.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithDescription.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 
 export const MenuWithDescription: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldown.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldown.tsx
index dfffc827a9b..5dd3e848c7a 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldown.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldown.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -5,10 +6,10 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuWithDrilldown: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('drilldown-rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<any>({});
+  const [activeMenu, setActiveMenu] = useState<string>('drilldown-rootMenu');
 
   const drillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
index d6ec14ffefb..34f706fad8b 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
@@ -1,4 +1,4 @@
-import { type JSX, useState } from 'react';
+import { useState } from 'react';
 import {
   Badge,
   Breadcrumb,
@@ -30,7 +30,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
   const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
   const [menuHeights, setMenuHeights] = useState<any>({});
   const [activeMenu, setActiveMenu] = useState<string>('breadcrumbs-rootMenu');
-  const [breadcrumb, setBreadcrumb] = useState<JSX.Element | null>();
+  const [breadcrumb, setBreadcrumb] = useState<React.JSX.Element | null>();
   const [withMaxMenuHeight, setWithMaxMenuHeight] = useState(false);
 
   const onToggle = (isOpen: boolean, key: string) => {
@@ -60,7 +60,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     _event: React.KeyboardEvent<Element> | MouseEvent | React.MouseEvent<any, MouseEvent>,
     toMenuId: string,
     fromPathId: string,
-    breadcrumb: JSX.Element | null
+    breadcrumb: React.JSX.Element | null
   ) => {
     setMenuDrilledIn((prevMenuDrilledIn) => {
       const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx
index 69d8909fbe9..fc6864134c6 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -5,13 +6,13 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuDrilldownInitialState: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([
     'initial-state-rootMenu',
     'initial-state-drilldownMenuStart'
   ]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>(['group:start_rollout', 'group:app_grouping']);
-  const [menuHeights, setMenuHeights] = React.useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
-  const [activeMenu, setActiveMenu] = React.useState<string>('initial-state-drilldownMenuStartGrouping');
+  const [drilldownPath, setDrilldownPath] = useState<string[]>(['group:start_rollout', 'group:app_grouping']);
+  const [menuHeights, setMenuHeights] = useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
+  const [activeMenu, setActiveMenu] = useState<string>('initial-state-drilldownMenuStartGrouping');
 
   const drillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx
index d868155abdd..013ad5039bb 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -5,10 +6,10 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('functions-rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<any>({});
+  const [activeMenu, setActiveMenu] = useState<string>('functions-rootMenu');
 
   const drillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx b/packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx
index a5de6ba02d8..638168bfd0b 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx
@@ -1,12 +1,12 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Menu, MenuContent, MenuItem, MenuItemAction, MenuGroup, MenuList, Divider } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const MenuWithFavorites: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const [favorites, setFavorites] = React.useState<string[]>([]);
+  const [activeItem, setActiveItem] = useState(0);
+  const [favorites, setFavorites] = useState<string[]>([]);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithFooter.tsx b/packages/react-core/src/components/Menu/examples/MenuWithFooter.tsx
index eff3431967d..1302c5cda6e 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithFooter.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithFooter.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuList, MenuItem, MenuContent, MenuFooter, Button } from '@patternfly/react-core';
 
 export const MenuWithFooter: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithIcons.tsx b/packages/react-core/src/components/Menu/examples/MenuWithIcons.tsx
index ab9fdb780c1..32f91f9f7d8 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithIcons.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithIcons.tsx
@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuWithIcons: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithLinks.tsx b/packages/react-core/src/components/Menu/examples/MenuWithLinks.tsx
index 9fafd131a14..111ff3b93bc 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithLinks.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithLinks.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuWithLinks: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithSeparators.tsx b/packages/react-core/src/components/Menu/examples/MenuWithSeparators.tsx
index 6c319da9bc0..87b9ff12a2d 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithSeparators.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithSeparators.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Divider, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuWithSeparators: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithTitledGroups.tsx b/packages/react-core/src/components/Menu/examples/MenuWithTitledGroups.tsx
index 1ea4f912309..beac4de49eb 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithTitledGroups.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithTitledGroups.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, Divider } from '@patternfly/react-core';
 
 export const MenuWithTitledGroups: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithViewMore.tsx b/packages/react-core/src/components/Menu/examples/MenuWithViewMore.tsx
index f856a0968ad..481c16f50c5 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithViewMore.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithViewMore.tsx
@@ -1,11 +1,12 @@
+import { useEffect, useRef, useState } from 'react';
 import { Menu, MenuList, MenuItem, MenuContent, Spinner } from '@patternfly/react-core';
 
 export const MenuWithViewMore: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [numOptions, setNumOptions] = React.useState(3);
+  const [activeItem, setActiveItem] = useState<number | string>(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [numOptions, setNumOptions] = useState(3);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [menuOptions, setMenuOptions] = React.useState([
+  const [menuOptions, setMenuOptions] = useState([
     <MenuItem key={0} itemId={'view-more-0'}>
       Action
     </MenuItem>,
@@ -40,12 +41,12 @@ export const MenuWithViewMore: React.FunctionComponent = () => {
       Final option
     </MenuItem>
   ]);
-  const [visibleOptions, setVisibleOptions] = React.useState(menuOptions.slice(0, numOptions));
+  const [visibleOptions, setVisibleOptions] = useState(menuOptions.slice(0, numOptions));
 
-  const activeItemRef = React.useRef<HTMLElement>(null);
-  const viewMoreRef = React.useRef<HTMLElement>(null);
+  const activeItemRef = useRef<HTMLElement>(null);
+  const viewMoreRef = useRef<HTMLElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     activeItemRef.current?.focus();
   }, [visibleOptions]);
 
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
index 83bcbb26024..bed5edd7cae 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import './MenuToggle.css'
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -61,12 +61,13 @@ import { MenuToggle } from '@patternfly/react-core';
 To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle, Badge } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
   <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
-</React.Fragment>
+</Fragment>
 ```
 
 ### With icons
@@ -76,10 +77,11 @@ To add a recognizable icon to a menu toggle, use the `icon` property. The follow
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle
     icon={<CogIcon />}
     variant="primary"
@@ -99,7 +101,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
   >
     Icon
   </MenuToggle>
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### With avatar and text
@@ -109,14 +111,15 @@ You can also pass images into the `icon` property. The following example passes
 This can be used alongside a text label that provides more context for the image.
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle, Avatar } from '@patternfly/react-core';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
   <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
   <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
-</React.Fragment>
+</Fragment>
 ```
 
 ### Variant styles
@@ -124,10 +127,11 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
   <MenuToggle variant="primary" isExpanded>
     Expanded
@@ -135,7 +139,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
   <MenuToggle variant="primary" isDisabled>
     Disabled
   </MenuToggle>
-</React.Fragment>
+</Fragment>
 
 ```
 
@@ -146,16 +150,17 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`.
 If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab"/>
   {' '}
   <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab"/>
   {' '}
   <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab"/>
-</React.Fragment>
+</Fragment>
 ```
 
 ### Plain toggle with text label
@@ -163,9 +168,10 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
     Disabled
   </MenuToggle>{' '}
@@ -175,7 +181,7 @@ import { MenuToggle } from '@patternfly/react-core';
   <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
     Custom text (expanded)
   </MenuToggle>
-</React.Fragment>
+</Fragment>
 ```
 
 ### Split toggle with checkbox
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx
index 6cb4f054a31..6358c1a6566 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   MenuToggle,
   TextInputGroup,
@@ -8,7 +9,7 @@ import {
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const MenuToggleTypeahead: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState<string>('');
+  const [inputValue, setInputValue] = useState<string>('');
 
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
index 245ec9176b5..9577b2ede69 100644
--- a/packages/react-core/src/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -6,7 +6,7 @@ propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter']
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
diff --git a/packages/react-core/src/components/Modal/examples/ModalBasic.tsx b/packages/react-core/src/components/Modal/examples/ModalBasic.tsx
index d5ab9b2b079..7ebec3da305 100644
--- a/packages/react-core/src/components/Modal/examples/ModalBasic.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalBasic.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 export const ModalBasic: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomFocus.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomFocus.tsx
index 53f53e349d2..883594a06c7 100644
--- a/packages/react-core/src/components/Modal/examples/ModalCustomFocus.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalCustomFocus.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 export const ModalCustomFocus: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx
index ae88353ee72..419af47efa8 100644
--- a/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Modal,
@@ -15,7 +15,7 @@ import {
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 
 export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx
index 8741d4c68a6..97b292605a9 100644
--- a/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 export const ModalCustomTitleIcon: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx
index d464c5f4e1d..174eb56d57c 100644
--- a/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 export const ModalCustomWidth: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx b/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx
index 730782aaa6e..beccbdd3df6 100644
--- a/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalVariant } from '@patternfly/react-core';
 
 export const ModalNoHeaderFooter: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalSize.tsx b/packages/react-core/src/components/Modal/examples/ModalSize.tsx
index caef963c893..9898430d55a 100644
--- a/packages/react-core/src/components/Modal/examples/ModalSize.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalSize.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, Radio } from '@patternfly/react-core';
 
 export const ModalSize: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [selectedVariant, setSelectedVariant] = React.useState(ModalVariant.small);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedVariant, setSelectedVariant] = useState(ModalVariant.small);
 
   const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);
   const formatSizeVariantName = (variant: string) => capitalize(variant);
diff --git a/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx b/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx
index d422124089b..d9e13b60229 100644
--- a/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 export const ModalTitleIcon: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx b/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx
index 99d021475f1..a710ec1baa4 100644
--- a/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 export const ModalTopAligned: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx b/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx
index d92739aa7c6..b84a848cf0d 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core';
 
 export const ModalWithDescription: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
index 2425c07aab1..1e2104dbb69 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Dropdown,
@@ -14,8 +14,8 @@ import {
 } from '@patternfly/react-core';
 
 export const ModalWithDropdown: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx b/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx
index 50820630501..14283a69025 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Button,
   Form,
@@ -14,13 +14,13 @@ import {
 } from '@patternfly/react-core';
 
 export const ModalWithForm: React.FunctionComponent = () => {
-  const [isModalOpen, setModalOpen] = React.useState(false);
-  const [nameValue, setNameValue] = React.useState('');
-  const [emailValue, setEmailValue] = React.useState('');
-  const [addressValue, setAddressValue] = React.useState('');
-  const nameLabelHelpRef = React.useRef(null);
-  const emailLabelHelpRef = React.useRef(null);
-  const addressLabelHelpRef = React.useRef(null);
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [nameValue, setNameValue] = useState('');
+  const [emailValue, setEmailValue] = useState('');
+  const [addressValue, setAddressValue] = useState('');
+  const nameLabelHelpRef = useRef(null);
+  const emailLabelHelpRef = useRef(null);
+  const addressLabelHelpRef = useRef(null);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx b/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx
index 5d526d9fcdc..3e7a01ce6c0 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const ModalWithHelp: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithOverflowingContent.tsx b/packages/react-core/src/components/Modal/examples/ModalWithOverflowingContent.tsx
index 1efb9ca744c..ec40b93d228 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithOverflowingContent.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithOverflowingContent.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core';
 
 export const ModalWithOverflowingContent: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx b/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx
index 6aae60a84d1..cbf745b2316 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
 
 export const ModalWithWizard: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
index d704d98f25a..9ded7604897 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
@@ -7,6 +7,7 @@ propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
 ---
 
+import { useEffect, useState } from 'react';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 Multiple file upload is able to:
diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
index a26be260968..db53acd016d 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   MultipleFileUpload,
   MultipleFileUploadMain,
@@ -18,12 +19,12 @@ interface readFile {
 }
 
 export const MultipleFileUploadBasic: React.FunctionComponent = () => {
-  const [isHorizontal, setIsHorizontal] = React.useState(false);
-  const [fileUploadShouldFail, setFileUploadShouldFail] = React.useState(false);
-  const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
-  const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
-  const [showStatus, setShowStatus] = React.useState(false);
-  const [statusIcon, setStatusIcon] = React.useState('inProgress');
+  const [isHorizontal, setIsHorizontal] = useState(false);
+  const [fileUploadShouldFail, setFileUploadShouldFail] = useState(false);
+  const [currentFiles, setCurrentFiles] = useState<File[]>([]);
+  const [readFileData, setReadFileData] = useState<readFile[]>([]);
+  const [showStatus, setShowStatus] = useState(false);
+  const [statusIcon, setStatusIcon] = useState('inProgress');
 
   // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed
   if (!showStatus && currentFiles.length > 0) {
@@ -31,7 +32,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   }
 
   // determine the icon that should be shown for the overall status list
-  React.useEffect(() => {
+  useEffect(() => {
     if (readFileData.length < currentFiles.length) {
       setStatusIcon('inProgress');
     } else if (readFileData.every((file) => file.loadResult === 'success')) {
diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md
index 093e99d6083..df18298f17b 100644
--- a/packages/react-core/src/components/Nav/examples/Nav.md
+++ b/packages/react-core/src/components/Nav/examples/Nav.md
@@ -6,6 +6,7 @@ propComponents: ['Nav', 'NavList', 'NavGroup', 'NavItem', 'NavItemSeparator', 'N
 ouia: true
 ---
 
+import { useState } from 'react';
 import './nav.css';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
diff --git a/packages/react-core/src/components/Nav/examples/NavDefault.tsx b/packages/react-core/src/components/Nav/examples/NavDefault.tsx
index c3bc1386532..fd9beb83fd0 100644
--- a/packages/react-core/src/components/Nav/examples/NavDefault.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavDefault.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Nav, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavDefault: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);
diff --git a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx
index f4217edc458..ecb4366a7b7 100644
--- a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx
@@ -1,12 +1,10 @@
-import { type JSX, useState } from 'react';
-
 import { Nav, MenuContent, MenuItem, MenuList, DrilldownMenu, Menu } from '@patternfly/react-core';
 
 interface MenuHeights {
   [menuId: string]: number;
 }
 
-const subMenuTwo: JSX.Element = (
+const subMenuTwo: React.JSX.Element = (
   <DrilldownMenu id="nav-drilldown-subMenu-2">
     <MenuItem itemId="nav-drilldown-subMenu-2-breadcrumb" direction="up">
       SubMenu 1 - Item 1
@@ -23,7 +21,7 @@ const subMenuTwo: JSX.Element = (
   </DrilldownMenu>
 );
 
-const subMenuOne: JSX.Element = (
+const subMenuOne: React.JSX.Element = (
   <DrilldownMenu id="nav-drilldown-subMenu-1">
     <MenuItem itemId="nav-drilldown-subMenu-1-breadcrumb" direction="up">
       Item 1
diff --git a/packages/react-core/src/components/Nav/examples/NavExpandable.tsx b/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
index 3461449e6fc..8fc66179cb6 100644
--- a/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavExpandableExample: React.FunctionComponent = () => {
-  const [activeGroup, setActiveGroup] = React.useState('nav-expandable-group-1');
-  const [activeItem, setActiveItem] = React.useState('nav-expandable-group-1_item-1');
+  const [activeGroup, setActiveGroup] = useState('nav-expandable-group-1');
+  const [activeItem, setActiveItem] = useState('nav-expandable-group-1_item-1');
 
   const onSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx b/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx
index 5c50aef9d32..d832d1d31ad 100644
--- a/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavExpandableThirdLevel: React.FunctionComponent = () => {
-  const [activeGroup, setActiveGroup] = React.useState('nav-expand3rd-group-1');
-  const [activeItem, setActiveItem] = React.useState('nav-expand3rd-group-1_item-1');
+  const [activeGroup, setActiveGroup] = useState('nav-expand3rd-group-1');
+  const [activeItem, setActiveItem] = useState('nav-expand3rd-group-1_item-1');
 
   const onSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/components/Nav/examples/NavFlyout.tsx b/packages/react-core/src/components/Nav/examples/NavFlyout.tsx
index a0d42e028d7..27a5f1a9ec7 100644
--- a/packages/react-core/src/components/Nav/examples/NavFlyout.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavFlyout.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Nav, NavItem, NavList, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const NavFlyout: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState('nav-flyout-default-link-1');
+  const [activeItem, setActiveItem] = useState('nav-flyout-default-link-1');
 
   const onSelect = (event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as string);
diff --git a/packages/react-core/src/components/Nav/examples/NavGrouped.tsx b/packages/react-core/src/components/Nav/examples/NavGrouped.tsx
index e6288c70a61..e13dd402471 100644
--- a/packages/react-core/src/components/Nav/examples/NavGrouped.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavGrouped.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Nav, NavItem, NavGroup } from '@patternfly/react-core';
 
 export const NavGrouped: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState('group-1_item-1');
+  const [activeItem, setActiveItem] = useState('group-1_item-1');
 
   const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as string);
diff --git a/packages/react-core/src/components/Nav/examples/NavHorizontalNav.tsx b/packages/react-core/src/components/Nav/examples/NavHorizontalNav.tsx
index 3ed10875e86..e998f9332ea 100644
--- a/packages/react-core/src/components/Nav/examples/NavHorizontalNav.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavHorizontalNav.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Nav, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavHorizontalNav: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);
diff --git a/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx b/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx
index 85f0c8726a7..5eb4823580e 100644
--- a/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Nav, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavHorizontalSubNav: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);
diff --git a/packages/react-core/src/components/Nav/examples/NavIcons.tsx b/packages/react-core/src/components/Nav/examples/NavIcons.tsx
index 8650cf9a922..47e7cbf4098 100644
--- a/packages/react-core/src/components/Nav/examples/NavIcons.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavIcons.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Nav, NavItem, NavList } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
@@ -5,7 +6,7 @@ import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 
 export const NavIcons: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);
diff --git a/packages/react-core/src/components/Nav/examples/NavMixed.tsx b/packages/react-core/src/components/Nav/examples/NavMixed.tsx
index a53de216055..c867d0a4cd9 100644
--- a/packages/react-core/src/components/Nav/examples/NavMixed.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavMixed.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core';
 
 export const NavMixed: React.FunctionComponent = () => {
-  const [activeGroup, setActiveGroup] = React.useState('');
-  const [activeItem, setActiveItem] = React.useState('ungrouped_item-1');
+  const [activeGroup, setActiveGroup] = useState('');
+  const [activeItem, setActiveItem] = useState('ungrouped_item-1');
 
   const onSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md
index b6fa9eb01b6..4d0d3b7a662 100644
--- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md
+++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md
@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-notification-badge
 propComponents: ['NotificationBadge']
 ---
 
+import { useState } from 'react';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ## Examples
diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx
index 24a86c1b1dd..29992671144 100644
--- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx
+++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
 
 export const NotificationBadgeBasic: React.FunctionComponent = () => {
-  const [readExpanded, setReadExpanded] = React.useState(false);
-  const [unreadExpanded, setUnreadExpanded] = React.useState(false);
-  const [attentionExpanded, setAttentionExpanded] = React.useState(false);
+  const [readExpanded, setReadExpanded] = useState(false);
+  const [unreadExpanded, setUnreadExpanded] = useState(false);
+  const [attentionExpanded, setAttentionExpanded] = useState(false);
 
   const onReadClick = () => {
     setReadExpanded(!readExpanded);
diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
index 6fc325742eb..eea9b881358 100644
--- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
+++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
 
 export const NotificationBadgeWithCount: React.FunctionComponent = () => {
-  const [readExpanded, setReadExpanded] = React.useState(false);
-  const [unreadExpanded, setUnreadExpanded] = React.useState(false);
-  const [attentionExpanded, setAttentionExpanded] = React.useState(false);
+  const [readExpanded, setReadExpanded] = useState(false);
+  const [unreadExpanded, setUnreadExpanded] = useState(false);
+  const [attentionExpanded, setAttentionExpanded] = useState(false);
 
   const onReadClick = () => {
     setReadExpanded(!readExpanded);
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
index 9b8d1c1797c..c437ed981ce 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
@@ -16,6 +16,7 @@ propComponents:
   ]
 ---
 
+import { useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index 778f977b477..90c4a1d907b 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   NotificationDrawer,
   NotificationDrawerBody,
@@ -15,7 +16,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const NotificationDrawerBasic: React.FunctionComponent = () => {
-  const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false));
+  const [isOpenMap, setIsOpenMap] = useState(new Array(7).fill(false));
 
   const onToggle = (index: number) => () => {
     const newState = [...isOpenMap.slice(0, index), !isOpenMap[index], ...isOpenMap.slice(index + 1)];
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
index b3c05e21b35..5c857d7cf2d 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   EmptyState,
@@ -24,10 +25,10 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const NotificationDrawerGroups: React.FunctionComponent = () => {
-  const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false);
-  const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true);
-  const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false);
-  const [isOpenMap, setIsOpenMap] = React.useState({});
+  const [firstGroupExpanded, setFirstGroupExpanded] = useState(false);
+  const [secondGroupExpanded, setSecondGroupExpanded] = useState(true);
+  const [thirdGroupExpanded, setThirdGroupExpanded] = useState(false);
+  const [isOpenMap, setIsOpenMap] = useState({});
 
   const onToggle = (id: string) => {
     setIsOpenMap((prevState) => ({ ...prevState, [id]: !prevState[id] }));
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx
index 5d28f124e69..ebb1d9da483 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   EmptyState,
@@ -18,9 +19,9 @@ import {
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const NotificationDrawerLightweight: React.FunctionComponent = () => {
-  const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false);
-  const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true);
-  const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false);
+  const [firstGroupExpanded, setFirstGroupExpanded] = useState(false);
+  const [secondGroupExpanded, setSecondGroupExpanded] = useState(true);
+  const [thirdGroupExpanded, setThirdGroupExpanded] = useState(false);
 
   const toggleFirstDrawer = (_event: any, value: boolean) => {
     setFirstGroupExpanded(value);
diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInput.md b/packages/react-core/src/components/NumberInput/examples/NumberInput.md
index aae81092837..c2336cc9481 100644
--- a/packages/react-core/src/components/NumberInput/examples/NumberInput.md
+++ b/packages/react-core/src/components/NumberInput/examples/NumberInput.md
@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-number-input
 propComponents: ['NumberInput']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useReducer, useState } from 'react';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx
index 1fee41baee3..8c2810c6895 100644
--- a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx
+++ b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputCustomStep: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<number | ''>(90);
+  const [value, setValue] = useState<number | ''>(90);
   const step = 3;
 
   const stepper = (stepValue: number) => {
diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx
index 09f79ff90e5..311e21ee7fa 100644
--- a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx
+++ b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<number | ''>(90);
+  const [value, setValue] = useState<number | ''>(90);
   const minValue = 90;
   const maxValue = 100;
   const step = 3;
diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx
index b4581a34533..3d8aa925f3e 100644
--- a/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx
+++ b/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputDefault: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<number | ''>(90);
+  const [value, setValue] = useState<number | ''>(90);
 
   const onMinus = () => {
     const newValue = (value || 0) - 1;
diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx
index 92f56e999c8..cdf7d216f50 100644
--- a/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx
+++ b/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputDisabled: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<number | ''>(100);
+  const [value, setValue] = useState<number | ''>(100);
   const minValue = 0;
   const maxValue = 100;
 
diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx
index 18c9ae808cb..888cde28ffb 100644
--- a/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx
+++ b/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputUnit: React.FunctionComponent = () => {
-  const [value1, setValue1] = React.useState<number | ''>(90);
-  const [value2, setValue2] = React.useState<number | ''>(Number((1.0).toFixed(2)));
+  const [value1, setValue1] = useState<number | ''>(90);
+  const [value2, setValue2] = useState<number | ''>(Number((1.0).toFixed(2)));
 
   const onMinus1 = () => setValue1((value1 || 0) - 1);
   const onChange1 = (event: React.FormEvent<HTMLInputElement>) => {
diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx
index c52cef28436..8341c9d8dc1 100644
--- a/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx
+++ b/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputUnitThreshold: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<number | ''>(0);
+  const [value, setValue] = useState<number | ''>(0);
   const minValue = 0;
   const maxValue = 10;
 
diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx
index e06ba3c14bc..5735a850ff8 100644
--- a/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx
+++ b/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx
@@ -1,11 +1,11 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputVaryingSizes: React.FunctionComponent = () => {
-  const [input1Value, setInput1Value] = React.useState<number | ''>(1);
-  const [input2Value, setInput2Value] = React.useState<number | ''>(1234567890);
-  const [input3Value, setInput3Value] = React.useState<number | ''>(5);
-  const [input4Value, setInput4Value] = React.useState<number | ''>(12345);
+  const [input1Value, setInput1Value] = useState<number | ''>(1);
+  const [input2Value, setInput2Value] = useState<number | ''>(1234567890);
+  const [input3Value, setInput3Value] = useState<number | ''>(5);
+  const [input4Value, setInput4Value] = useState<number | ''>(12345);
 
   const onChange = (
     event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx
index 95a9c18e942..bbf2b9eb7a5 100644
--- a/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx
+++ b/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx
@@ -1,11 +1,12 @@
+import { useReducer, useState } from 'react';
 import { NumberInput, ValidatedOptions } from '@patternfly/react-core';
 
 export const NumberInputWithStatus: React.FunctionComponent = () => {
   const max = 10;
   const min = 0;
 
-  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.success);
-  const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5);
+  const [validated, setValidated] = useState<ValidatedOptions>(ValidatedOptions.success);
+  const [value, setValue] = useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5);
 
   const onPlus = () => {
     const newVal = (value || 0) + 1;
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
index 06ad970c385..e73498c856d 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
@@ -13,6 +13,7 @@ propComponents:
   ]
 ---
 
+import { useRef, useState } from 'react';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
index bf7da51a3fc..e124e07a507 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   OverflowMenu,
   OverflowMenuControl,
@@ -14,9 +15,9 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [containerWidth, setContainerWidth] = React.useState(100);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [containerWidth, setContainerWidth] = useState(100);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
index 146fd403b0a..4b2b93c271a 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   OverflowMenu,
   OverflowMenuControl,
@@ -17,7 +18,7 @@ import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 
 export const OverflowMenuGroupTypes: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
index 7af612a39db..0484322ebfa 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   OverflowMenu,
   OverflowMenuControl,
@@ -17,7 +18,7 @@ import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 
 export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
index 734ba6b8d0e..508b9dccc7b 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   OverflowMenu,
   OverflowMenuControl,
@@ -14,7 +15,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const OverflowMenuPersistent: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
index 92069de66eb..25998691118 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   OverflowMenu,
   OverflowMenuControl,
@@ -12,7 +13,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index 31bed9618e7..00fb8080b65 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -1,4 +1,4 @@
-import { Component, createRef, type JSX } from 'react';
+import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
@@ -299,7 +299,7 @@ class Page extends Component<PageProps, PageState> {
       </PageGroup>
     ) : null;
 
-    const Component: keyof JSX.IntrinsicElements = mainComponent;
+    const Component: keyof React.JSX.IntrinsicElements = mainComponent;
 
     const main = (
       <div className={css(styles.pageMainContainer, isContentFilled && styles.modifiers.fill)}>
diff --git a/packages/react-core/src/components/Page/PageSection.tsx b/packages/react-core/src/components/Page/PageSection.tsx
index 774ba67a3c3..f1f829ac2da 100644
--- a/packages/react-core/src/components/Page/PageSection.tsx
+++ b/packages/react-core/src/components/Page/PageSection.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, type JSX } from 'react';
+import { useContext, useEffect } from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
@@ -66,7 +66,7 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
    */
   'aria-label'?: string;
   /** Sets the base component to render. Defaults to section */
-  component?: keyof JSX.IntrinsicElements;
+  component?: keyof React.JSX.IntrinsicElements;
 }
 
 const variantType = {
diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md
index cf653fe4899..59f0f02fb7b 100644
--- a/packages/react-core/src/components/Page/examples/Page.md
+++ b/packages/react-core/src/components/Page/examples/Page.md
@@ -6,6 +6,7 @@ propComponents:
   ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
 
+import { useState } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
diff --git a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
index f7cd297809d..b475f1da08d 100644
--- a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -21,7 +22,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);
diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
index fea37838ef4..4c113527085 100644
--- a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -24,7 +25,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageGroupSection: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
index 8e88b709566..96eabf69958 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -17,7 +18,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
index 6e7713c6e64..a510177e9d3 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -17,7 +18,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);
diff --git a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
index ac4135dd7c8..9b4943792bb 100644
--- a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -17,7 +18,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMultipleSidebarBody: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);
diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
index 299d572b90e..f14baa5cc15 100644
--- a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -17,7 +18,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageVerticalNav: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);
diff --git a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
index 21927ad8bfb..10286dc1fc5 100644
--- a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
+++ b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -17,7 +18,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageWithOrWithoutFill: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);
diff --git a/packages/react-core/src/components/Pagination/examples/Pagination.md b/packages/react-core/src/components/Pagination/examples/Pagination.md
index 2ba27a5a928..569167327a9 100644
--- a/packages/react-core/src/components/Pagination/examples/Pagination.md
+++ b/packages/react-core/src/components/Pagination/examples/Pagination.md
@@ -6,7 +6,7 @@ propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggl
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx b/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx
index eed56b6cf43..de343bfb221 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Pagination, PaginationVariant } from '@patternfly/react-core';
 
 export const PaginationBottom: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx b/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx
index afa53d3b0a6..d59928fbae0 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 
 export const PaginationCompact: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx b/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx
index 61abb5a270c..27d120356a5 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 
 export const PaginationDisabled: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx b/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx
index 584b91198ef..957321f57fc 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 
 export const PaginationIndeterminate: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationInset.tsx b/packages/react-core/src/components/Pagination/examples/PaginationInset.tsx
index 44bcc59ab76..e9f281b9c25 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationInset.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationInset.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 
 export const PaginationInset: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx b/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx
index f9d9a1b2ee2..9b1619c4cf2 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 
 export const PaginationNoItems: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx b/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx
index a22d8841312..fa2548a091e 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 
 export const PaginationOffset: React.FunctionComponent = () => {
-  const [offset, setOffset] = React.useState(7);
-  const [perPage, setPerPage] = React.useState(20);
+  const [offset, setOffset] = useState(7);
+  const [perPage, setPerPage] = useState(20);
 
   const onSetPage = (
     _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx b/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx
index 7a3cefda36f..ce396b01ba4 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 
 export const PaginationOnePage: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx b/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx
index 6d31193a90c..f68868a9aae 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx
@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
 
 export const PaginationSticky: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(100);
-  const [isTopSticky, setIsTopSticky] = React.useState(true);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(100);
+  const [isTopSticky, setIsTopSticky] = useState(true);
   const itemCount = 523;
 
   const onToggleSticky = () => {
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx b/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx
index b03bc13fdb8..3bd8ccb4bec 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 
 export const PaginationTop: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
diff --git a/packages/react-core/src/components/Popover/examples/Popover.md b/packages/react-core/src/components/Popover/examples/Popover.md
index 0c5655987e8..2ccaa9d00ee 100644
--- a/packages/react-core/src/components/Popover/examples/Popover.md
+++ b/packages/react-core/src/components/Popover/examples/Popover.md
@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-popover
 propComponents: ['Popover']
 ---
 
+import { useRef, useState } from 'react';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
diff --git a/packages/react-core/src/components/Popover/examples/PopoverAdvanced.tsx b/packages/react-core/src/components/Popover/examples/PopoverAdvanced.tsx
index 5ebed4efc3a..9c856fce8c2 100644
--- a/packages/react-core/src/components/Popover/examples/PopoverAdvanced.tsx
+++ b/packages/react-core/src/components/Popover/examples/PopoverAdvanced.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { Popover, PopoverPosition, Checkbox, Button } from '@patternfly/react-core';
 
 export const PopoverAdvanced: React.FunctionComponent = () => {
-  const [position, setPosition] = React.useState(PopoverPosition.auto);
-  const [show, setShow] = React.useState(false);
-  const [keepInViewChecked, setKeepInViewChecked] = React.useState(true);
+  const [position, setPosition] = useState(PopoverPosition.auto);
+  const [show, setShow] = useState(false);
+  const [keepInViewChecked, setKeepInViewChecked] = useState(true);
 
   const handleKeepInViewChange = (checked: boolean) => {
     setKeepInViewChecked(checked);
diff --git a/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx b/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx
index de2bccb8ef3..bd1bdab2851 100644
--- a/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx
+++ b/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Popover, Button } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
@@ -6,7 +7,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const AlertPopover: React.FunctionComponent = () => {
-  const [alertSeverityVariant, setAlertSeverityVariant] = React.useState('default');
+  const [alertSeverityVariant, setAlertSeverityVariant] = useState('default');
 
   const alertIcons = {
     custom: <BellIcon />,
diff --git a/packages/react-core/src/components/Popover/examples/PopoverCloseControlled.tsx b/packages/react-core/src/components/Popover/examples/PopoverCloseControlled.tsx
index 8ea7d0d0572..403bb3bee50 100644
--- a/packages/react-core/src/components/Popover/examples/PopoverCloseControlled.tsx
+++ b/packages/react-core/src/components/Popover/examples/PopoverCloseControlled.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Popover, Button } from '@patternfly/react-core';
 
 export const PopoverCloseControlled: React.FunctionComponent = () => {
-  const [isVisible, setIsVisible] = React.useState(false);
+  const [isVisible, setIsVisible] = useState(false);
 
   return (
     <div style={{ margin: '50px' }}>
diff --git a/packages/react-core/src/components/Popover/examples/PopoverReactRef.tsx b/packages/react-core/src/components/Popover/examples/PopoverReactRef.tsx
index f800a87c968..923c355a8f6 100644
--- a/packages/react-core/src/components/Popover/examples/PopoverReactRef.tsx
+++ b/packages/react-core/src/components/Popover/examples/PopoverReactRef.tsx
@@ -1,7 +1,8 @@
+import { useRef } from 'react';
 import { Popover } from '@patternfly/react-core';
 
 export const PopoverReactRef: React.FunctionComponent = () => {
-  const popoverRef = React.useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLButtonElement>(null);
 
   return (
     <div style={{ margin: '50px' }}>
diff --git a/packages/react-core/src/components/Progress/examples/Progress.md b/packages/react-core/src/components/Progress/examples/Progress.md
index 9289969c41b..6e4ddd905bb 100644
--- a/packages/react-core/src/components/Progress/examples/Progress.md
+++ b/packages/react-core/src/components/Progress/examples/Progress.md
@@ -5,6 +5,8 @@ cssPrefix: pf-v6-c-progress
 propComponents: ['Progress']
 ---
 
+import { useState } from 'react';
+
 ## Examples
 ### Basic
 ```ts file="./ProgressBasic.tsx"
diff --git a/packages/react-core/src/components/Progress/examples/ProgressHelperText.tsx b/packages/react-core/src/components/Progress/examples/ProgressHelperText.tsx
index 13c2255b8c6..98974b11d50 100644
--- a/packages/react-core/src/components/Progress/examples/ProgressHelperText.tsx
+++ b/packages/react-core/src/components/Progress/examples/ProgressHelperText.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { Progress, ProgressProps, HelperText, HelperTextItem, Radio } from '@patternfly/react-core';
 
 export const ProgressHelperText: React.FunctionComponent = () => {
   type ProgressVariant = ProgressProps['variant'];
 
-  const [selectedVariant, setSelectedVariant] = React.useState<ProgressVariant>(undefined);
+  const [selectedVariant, setSelectedVariant] = useState<ProgressVariant>(undefined);
 
   const progressVariants: ProgressVariant[] = [undefined, 'success', 'warning', 'danger'];
 
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md
index ac021e6ee42..7d5c3500fb0 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md
@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
 
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx
index bd1b04863a1..37ddee7736f 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core';
 
 export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () => {
-  const [isVertical, setIsVertical] = React.useState(false);
-  const [isCenterAligned, setIsCenterAligned] = React.useState(false);
+  const [isVertical, setIsVertical] = useState(false);
+  const [isCenterAligned, setIsCenterAligned] = useState(false);
 
   return (
     <Fragment>
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx
index 7f07918d82f..ce3c488f326 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core';
 
 export const ProgressStepperCompact: React.FunctionComponent = () => {
-  const [isVertical, setIsVertical] = React.useState(false);
-  const [isCenterAligned, setIsCenterAligned] = React.useState(false);
+  const [isVertical, setIsVertical] = useState(false);
+  const [isCenterAligned, setIsCenterAligned] = useState(false);
 
   return (
     <Fragment>
diff --git a/packages/react-core/src/components/Radio/examples/Radio.md b/packages/react-core/src/components/Radio/examples/Radio.md
index 13e954222c8..89235b8cdcf 100644
--- a/packages/react-core/src/components/Radio/examples/Radio.md
+++ b/packages/react-core/src/components/Radio/examples/Radio.md
@@ -7,7 +7,7 @@ propComponents: ['Radio']
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/Radio/examples/RadioControlled.tsx b/packages/react-core/src/components/Radio/examples/RadioControlled.tsx
index 12a66ad7739..75f2fd822c0 100644
--- a/packages/react-core/src/components/Radio/examples/RadioControlled.tsx
+++ b/packages/react-core/src/components/Radio/examples/RadioControlled.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Radio } from '@patternfly/react-core';
 
 export const RadioControlled: React.FunctionComponent = () => {
-  const [check1, setCheck1] = React.useState(false);
+  const [check1, setCheck1] = useState(false);
 
   const handleChange = () => {
     setCheck1(true);
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInput.md b/packages/react-core/src/components/SearchInput/examples/SearchInput.md
index 0fed2d947bb..0c855fde1f2 100644
--- a/packages/react-core/src/components/SearchInput/examples/SearchInput.md
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInput.md
@@ -5,6 +5,7 @@ cssPrefix: 'pf-v6-c-search-input'
 propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
 ---
 
+import { useRef, useState } from 'react';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
 ## Examples
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx
index 1aa3fd6641d..194b4bc8f40 100644
--- a/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx
@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 
 export const SearchInputAdvanced: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('username:player firstname:john');
-  const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = React.useState(false);
-  const [useCustomFooter, setUseCustomFooter] = React.useState(false);
+  const [value, setValue] = useState('username:player firstname:john');
+  const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = useState(false);
+  const [useCustomFooter, setUseCustomFooter] = useState(false);
 
   const toggleDelimiter = (checked: boolean) => {
     setValue(value.replace(/:|=/g, checked ? '=' : ':'));
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx
index fff5d272e0b..acef1f03303 100644
--- a/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { SearchInput } from '@patternfly/react-core';
 
 export const SearchInputBasic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
 
   const onChange = (value: string) => {
     setValue(value);
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx
index 076eb4a067c..84b621b3e11 100644
--- a/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx
@@ -1,8 +1,9 @@
+import { useRef, useState } from 'react';
 import { SearchInput, Button } from '@patternfly/react-core';
 
 export const SearchInputFocusSearch: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const ref: React.MutableRefObject<HTMLInputElement | null> = React.useRef(null);
+  const [value, setValue] = useState('');
+  const ref: React.MutableRefObject<HTMLInputElement | null> = useRef(null);
 
   return (
     <>
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx
index cabb37f388f..315630d00a2 100644
--- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { SearchInput } from '@patternfly/react-core';
 
 export const SearchInputWithExpandable: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [value, setValue] = useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onChange = (value: string) => {
     setValue(value);
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx
index a8725e72cce..b768bca58ab 100644
--- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { SearchInput } from '@patternfly/react-core';
 
 export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [resultsCount, setResultsCount] = React.useState(0);
-  const [currentResult, setCurrentResult] = React.useState(1);
+  const [value, setValue] = useState('');
+  const [resultsCount, setResultsCount] = useState(0);
+  const [currentResult, setCurrentResult] = useState(1);
 
   const onChange = (value: string) => {
     setValue(value);
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx
index 51e4c7f863b..5fe5f7a783e 100644
--- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { SearchInput } from '@patternfly/react-core';
 
 export const SearchInputWithResultCount: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [resultsCount, setResultsCount] = React.useState(0);
+  const [value, setValue] = useState('');
+  const [resultsCount, setResultsCount] = useState(0);
 
   const onChange = (value: string) => {
     setValue(value);
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx
index 9f488b4a14e..9b9dd6bf011 100644
--- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx
+++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { SearchInput } from '@patternfly/react-core';
 
 export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
 
   return (
     <SearchInput
diff --git a/packages/react-core/src/components/Select/examples/Select.md b/packages/react-core/src/components/Select/examples/Select.md
index 0bc0fbd9162..b594d37875e 100644
--- a/packages/react-core/src/components/Select/examples/Select.md
+++ b/packages/react-core/src/components/Select/examples/Select.md
@@ -8,7 +8,7 @@ propComponents:
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
diff --git a/packages/react-core/src/components/Select/examples/SelectBasic.tsx b/packages/react-core/src/components/Select/examples/SelectBasic.tsx
index 0edba4c5b9c..948c1c9a264 100644
--- a/packages/react-core/src/components/Select/examples/SelectBasic.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectBasic.tsx
@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Checkbox } from '@patternfly/react-core';
 
 export const SelectBasic: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
-  const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select a value');
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx b/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx
index a3d3105caeb..2a1d582d83c 100644
--- a/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Badge } from '@patternfly/react-core';
 
 export const SelectCheckbox: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Select/examples/SelectFooter.tsx b/packages/react-core/src/components/Select/examples/SelectFooter.tsx
index d2333c630cb..fa61dfd213a 100644
--- a/packages/react-core/src/components/Select/examples/SelectFooter.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectFooter.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { MenuToggle, MenuFooter, Select, SelectList, SelectOption, Button } from '@patternfly/react-core';
 
 export const SelectFooter: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selected, setSelected] = useState<string>('Select a value');
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Select/examples/SelectGrouped.tsx b/packages/react-core/src/components/Select/examples/SelectGrouped.tsx
index 6108a41f266..4a592822d78 100644
--- a/packages/react-core/src/components/Select/examples/SelectGrouped.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectGrouped.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Select,
   SelectOption,
@@ -9,8 +10,8 @@ import {
 } from '@patternfly/react-core';
 
 export const SelectGrouped: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select a value');
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
index 640043aeb24..20095710a3d 100644
--- a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Select,
   SelectOption,
@@ -24,17 +25,17 @@ const initialSelectOptions: SelectOptionProps[] = [
 ];
 
 export const SelectMultiTypeahead: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState<string>('');
-  const [selected, setSelected] = React.useState<string[]>([]);
-  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>('');
+  const [selected, setSelected] = useState<string[]>([]);
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const textInputRef = useRef<HTMLInputElement>(undefined);
 
   const NO_RESULTS = 'no results';
 
-  React.useEffect(() => {
+  useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
     // Filter menu items based on the text input value when one exists
diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx
index 5c55ab6eaa1..9241c38fa18 100644
--- a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Select,
   SelectOption,
@@ -22,18 +23,18 @@ const initialSelectOptions: SelectOptionProps[] = [
 ];
 
 export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState<string>('');
-  const [selected, setSelected] = React.useState<string[]>([]);
-  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const [placeholder, setPlaceholder] = React.useState('0 items selected');
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>('');
+  const [selected, setSelected] = useState<string[]>([]);
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const [placeholder, setPlaceholder] = useState('0 items selected');
+  const textInputRef = useRef<HTMLInputElement>(undefined);
 
   const NO_RESULTS = 'no results';
 
-  React.useEffect(() => {
+  useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
     // Filter menu items based on the text input value when one exists
@@ -63,7 +64,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
     setSelectOptions(newSelectOptions);
   }, [inputValue]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setPlaceholder(`${selected.length} item${selected.length !== 1 ? 's' : ''} selected`);
   }, [selected]);
 
diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
index 1b718d8c954..e7e2be5428c 100644
--- a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Select,
   SelectOption,
@@ -24,18 +25,18 @@ let initialSelectOptions: SelectOptionProps[] = [
 ];
 
 export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState<string>('');
-  const [selected, setSelected] = React.useState<string[]>([]);
-  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const [onCreation, setOnCreation] = React.useState<boolean>(false); // Boolean to refresh filter state after new option is created
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>('');
+  const [selected, setSelected] = useState<string[]>([]);
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const [onCreation, setOnCreation] = useState<boolean>(false); // Boolean to refresh filter state after new option is created
+  const textInputRef = useRef<HTMLInputElement>(undefined);
 
   const CREATE_NEW = 'create';
 
-  React.useEffect(() => {
+  useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
     // Filter menu items based on the text input value when one exists
diff --git a/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx b/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx
index 6a4030af40f..94ee3cd4d7c 100644
--- a/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const SelectOptionVariations: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select a value');
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx
index b95a28c7984..b7a02d350ab 100644
--- a/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Select,
   SelectOption,
@@ -22,18 +23,18 @@ const initialSelectOptions: SelectOptionProps[] = [
 ];
 
 export const SelectTypeahead: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('');
-  const [inputValue, setInputValue] = React.useState<string>('');
-  const [filterValue, setFilterValue] = React.useState<string>('');
-  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('');
+  const [inputValue, setInputValue] = useState<string>('');
+  const [filterValue, setFilterValue] = useState<string>('');
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const textInputRef = useRef<HTMLInputElement>(undefined);
 
   const NO_RESULTS = 'no results';
 
-  React.useEffect(() => {
+  useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
     // Filter menu items based on the text input value when one exists
diff --git a/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx
index 47a79de6b6a..5d9ec246281 100644
--- a/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Select,
   SelectOption,
@@ -22,18 +23,18 @@ let initialSelectOptions: SelectOptionProps[] = [
 ];
 
 export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('');
-  const [inputValue, setInputValue] = React.useState<string>('');
-  const [filterValue, setFilterValue] = React.useState<string>('');
-  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('');
+  const [inputValue, setInputValue] = useState<string>('');
+  const [filterValue, setFilterValue] = useState<string>('');
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const textInputRef = useRef<HTMLInputElement>(undefined);
 
   const CREATE_NEW = 'create';
 
-  React.useEffect(() => {
+  useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
     // Filter menu items based on the text input value when one exists
diff --git a/packages/react-core/src/components/Select/examples/SelectValidated.tsx b/packages/react-core/src/components/Select/examples/SelectValidated.tsx
index 055a4666b35..68dfa2db495 100644
--- a/packages/react-core/src/components/Select/examples/SelectValidated.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectValidated.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Select,
   SelectOption,
@@ -11,9 +11,9 @@ import {
 } from '@patternfly/react-core';
 
 export const SelectValidated: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
-  const [status, setStatus] = React.useState<MenuToggleStatus>();
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select a value');
+  const [status, setStatus] = useState<MenuToggleStatus>();
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/components/Select/examples/SelectViewMore.tsx b/packages/react-core/src/components/Select/examples/SelectViewMore.tsx
index f1513b418c4..b72a241f3ac 100644
--- a/packages/react-core/src/components/Select/examples/SelectViewMore.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectViewMore.tsx
@@ -1,12 +1,13 @@
+import { useEffect, useRef, useState } from 'react';
 import { Select, SelectOption, SelectList, MenuToggle, Spinner } from '@patternfly/react-core';
 
 export const SelectViewMore: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select a value');
+  const [activeItem, setActiveItem] = useState<number | string>(0);
+  const [isLoading, setIsLoading] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [selectOptions, setSelectOptions] = React.useState([
+  const [selectOptions, setSelectOptions] = useState([
     <SelectOption key={0} value="Option 1">
       Option 1
     </SelectOption>,
@@ -38,13 +39,13 @@ export const SelectViewMore: React.FunctionComponent = () => {
       Final Option 10
     </SelectOption>
   ]);
-  const [numOptions, setNumOptions] = React.useState(3);
-  const [visibleOptions, setVisibleOptions] = React.useState(selectOptions.slice(0, numOptions));
-  const activeItemRef = React.useRef<HTMLElement>(null);
-  const viewMoreRef = React.useRef<HTMLLIElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const [numOptions, setNumOptions] = useState(3);
+  const [visibleOptions, setVisibleOptions] = useState(selectOptions.slice(0, numOptions));
+  const activeItemRef = useRef<HTMLElement>(null);
+  const viewMoreRef = useRef<HTMLLIElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     activeItemRef.current?.focus();
   }, [visibleOptions]);
 
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleList.md b/packages/react-core/src/components/SimpleList/examples/SimpleList.md
index 34f04661ae0..bf7d3887cbd 100644
--- a/packages/react-core/src/components/SimpleList/examples/SimpleList.md
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleList.md
@@ -4,6 +4,7 @@ section: components
 cssPrefix: pf-v6-c-simple-list
 propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 ---
+import { useState } from 'react';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
index a80d99e21b7..2fc63143e10 100644
--- a/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { SimpleList, SimpleListItem, SimpleListItemProps } from '@patternfly/react-core';
 
 export const SimpleListUncontrolled: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (
     selectedItem: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,
diff --git a/packages/react-core/src/components/Slider/examples/Slider.md b/packages/react-core/src/components/Slider/examples/Slider.md
index ea765c9feeb..8c74eea7be0 100644
--- a/packages/react-core/src/components/Slider/examples/Slider.md
+++ b/packages/react-core/src/components/Slider/examples/Slider.md
@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-slider
 propComponents: ['Slider', 'SliderStepObject']
 ---
 
+import { useState } from 'react';
 import { Slider, Button, Content, ContentVariants } from '@patternfly/react-core';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
diff --git a/packages/react-core/src/components/Slider/examples/SliderActions.tsx b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
index 6715965714e..1b4051008cb 100644
--- a/packages/react-core/src/components/Slider/examples/SliderActions.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent, Button, Content } from '@patternfly/react-core';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
@@ -5,10 +6,10 @@ import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
 import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon';
 
 export const SliderActions: React.FunctionComponent = () => {
-  const [value1, setValue1] = React.useState(50);
-  const [value2, setValue2] = React.useState(50);
-  const [inputValue, setInputValue] = React.useState(50);
-  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [value1, setValue1] = useState(50);
+  const [value2, setValue2] = useState(50);
+  const [inputValue, setInputValue] = useState(50);
+  const [isDisabled, setIsDisabled] = useState(false);
 
   const onChange1 = (_event: SliderOnChangeEvent, value: number) => {
     setValue1(Math.floor(Number(value)));
diff --git a/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx b/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx
index 1317bbc3078..a525498d215 100644
--- a/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { Checkbox, Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 
 export const SliderContinuous: React.FunctionComponent = () => {
-  const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
-  const [value, setValue] = React.useState(50);
-  const [valueCustom, setValueCustom] = React.useState(50);
+  const [hasTooltipOverThumb, setHasTooltipOverThumb] = useState(false);
+  const [value, setValue] = useState(50);
+  const [valueCustom, setValueCustom] = useState(50);
 
   return (
     <>
diff --git a/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx
index 48eff696133..2c31cb223c7 100644
--- a/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 
 export const SliderDisabled: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(50);
+  const [value, setValue] = useState(50);
   const steps = [
     { value: 0, label: '0' },
     { value: 12.5, label: '1', isLabelHidden: true },
diff --git a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
index d779134561c..cfb9fb6cc3a 100644
--- a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 
 export const SliderDiscrete: React.FunctionComponent = () => {
@@ -11,7 +12,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
     value7: 25
   };
 
-  const [numValue, setNumValue] = React.useState(initialValues);
+  const [numValue, setNumValue] = useState(initialValues);
 
   const handleChange = (value: number, name: string) => {
     setNumValue({ ...numValue, [name]: value });
diff --git a/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx b/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx
index 5775c83c33d..6b9188c2390 100644
--- a/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
 
 export const SliderThumbValueInput: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(50);
-  const [inputValue, setInputValue] = React.useState(50);
+  const [value, setValue] = useState(50);
+  const [inputValue, setInputValue] = useState(50);
 
   const onChange = (
     _event: SliderOnChangeEvent,
diff --git a/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx b/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx
index e077ac192ae..21871042f8c 100644
--- a/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx
@@ -1,12 +1,13 @@
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
 
 export const SliderValueInput: React.FunctionComponent = () => {
-  const [valueDiscrete, setValueDiscrete] = React.useState(62.5);
-  const [inputValueDiscrete, setInputValueDiscrete] = React.useState(5);
-  const [valuePercent, setValuePercent] = React.useState(50);
-  const [inputValuePercent, setInputValuePercent] = React.useState(50);
-  const [valueContinuous, setValueContinuous] = React.useState(50);
-  const [inputValueContinuous, setInputValueContinuous] = React.useState(50);
+  const [valueDiscrete, setValueDiscrete] = useState(62.5);
+  const [inputValueDiscrete, setInputValueDiscrete] = useState(5);
+  const [valuePercent, setValuePercent] = useState(50);
+  const [inputValuePercent, setInputValuePercent] = useState(50);
+  const [valueContinuous, setValueContinuous] = useState(50);
+  const [inputValueContinuous, setInputValueContinuous] = useState(50);
 
   const stepsDiscrete = [
     { value: 0, label: '0' },
diff --git a/packages/react-core/src/components/Switch/examples/Switch.md b/packages/react-core/src/components/Switch/examples/Switch.md
index 25dcebb14f1..39023c97c6d 100644
--- a/packages/react-core/src/components/Switch/examples/Switch.md
+++ b/packages/react-core/src/components/Switch/examples/Switch.md
@@ -6,7 +6,7 @@ propComponents: ['Switch']
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx b/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx
index f37979411f1..4abd03c2a23 100644
--- a/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx
+++ b/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Switch } from '@patternfly/react-core';
 
 export const SwitchBasic: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isChecked, setIsChecked] = useState<boolean>(true);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(checked);
diff --git a/packages/react-core/src/components/Switch/examples/SwitchCheckedWithLabel.tsx b/packages/react-core/src/components/Switch/examples/SwitchCheckedWithLabel.tsx
index cb389e96d1c..351f2ec4935 100644
--- a/packages/react-core/src/components/Switch/examples/SwitchCheckedWithLabel.tsx
+++ b/packages/react-core/src/components/Switch/examples/SwitchCheckedWithLabel.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Switch } from '@patternfly/react-core';
 
 export const SwitchCheckedWithLabel: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isChecked, setIsChecked] = useState<boolean>(true);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(checked);
diff --git a/packages/react-core/src/components/Switch/examples/SwitchReversed.tsx b/packages/react-core/src/components/Switch/examples/SwitchReversed.tsx
index de35db8e49a..b3882418504 100644
--- a/packages/react-core/src/components/Switch/examples/SwitchReversed.tsx
+++ b/packages/react-core/src/components/Switch/examples/SwitchReversed.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Switch } from '@patternfly/react-core';
 
 export const SwitchReversed: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isChecked, setIsChecked] = useState<boolean>(true);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(checked);
diff --git a/packages/react-core/src/components/Switch/examples/SwitchWithoutLabel.tsx b/packages/react-core/src/components/Switch/examples/SwitchWithoutLabel.tsx
index eb6268517de..fbe701642c1 100644
--- a/packages/react-core/src/components/Switch/examples/SwitchWithoutLabel.tsx
+++ b/packages/react-core/src/components/Switch/examples/SwitchWithoutLabel.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Switch } from '@patternfly/react-core';
 
 export const SwitchWithoutLabel: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isChecked, setIsChecked] = useState<boolean>(true);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(checked);
diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md
index 0bbf5ada5e7..6df1476058a 100644
--- a/packages/react-core/src/components/Tabs/examples/Tabs.md
+++ b/packages/react-core/src/components/Tabs/examples/Tabs.md
@@ -6,7 +6,7 @@ propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText',
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { createRef, Fragment, useEffect, useRef, useState } from 'react';
 import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
 import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
diff --git a/packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx b/packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx
index 9a943477d58..b6ef371a1f4 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
 
 export const TabsBoxSecondary: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isTabsBoxSecondary, setIsTabsBoxSecondary] = React.useState<boolean>(true);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isTabsBoxSecondary, setIsTabsBoxSecondary] = useState<boolean>(true);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx b/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx
index a05eca357d5..8a8dd9b13ce 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 
 export const TabsChildrenMounting: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx b/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx
index 9849d03daec..da1de049bb8 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { createRef, Fragment, useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabContent, TabContentBody } from '@patternfly/react-core';
 
 export const TabContentWithBodyPadding: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -11,9 +11,9 @@ export const TabContentWithBodyPadding: React.FunctionComponent = () => {
     setActiveTabKey(tabIndex);
   };
 
-  const contentRef1 = React.createRef<HTMLElement>();
-  const contentRef2 = React.createRef<HTMLElement>();
-  const contentRef3 = React.createRef<HTMLElement>();
+  const contentRef1 = createRef<HTMLElement>();
+  const contentRef2 = createRef<HTMLElement>();
+  const contentRef3 = createRef<HTMLElement>();
 
   return (
     <Fragment>
diff --git a/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx b/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx
index 505e3769dae..24024377fd8 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
 
 export const TabsDefault: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx b/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx
index 56b3dbd6bcc..b5bc9103866 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 
 export const TabsDefaultOverflow: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsDynamic.tsx b/packages/react-core/src/components/Tabs/examples/TabsDynamic.tsx
index a62520f12ad..f966a5550dc 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsDynamic.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsDynamic.tsx
@@ -1,11 +1,12 @@
+import { useEffect, useRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 
 export const TabsDynamic: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
-  const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
-  const [newTabNumber, setNewTabNumber] = React.useState<number>(4);
-  const tabComponentRef = React.useRef<any>(undefined);
-  const firstMount = React.useRef(true);
+  const [activeTabKey, setActiveTabKey] = useState<number>(0);
+  const [tabs, setTabs] = useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
+  const [newTabNumber, setNewTabNumber] = useState<number>(4);
+  const tabComponentRef = useRef<any>(undefined);
+  const firstMount = useRef(true);
 
   const onClose = (event: any, tabIndex: string | number) => {
     const tabIndexNum = tabIndex as number;
@@ -27,7 +28,7 @@ export const TabsDynamic: React.FunctionComponent = () => {
     setNewTabNumber(newTabNumber + 1);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (firstMount.current) {
       firstMount.current = false;
       return;
diff --git a/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx b/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx
index 9838505c8f6..17326fac2e2 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 
 export const TabsFilled: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx b/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx
index 8c2edb68832..06aee39f478 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx
@@ -1,11 +1,12 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from '@patternfly/react-core';
 import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
 import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 
 export const TabsFilledWithIcons: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsHelp.tsx b/packages/react-core/src/components/Tabs/examples/TabsHelp.tsx
index d6ee39810d3..1fc646e62ae 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsHelp.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsHelp.tsx
@@ -1,8 +1,9 @@
+import { createRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabAction, Popover } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const TabsHelp: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<number>(0);
 
   const tabs = ['Users', 'Containers', 'Database', 'Disabled', 'ARIA disabled', 'Help disabled'];
 
@@ -27,7 +28,7 @@ export const TabsHelp: React.FunctionComponent = () => {
       role="region"
     >
       {tabs.map((tab, index) => {
-        const ref = React.createRef<HTMLElement>();
+        const ref = createRef<HTMLElement>();
 
         return (
           <Tab
diff --git a/packages/react-core/src/components/Tabs/examples/TabsHelpAndClose.tsx b/packages/react-core/src/components/Tabs/examples/TabsHelpAndClose.tsx
index 342ed74febf..1896c79874c 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsHelpAndClose.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsHelpAndClose.tsx
@@ -1,12 +1,13 @@
+import { createRef, useEffect, useRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText, Popover, TabAction } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TabsHelpAndClose: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
-  const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
-  const tabComponentRef = React.useRef<any>(undefined);
-  const firstMount = React.useRef(true);
+  const [activeTabKey, setActiveTabKey] = useState<number>(0);
+  const [tabs, setTabs] = useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
+  const tabComponentRef = useRef<any>(undefined);
+  const firstMount = useRef(true);
 
   const onClose = (event: any, tabIndex: string | number) => {
     const tabIndexNum = tabIndex as number;
@@ -35,7 +36,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
     />
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (firstMount.current) {
       firstMount.current = false;
       return;
@@ -54,7 +55,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
       ref={tabComponentRef}
     >
       {tabs.map((tab, index) => {
-        const ref = React.createRef<HTMLElement>();
+        const ref = createRef<HTMLElement>();
 
         return (
           <Tab
diff --git a/packages/react-core/src/components/Tabs/examples/TabsHorizontalOverflow.tsx b/packages/react-core/src/components/Tabs/examples/TabsHorizontalOverflow.tsx
index 7efdde72ac7..03fb7a4d62e 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsHorizontalOverflow.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsHorizontalOverflow.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 
 export const TabsHorizontalOverflow: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [showTabCount, setShowTabCount] = React.useState(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [showTabCount, setShowTabCount] = useState(false);
 
   const handleTabClick = (_event: any, tabIndex: string | number) => {
     setActiveTabKey(tabIndex);
diff --git a/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx b/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx
index a2d26e0a842..cd2a75932ed 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabTitleIcon } from '@patternfly/react-core';
 import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
 import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
@@ -7,7 +8,7 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon';
 
 export const TabsIconAndText: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsInset.tsx b/packages/react-core/src/components/Tabs/examples/TabsInset.tsx
index e2846ede5ca..c78257c6842 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsInset.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsInset.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 
 export const TabsInset: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsNav.tsx b/packages/react-core/src/components/Tabs/examples/TabsNav.tsx
index 7edf0f76105..906e5034fea 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsNav.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsNav.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';
 
 export const TabsNav: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx b/packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx
index 3023b900a13..4b1223df012 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';
 
 export const TabsNavSubtab: React.FunctionComponent = () => {
-  const [activeTabKey1, setActiveTabKey1] = React.useState<string | number>(0);
-  const [activeTabKey2, setActiveTabKey2] = React.useState<string | number>(0);
+  const [activeTabKey1, setActiveTabKey1] = useState<string | number>(0);
+  const [activeTabKey2, setActiveTabKey2] = useState<string | number>(0);
 
   // Toggle currently active primary tab
   const handleTabClickFirst = (
diff --git a/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx b/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx
index 22b151bdac6..c100d7ac54f 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 
 export const TabsPageInsets: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx b/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx
index fa8e6008f00..09cc0a9cd1a 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { createRef, Fragment, useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabContent } from '@patternfly/react-core';
 
 export const TabsSeparateContent: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -11,9 +11,9 @@ export const TabsSeparateContent: React.FunctionComponent = () => {
     setActiveTabKey(tabIndex);
   };
 
-  const contentRef1 = React.createRef<HTMLElement>();
-  const contentRef2 = React.createRef<HTMLElement>();
-  const contentRef3 = React.createRef<HTMLElement>();
+  const contentRef1 = createRef<HTMLElement>();
+  const contentRef2 = createRef<HTMLElement>();
+  const contentRef3 = createRef<HTMLElement>();
 
   return (
     <Fragment>
diff --git a/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx b/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx
index 855dfdafb0c..0c0428d62e2 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 
 export const TabsSubtabs: React.FunctionComponent = () => {
-  const [activeTabKey1, setActiveTabKey1] = React.useState<string | number>(0);
-  const [activeTabKey2, setActiveTabKey2] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey1, setActiveTabKey1] = useState<string | number>(0);
+  const [activeTabKey2, setActiveTabKey2] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
 
   // Toggle currently active primary tab
   const handleTabClickFirst = (
diff --git a/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx b/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx
index 6e6486ee628..c8a6d648f68 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { createRef, Fragment, useState } from 'react';
 import { Tabs, Tab, TabContent, Button, Divider } from '@patternfly/react-core';
 
 export const TabsToggledSeparateContent: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isTab2Hidden, setIsTab2Hidden] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isTab2Hidden, setIsTab2Hidden] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -12,9 +12,9 @@ export const TabsToggledSeparateContent: React.FunctionComponent = () => {
     setActiveTabKey(tabIndex);
   };
 
-  const contentRef1 = React.createRef<HTMLElement>();
-  const contentRef2 = React.createRef<HTMLElement>();
-  const contentRef3 = React.createRef<HTMLElement>();
+  const contentRef1 = createRef<HTMLElement>();
+  const contentRef2 = createRef<HTMLElement>();
+  const contentRef3 = createRef<HTMLElement>();
 
   return (
     <Fragment>
diff --git a/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx b/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx
index 1e047acb78f..7091a1bbe4c 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx
@@ -1,8 +1,9 @@
+import { createRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
 
 export const TabsTooltipReactRef: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -15,7 +16,7 @@ export const TabsTooltipReactRef: React.FunctionComponent = () => {
     setIsBox(checked);
   };
 
-  const tooltipRef = React.createRef<HTMLElement>();
+  const tooltipRef = createRef<HTMLElement>();
 
   return (
     <div>
diff --git a/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx b/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx
index 1e6f44d209a..d8922894782 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 
 export const TabsUnmountingInvisibleChildren: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx b/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx
index d1206b0d99f..c0feb9d0b73 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
 
 export const TabsVertical: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx
index a49845199e7..ff4b5bbb545 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 
 export const TabsVerticalExpandable: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx
index 3671988e8b3..6b658bc3abd 100644
--- a/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx
+++ b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx
@@ -1,6 +1,7 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 export const TabsVerticalExpandableUncontrolled: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/components/TextArea/examples/TextArea.md b/packages/react-core/src/components/TextArea/examples/TextArea.md
index 9136eb2dff1..a3dd633aa64 100644
--- a/packages/react-core/src/components/TextArea/examples/TextArea.md
+++ b/packages/react-core/src/components/TextArea/examples/TextArea.md
@@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-form-control
 propComponents: ['TextArea']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
index 819d5b80a51..4fe55f21820 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaAutoResizing: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx
index c078a48e15c..18550ecf4fe 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx
@@ -1,6 +1,7 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaBasic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return <TextArea value={value} onChange={(_event, value) => setValue(value)} aria-label="text area example" />;
 };
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
index a4dcac2e96d..8a8fc10a2a7 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaHorizontallyResizable: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx
index e84e001e26a..b67196e72e8 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaInvalid: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx
index 85ca49cb923..1b9fed1af0a 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Checkbox, TextArea } from '@patternfly/react-core';
 
 export const TextAreaReadOnly: React.FunctionComponent = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+  const [isPlainChecked, setIsPlainChecked] = useState(false);
 
   return (
     <Fragment>
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaResizableNone.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaResizableNone.tsx
index ad4be355a2c..a4b896de82f 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaResizableNone.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaResizableNone.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaResizeNone: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
index bfb19a7160a..af9a0c0e9ee 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
@@ -1,10 +1,11 @@
+import { useRef, useState } from 'react';
 import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextArea } from '@patternfly/react-core';
 
 export const TextAreaValidated: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
-  const [helperText, setHelperText] = React.useState('Share your thoughts.');
-  const timerRef = React.useRef<number | null>(null);
+  const [value, setValue] = useState('');
+  const [validated, setValidated] = useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
+  const [helperText, setHelperText] = useState('Share your thoughts.');
+  const timerRef = useRef<number | null>(null);
   const simulateNetworkCall = (callback: Function) => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx
index c7720dc95c7..2ea9a014994 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const VerticalResizeTextArea: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}
diff --git a/packages/react-core/src/components/TextInput/examples/TextInput.md b/packages/react-core/src/components/TextInput/examples/TextInput.md
index 06c9871be34..798fd624f9c 100644
--- a/packages/react-core/src/components/TextInput/examples/TextInput.md
+++ b/packages/react-core/src/components/TextInput/examples/TextInput.md
@@ -6,6 +6,7 @@ cssPrefix: pf-v6-c-form-control
 propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 
+import { useRef, useState } from 'react';
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
 import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
 
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx b/packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx
index f3e9eec015f..27001eb1dac 100644
--- a/packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx
+++ b/packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 
 export const TextInputBasic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextInput
       value={value}
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputCustomIcon.tsx b/packages/react-core/src/components/TextInput/examples/TextInputCustomIcon.tsx
index 66895d47264..f6e527ccc91 100644
--- a/packages/react-core/src/components/TextInput/examples/TextInputCustomIcon.tsx
+++ b/packages/react-core/src/components/TextInput/examples/TextInputCustomIcon.tsx
@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
 import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
 
 export const TextInputCustomIcon: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
+  const [calendar, setCalendar] = useState('');
+  const [clock, setClock] = useState('');
 
   return (
     <>
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx b/packages/react-core/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx
index cffdcf00f75..3811ac10d65 100644
--- a/packages/react-core/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx
+++ b/packages/react-core/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { TextInput, ValidatedOptions } from '@patternfly/react-core';
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
 
 export const TextInputCustomIconInvalid: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
+  const [calendar, setCalendar] = useState('');
 
   return (
     <>
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputInvalid.tsx b/packages/react-core/src/components/TextInput/examples/TextInputInvalid.tsx
index 4d7ad494e45..77f6dc88306 100644
--- a/packages/react-core/src/components/TextInput/examples/TextInputInvalid.tsx
+++ b/packages/react-core/src/components/TextInput/examples/TextInputInvalid.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInput, ValidatedOptions } from '@patternfly/react-core';
 
 export const TextInputInvalid: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextInput
       value={value}
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputReadOnly.tsx b/packages/react-core/src/components/TextInput/examples/TextInputReadOnly.tsx
index 752ebcc9d31..15553190f92 100644
--- a/packages/react-core/src/components/TextInput/examples/TextInputReadOnly.tsx
+++ b/packages/react-core/src/components/TextInput/examples/TextInputReadOnly.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Checkbox, TextInput } from '@patternfly/react-core';
 
 export const TextInputReadOnly: React.FunctionComponent = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+  const [isPlainChecked, setIsPlainChecked] = useState(false);
   return (
     <>
       <div style={{ marginBottom: '12px' }}>
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputSelectUsingRef.tsx b/packages/react-core/src/components/TextInput/examples/TextInputSelectUsingRef.tsx
index 33189279f09..3fbd5366372 100644
--- a/packages/react-core/src/components/TextInput/examples/TextInputSelectUsingRef.tsx
+++ b/packages/react-core/src/components/TextInput/examples/TextInputSelectUsingRef.tsx
@@ -1,8 +1,9 @@
+import { useRef, useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 
 export const TextInputSelectUsingRef: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('select all on click');
-  const ref = React.useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState('select all on click');
+  const ref = useRef<HTMLInputElement>(null);
   return (
     <TextInput
       ref={ref}
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputStartTruncated.tsx b/packages/react-core/src/components/TextInput/examples/TextInputStartTruncated.tsx
index 9324bf981e8..28ca574b078 100644
--- a/packages/react-core/src/components/TextInput/examples/TextInputStartTruncated.tsx
+++ b/packages/react-core/src/components/TextInput/examples/TextInputStartTruncated.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 
 export const StartTruncatedTextInput: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(
+  const [value, setValue] = useState(
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
   );
   return (
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
index 362cba7c2db..6580d3e782a 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
 ---
 
+import { useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx
index 40a8a2b3482..aa809ee36d8 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
 
 export const TextInputGroupBasic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextInputGroup>
       <TextInputGroupMain value={value} onChange={(_event, value) => setValue(value)} />
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
index 4bce1eea8c0..29ec818d940 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   TextInputGroup,
   TextInputGroupMain,
@@ -10,8 +11,8 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TextInputGroupFilters: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [currentChips, setCurrentChips] = React.useState([
+  const [inputValue, setInputValue] = useState('');
+  const [currentChips, setCurrentChips] = useState([
     'chip one',
     'chip two',
     'chip three',
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx
index 81b940f3117..f2020ccff9d 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
+  const [inputValue, setInputValue] = useState('');
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
index 1aec1990168..9c2ebac104f 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   TextInputGroup,
   TextInputGroupMain,
@@ -11,11 +12,9 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TextInputGroupWithStatus: React.FunctionComponent = () => {
-  const [successValue, setSuccessValue] = React.useState('Success validation');
-  const [warningValue, setWarningValue] = React.useState('Warning validation with custom non-status icon at start');
-  const [errorValue, setErrorValue] = React.useState(
-    'Error validation with custom non-status icon at start and utilities'
-  );
+  const [successValue, setSuccessValue] = useState('Success validation');
+  const [warningValue, setWarningValue] = useState('Warning validation with custom non-status icon at start');
+  const [errorValue, setErrorValue] = useState('Error validation with custom non-status icon at start and utilities');
 
   /** show the input clearing button only when the input is not empty */
   const showClearButton = !!errorValue;
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md
index 6a7a05771ef..591240dcf9b 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md
@@ -6,6 +6,7 @@ propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
 import './toggleGroup.css';
 
+import { useRef, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx
index 0431cda7a9f..37cac7cd0c4 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupCompact: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-compact-1': false,
     'toggle-group-compact-2': false
   });
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx
index 627ef581123..b129afe4785 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx
@@ -1,11 +1,12 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-multiple-1': false,
     'toggle-group-multiple-2': false
   });
-  const [disableAll, setDisableAll] = React.useState(false);
+  const [disableAll, setDisableAll] = useState(false);
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx
index a0dc0b5f151..8ec28417902 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState('');
+  const [isSelected, setIsSelected] = useState('');
   const handleItemClick = (event, _isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected(id);
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx
index 6d503a7428f..b3b1e74530e 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx
@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-icons-1': false,
     'toggle-group-icons-2': false,
     'toggle-group-icons-3': true
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
index 73f5749d8da..d2a67b438cd 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'text-icons-1': false,
     'text-icons-2': false,
     'text-icons-3': true
diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
index 2a0f85e197e..89639b516c7 100644
--- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md
+++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -5,7 +5,7 @@ propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'To
 section: components
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx
index 936d8ec3c95..155eec1712d 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   MenuToggle,
   MenuToggleElement,
@@ -15,11 +15,11 @@ import {
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [riskIsExpanded, setRiskIsExpanded] = useState(false);
+  const [riskSelected, setRiskSelected] = useState('');
 
   const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];
   const riskOptions = ['Risk', 'Low', 'Medium', 'High'];
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx
index 2ac65257d8f..e91c85c30cd 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   MenuToggle,
   MenuToggleElement,
@@ -15,12 +15,12 @@ import {
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [riskIsExpanded, setRiskIsExpanded] = useState(false);
+  const [riskSelected, setRiskSelected] = useState('');
 
   const toggleIsExpanded = () => {
     setIsExpanded(!isExpanded);
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx
index 489a0f07fbc..aaa17084d55 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Toolbar,
   ToolbarItem,
@@ -20,9 +20,9 @@ import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 
 export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState<boolean>(false);
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState<boolean>(false);
-  const [filters, setFilters] = React.useState({
+  const [statusIsExpanded, setStatusIsExpanded] = useState<boolean>(false);
+  const [riskIsExpanded, setRiskIsExpanded] = useState<boolean>(false);
+  const [filters, setFilters] = useState({
     risk: ['Low'],
     status: ['New', 'Pending']
   });
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx
index 3a97df002ef..18cfd37c8ef 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   MenuToggle,
@@ -20,12 +20,12 @@ export const ToolbarGroups: React.FunctionComponent = () => {
   const secondOptions = ['1', '2', '3'];
   const thirdOptions = ['I', 'II', 'III'];
 
-  const [firstIsExpanded, setFirstIsExpanded] = React.useState(false);
-  const [firstSelected, setFirstSelected] = React.useState('');
-  const [secondIsExpanded, setSecondIsExpanded] = React.useState(false);
-  const [secondSelected, setSecondSelected] = React.useState('');
-  const [thirdIsExpanded, setThirdIsExpanded] = React.useState(false);
-  const [thirdSelected, setThirdSelected] = React.useState('');
+  const [firstIsExpanded, setFirstIsExpanded] = useState(false);
+  const [firstSelected, setFirstSelected] = useState('');
+  const [secondIsExpanded, setSecondIsExpanded] = useState(false);
+  const [secondSelected, setSecondSelected] = useState('');
+  const [thirdIsExpanded, setThirdIsExpanded] = useState(false);
+  const [thirdSelected, setThirdSelected] = useState('');
 
   const onToggle = (filterName: string) => {
     switch (filterName) {
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
index 524c4efaffa..73c9ffc14ae 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -32,14 +32,14 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   const resourceOptions = ['All resources', 'Deployment', 'Pod'];
   const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];
 
-  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
-  const [resourceIsExpanded, setResourceIsExpanded] = React.useState(false);
-  const [resourceSelected, setResourceSelected] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [kebabIsOpen, setKebabIsOpen] = useState(false);
+  const [resourceIsExpanded, setResourceIsExpanded] = useState(false);
+  const [resourceSelected, setResourceSelected] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onKebabToggle = () => {
     setKebabIsOpen(!kebabIsOpen);
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx
index 7a1d665c14a..1b8d1292e75 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
 
 export const ToolbarSticky: React.FunctionComponent = () => {
-  const [isSticky, setIsSticky] = React.useState(true);
-  const [showEvenOnly, setShowEvenOnly] = React.useState(true);
+  const [isSticky, setIsSticky] = useState(true);
+  const [showEvenOnly, setShowEvenOnly] = useState(true);
   const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes
   const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;
 
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
index 20a576c2642..84d490ab35e 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Dropdown,
@@ -25,14 +25,14 @@ import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ToolbarWithFilters: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [isStatusExpanded, setIsStatusExpanded] = React.useState(false);
-  const [isRiskExpanded, setIsRiskExpanded] = React.useState(false);
-  const [filters, setFilters] = React.useState({
+  const [inputValue, setInputValue] = useState('');
+  const [isStatusExpanded, setIsStatusExpanded] = useState(false);
+  const [isRiskExpanded, setIsRiskExpanded] = useState(false);
+  const [filters, setFilters] = useState({
     risk: ['Low'],
     status: ['New', 'Pending']
   });
-  const [isKebabOpen, setIsKebabOpen] = React.useState(false);
+  const [isKebabOpen, setIsKebabOpen] = useState(false);
 
   const onInputChange = (newValue: string) => {
     setInputValue(newValue);
diff --git a/packages/react-core/src/components/Tooltip/examples/Tooltip.md b/packages/react-core/src/components/Tooltip/examples/Tooltip.md
index 9ad0da420cd..f84b1dc2303 100644
--- a/packages/react-core/src/components/Tooltip/examples/Tooltip.md
+++ b/packages/react-core/src/components/Tooltip/examples/Tooltip.md
@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-tooltip
 propComponents: ['Tooltip']
 ---
 
+import { useEffect, useRef, useState } from 'react';
 import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import './TooltipExamples.css';
diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipIcon.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipIcon.tsx
index ede0dccf879..33a46b37b92 100644
--- a/packages/react-core/src/components/Tooltip/examples/TooltipIcon.tsx
+++ b/packages/react-core/src/components/Tooltip/examples/TooltipIcon.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tooltip, Button } from '@patternfly/react-core';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const TooltipIcon: React.FunctionComponent = () => {
-  const [showSuccessContent, setShowSuccessContent] = React.useState(false);
+  const [showSuccessContent, setShowSuccessContent] = useState(false);
   const copyText: string = 'Copy to clipboard';
   const doneCopyText: string = 'Successfully copied to clipboard!';
 
diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx
index 6bd86729af6..d5294588cb4 100644
--- a/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx
+++ b/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Button,
   Tooltip,
@@ -12,18 +13,18 @@ import {
 } from '@patternfly/react-core';
 
 export const TooltipOptions: React.FunctionComponent = () => {
-  const [trigger, setTrigger] = React.useState(['mouseenter', 'focus']);
-  const [isVisible, setIsVisible] = React.useState(true);
-  const [contentLeftAligned, setContentLeftAligned] = React.useState(false);
-  const [enableFlip, setEnableFlip] = React.useState(true);
-  const [position, setPosition] = React.useState<TooltipPosition>(TooltipPosition.top);
-  const [positionSelectOpen, setPositionSelectOpen] = React.useState(false);
-  const [flipSelectOpen, setFlipSelectOpen] = React.useState(false);
-  const [flipBehavior, setFlipBehavior] = React.useState('flip');
-  const [entryDelayInput, setEntryDelayInput] = React.useState(0);
-  const [exitDelayInput, setExitDelayInput] = React.useState(0);
-  const [animationDuration, setAnimationDuration] = React.useState(300);
-  const tipBoxRef = React.useRef(null);
+  const [trigger, setTrigger] = useState(['mouseenter', 'focus']);
+  const [isVisible, setIsVisible] = useState(true);
+  const [contentLeftAligned, setContentLeftAligned] = useState(false);
+  const [enableFlip, setEnableFlip] = useState(true);
+  const [position, setPosition] = useState<TooltipPosition>(TooltipPosition.top);
+  const [positionSelectOpen, setPositionSelectOpen] = useState(false);
+  const [flipSelectOpen, setFlipSelectOpen] = useState(false);
+  const [flipBehavior, setFlipBehavior] = useState('flip');
+  const [entryDelayInput, setEntryDelayInput] = useState(0);
+  const [exitDelayInput, setExitDelayInput] = useState(0);
+  const [animationDuration, setAnimationDuration] = useState(300);
+  const tipBoxRef = useRef(null);
 
   const scrollToRef = (ref: React.RefObject<any>) => {
     if (ref && ref.current) {
@@ -32,7 +33,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     scrollToRef(tipBoxRef);
   }, []);
 
diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipReactRef.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipReactRef.tsx
index 6c5704ef970..122ed5a8503 100644
--- a/packages/react-core/src/components/Tooltip/examples/TooltipReactRef.tsx
+++ b/packages/react-core/src/components/Tooltip/examples/TooltipReactRef.tsx
@@ -1,7 +1,8 @@
+import { useRef } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 
 export const TooltipReactRef: React.FunctionComponent = () => {
-  const tooltipRef = React.useRef<HTMLButtonElement>(null);
+  const tooltipRef = useRef<HTMLButtonElement>(null);
   return (
     <div style={{ margin: '100px' }}>
       <button aria-describedby="tooltip-ref1" ref={tooltipRef}>
diff --git a/packages/react-core/src/components/TreeView/examples/TreeView.md b/packages/react-core/src/components/TreeView/examples/TreeView.md
index 705f4cf1ea5..09c6085986b 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeView.md
+++ b/packages/react-core/src/components/TreeView/examples/TreeView.md
@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon } from '@patternfly/react-icons';
 
 ## Examples
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewMultiselectable.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewMultiselectable.tsx
index f11a4080efb..b7d2b92fa27 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewMultiselectable.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewMultiselectable.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewMultiselectable: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>([]);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>([]);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewSelectionExpansion.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewSelectionExpansion.tsx
index cc74ec3b8f5..69588187b46 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewSelectionExpansion.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewSelectionExpansion.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewSelectableNodes: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     setActiveItems([treeViewItem]);
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewSingleSelectable.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewSingleSelectable.tsx
index 657a5f769e5..690e0961926 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewSingleSelectable.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewSingleSelectable.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewSingleSelectable: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [allExpanded, setAllExpanded] = React.useState<boolean>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [allExpanded, setAllExpanded] = useState<boolean>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx
index 4d502305bc6..7a30dc81843 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   TreeView,
   Button,
@@ -12,8 +13,8 @@ import HamburgerIcon from '@patternfly/react-icons/dist/esm/icons/hamburger-icon
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const TreeViewWithActionItems: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithBadges.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithBadges.tsx
index 22f1fbbec82..78e643a4a2d 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewWithBadges.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithBadges.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewBadges: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithCheckboxes.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithCheckboxes.tsx
index 1264b77708e..f701dcaff61 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewWithCheckboxes.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithCheckboxes.tsx
@@ -1,9 +1,10 @@
+import { useEffect, useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewWithCheckboxes: React.FunctionComponent = () => {
-  const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
+  const [checkedItems, setCheckedItems] = useState<TreeViewDataItem[]>([]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // eslint-disable-next-line no-console
     console.log('Checked items: ', checkedItems);
   }, [checkedItems]);
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithCustomBadges.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithCustomBadges.tsx
index 3c355b4a9a5..e8a0162cbf0 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewWithCustomBadges.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithCustomBadges.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewCustomBadges: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx
index d56b0248111..196bf7e870a 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx
@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 
 export const TreeViewWithIconPerItem: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithIcons.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithIcons.tsx
index f1f9a55df68..25c1e0eaf9d 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewWithIcons.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithIcons.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 
 export const TreeViewWithIcons: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithMemoization.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithMemoization.tsx
index 37327d088fd..dce5aaae0a4 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewWithMemoization.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithMemoization.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewWithMemoization: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [allExpanded, setAllExpanded] = React.useState(false);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [allExpanded, setAllExpanded] = useState(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     const filtered: TreeViewDataItem[] = [];
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithSearch.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithSearch.tsx
index 2862dd56f57..d1c3e572f16 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewWithSearch.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithSearch.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Toolbar,
   ToolbarContent,
@@ -71,9 +72,9 @@ export const TreeViewWithSearch: React.FunctionComponent = () => {
     }
   ];
 
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [filteredItems, setFilteredItems] = React.useState(options);
-  const [isFiltered, setIsFiltered] = React.useState(false);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [filteredItems, setFilteredItems] = useState(options);
+  const [isFiltered, setIsFiltered] = useState(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection
diff --git a/packages/react-core/src/components/Wizard/examples/Wizard.md b/packages/react-core/src/components/Wizard/examples/Wizard.md
index 28ba35d252f..d82dbb17698 100644
--- a/packages/react-core/src/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/components/Wizard/examples/Wizard.md
@@ -20,6 +20,7 @@ propComponents:
   ]
 ---
 
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
 import {
 FormGroup,
 TextInput,
diff --git a/packages/react-core/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx b/packages/react-core/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
index 61cee4fad07..670003ee626 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Form,
   FormGroup,
@@ -49,8 +50,8 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
 };
 
 export const WizardEnabledOnFormValidation: React.FunctionComponent = () => {
-  const [ageValue, setAgeValue] = React.useState('Thirty');
-  const [isSubAFormValid, setIsSubAFormValid] = React.useState(false);
+  const [ageValue, setAgeValue] = useState('Thirty');
+  const [isSubAFormValid, setIsSubAFormValid] = useState(false);
 
   const onSave = () => alert(`Wow, you look a lot younger than ${ageValue}.`);
 
diff --git a/packages/react-core/src/components/Wizard/examples/WizardGetCurrentStep.tsx b/packages/react-core/src/components/Wizard/examples/WizardGetCurrentStep.tsx
index a91079b1d6c..47bdba41111 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardGetCurrentStep.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardGetCurrentStep.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   DescriptionList,
   DescriptionListGroup,
@@ -33,7 +34,7 @@ const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepTy
 );
 
 export const GetCurrentStepWizard: React.FunctionComponent = () => {
-  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+  const [currentStep, setCurrentStep] = useState<WizardStepType>();
 
   const onStepChange = (_event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
     setCurrentStep(currentStep);
diff --git a/packages/react-core/src/components/Wizard/examples/WizardStepDrawerContent.tsx b/packages/react-core/src/components/Wizard/examples/WizardStepDrawerContent.tsx
index 5253101ab8a..580ddc2df66 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardStepDrawerContent.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardStepDrawerContent.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Drawer,
   DrawerContent,
@@ -15,9 +16,9 @@ import {
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 const StepContentWithDrawer: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
   const { activeStep } = useWizardContext();
-  const drawerRef = React.useRef<HTMLSpanElement>(null);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onWizardExpand = () => drawerRef.current && drawerRef.current.focus();
 
diff --git a/packages/react-core/src/components/Wizard/examples/WizardStepStatus.tsx b/packages/react-core/src/components/Wizard/examples/WizardStepStatus.tsx
index 846a720fd28..63c99c37073 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardStepStatus.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardStepStatus.tsx
@@ -1,3 +1,4 @@
+import { createContext, useContext, useState } from 'react';
 import { Radio, Wizard, WizardStep } from '@patternfly/react-core';
 
 interface SomeContextProps {
@@ -11,11 +12,11 @@ interface SomeContextProviderProps {
   children: (context: SomeContextRenderProps) => React.ReactElement<any>;
 }
 
-const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+const SomeContext: React.Context<SomeContextProps> = createContext({} as SomeContextProps);
 
 const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
-  const [errorMessage, setErrorMessage] = React.useState<string>();
-  const [successMessage, setSuccessMessage] = React.useState<string>();
+  const [errorMessage, setErrorMessage] = useState<string>();
+  const [successMessage, setSuccessMessage] = useState<string>();
 
   return (
     <SomeContext.Provider value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage }}>
@@ -25,7 +26,7 @@ const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
 };
 
 const StepContentWithAction = () => {
-  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = React.useContext(SomeContext);
+  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = useContext(SomeContext);
 
   return (
     <>
diff --git a/packages/react-core/src/components/Wizard/examples/WizardToggleStepVisibility.tsx b/packages/react-core/src/components/Wizard/examples/WizardToggleStepVisibility.tsx
index 9572544aa71..3c0d1e59d69 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardToggleStepVisibility.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardToggleStepVisibility.tsx
@@ -1,3 +1,4 @@
+import { createContext, useContext, useState } from 'react';
 import { Checkbox, Wizard, WizardStep } from '@patternfly/react-core';
 
 interface SomeContextProps {
@@ -9,10 +10,10 @@ interface SomeContextProviderProps {
   children: (context: SomeContextRenderProps) => React.ReactElement<any>;
 }
 
-const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+const SomeContext: React.Context<SomeContextProps> = createContext({} as SomeContextProps);
 
 const SomeContextProvider: React.FunctionComponent<SomeContextProviderProps> = ({ children }) => {
-  const [isToggleStepChecked, setIsToggleStepChecked] = React.useState(false);
+  const [isToggleStepChecked, setIsToggleStepChecked] = useState(false);
 
   return (
     <SomeContext.Provider value={{ isToggleStepChecked, setIsToggleStepChecked }}>
@@ -22,7 +23,7 @@ const SomeContextProvider: React.FunctionComponent<SomeContextProviderProps> = (
 };
 
 const StepContentWithAction: React.FunctionComponent = () => {
-  const { isToggleStepChecked, setIsToggleStepChecked } = React.useContext(SomeContext);
+  const { isToggleStepChecked, setIsToggleStepChecked } = useContext(SomeContext);
 
   return (
     <Checkbox
diff --git a/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx b/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
index 2d4d98ae67e..11e473fc4ae 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState } from 'react';
 import {
   Button,
   ActionList,
@@ -28,15 +29,15 @@ interface ValidationProgressProps {
 }
 
 const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {
-  const [percentValidated, setPercentValidated] = React.useState(0);
+  const [percentValidated, setPercentValidated] = useState(0);
 
-  const tick = React.useCallback(() => {
+  const tick = useCallback(() => {
     if (percentValidated < 100) {
       setPercentValidated((prevValue) => prevValue + 20);
     }
   }, [percentValidated]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const interval = setInterval(() => tick(), 1000);
 
     return () => {
@@ -153,10 +154,10 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
 };
 
 export const WizardValidateOnButtonPress: React.FunctionComponent = () => {
-  const [ageValue, setAgeValue] = React.useState('Thirty');
-  const [isSubmitted, setIsSubmitted] = React.useState(false);
-  const [isFirstStepValid, setIsFirstStepValid] = React.useState(false);
-  const [hasErrorOnSubmit, setHasErrorOnSubmit] = React.useState(false);
+  const [ageValue, setAgeValue] = useState('Thirty');
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isFirstStepValid, setIsFirstStepValid] = useState(false);
+  const [hasErrorOnSubmit, setHasErrorOnSubmit] = useState(false);
 
   // eslint-disable-next-line no-console
   const onClose = () => console.log('Some close action occurs here.');
diff --git a/packages/react-core/src/components/Wizard/examples/WizardWithCustomFooter.tsx b/packages/react-core/src/components/Wizard/examples/WizardWithCustomFooter.tsx
index 87e2ddd1173..f787fb6d5da 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardWithCustomFooter.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardWithCustomFooter.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   ActionList,
   ActionListGroup,
@@ -29,7 +30,7 @@ const CustomWizardFooter = () => {
 
 const CustomStepTwoFooter = () => {
   const { goToNextStep, goToPrevStep, close } = useWizardContext();
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   async function onNext() {
     setIsLoading(true);
@@ -88,7 +89,7 @@ const ReviewStepContent: React.FunctionComponent<ReviewStepContentProps> = ({ is
 };
 
 export const WizardWithCustomFooter: React.FunctionComponent = () => {
-  const [isSubmitting, setIsSubmitting] = React.useState<boolean>();
+  const [isSubmitting, setIsSubmitting] = useState<boolean>();
 
   async function onSubmit(): Promise<void> {
     setIsSubmitting(true);
diff --git a/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx b/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx
index 0afda3649e5..9f90e889fb7 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx
@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState } from 'react';
 import {
   EmptyState,
   EmptyStateFooter,
@@ -16,15 +17,15 @@ interface ValidationProgressProps {
 }
 
 const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {
-  const [percentValidated, setPercentValidated] = React.useState(0);
+  const [percentValidated, setPercentValidated] = useState(0);
 
-  const tick = React.useCallback(() => {
+  const tick = useCallback(() => {
     if (percentValidated < 100) {
       setPercentValidated((prevValue) => prevValue + 20);
     }
   }, [percentValidated]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const interval = setInterval(() => tick(), 1000);
 
     return () => {
@@ -60,7 +61,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 };
 
 export const WizardWithSubmitProgress: React.FunctionComponent = () => {
-  const [isSubmitted, setIsSubmitted] = React.useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
 
   // eslint-disable-next-line no-console
   const onClose = () => console.log('Some close action occurs here.');
diff --git a/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx b/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx
index 6857ce5f2e1..03ec478aa57 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
 
 export const WizardWithinModal: React.FunctionComponent = () => {
-  const [isModelOpen, setIsModalOpen] = React.useState(false);
+  const [isModelOpen, setIsModalOpen] = useState(false);
 
   return (
     <>
diff --git a/packages/react-core/src/demos/AlertGroup.md b/packages/react-core/src/demos/AlertGroup.md
index 2b2ca4c3d90..9099b7a64fb 100644
--- a/packages/react-core/src/demos/AlertGroup.md
+++ b/packages/react-core/src/demos/AlertGroup.md
@@ -3,7 +3,7 @@ id: Alert
 section: components
 ---
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
diff --git a/packages/react-core/src/demos/BackToTop.md b/packages/react-core/src/demos/BackToTop.md
index 8ec7b32ca24..f1b362c9d00 100644
--- a/packages/react-core/src/demos/BackToTop.md
+++ b/packages/react-core/src/demos/BackToTop.md
@@ -2,6 +2,7 @@
 id: Back to top
 section: components
 ---
+import { useState } from 'react';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
diff --git a/packages/react-core/src/demos/Button.md b/packages/react-core/src/demos/Button.md
index 4e3634a184a..43db232d7a0 100644
--- a/packages/react-core/src/demos/Button.md
+++ b/packages/react-core/src/demos/Button.md
@@ -3,6 +3,7 @@ id: Button
 section: components
 ---
 
+import { useState } from 'react';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 ## Demos 
@@ -14,11 +15,12 @@ The following demo shows the intended flow for a button that visually indicates
 Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 
 
 ```ts
+import { useState } from 'react';
 import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 const ProgressButton: React.FunctionComponent = () => {
-  const [loginState, setLoginState] = React.useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');
+  const [loginState, setLoginState] = useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');
 
   return (
     <Form>
diff --git a/packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md b/packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md
index 53e99546ed4..cd9c28db99f 100644
--- a/packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md
+++ b/packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md
@@ -18,6 +18,8 @@ propComponents:
   ]
 ---
 
+import { cloneElement, Fragment, useRef, useState } from 'react';
+
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import brandImg from '../assets/PF-IconLogo.svg';
 
diff --git a/packages/react-core/src/demos/CustomMenus/ContextSelector.md b/packages/react-core/src/demos/CustomMenus/ContextSelector.md
index 2f3fb252a98..998c60fae4f 100644
--- a/packages/react-core/src/demos/CustomMenus/ContextSelector.md
+++ b/packages/react-core/src/demos/CustomMenus/ContextSelector.md
@@ -19,6 +19,7 @@ propComponents:
   ]
 ---
 
+import { useRef, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 As the context selector component is now deprecated, a context selector may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [dropdown](/components/menus/dropdown) component that is built off of menu.
diff --git a/packages/react-core/src/demos/CustomMenus/CustomMenus.md b/packages/react-core/src/demos/CustomMenus/CustomMenus.md
index f369d1dc50f..c911228123a 100644
--- a/packages/react-core/src/demos/CustomMenus/CustomMenus.md
+++ b/packages/react-core/src/demos/CustomMenus/CustomMenus.md
@@ -4,6 +4,8 @@ section: components
 subsection: menus
 ---
 
+import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
+
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
diff --git a/packages/react-core/src/demos/CustomMenus/OptionsMenu.md b/packages/react-core/src/demos/CustomMenus/OptionsMenu.md
index d68e28fd488..9287ae5d523 100644
--- a/packages/react-core/src/demos/CustomMenus/OptionsMenu.md
+++ b/packages/react-core/src/demos/CustomMenus/OptionsMenu.md
@@ -6,6 +6,7 @@ source: react-demos
 propComponents: ['MenuToggle', 'Divider', 'Select', 'SelectList', 'SelectOption', 'SelectGroup']
 ---
 
+import { useRef, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 As the `<OptionsMenu>` component is now deprecated, an options menu may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [select](/components/menus/select) component that is built off of menu.
diff --git a/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx
index 5a020ccf17a..91ca53adc86 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import { MenuToggle, MenuItemAction, Select, SelectGroup, SelectList, SelectOption } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
@@ -5,9 +6,9 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const ActionsMenuDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const menuRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   const onSelect = (event: React.MouseEvent | undefined, value: string | number | undefined) => {
     if (typeof value === 'string' || typeof value === 'undefined') {
diff --git a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
index 71d533d5c40..b5e998d4d10 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { cloneElement, Fragment, useRef, useState } from 'react';
 import {
   MenuToggle,
   MenuSearch,
@@ -17,11 +17,11 @@ import brandImg from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 const MockLink: React.FunctionComponent = ({ to, ...props }: any) => <a href={to} {...props}></a>;
 
 export const ApplicationLauncherDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [refFullOptions, setRefFullOptions] = React.useState<Element[]>();
-  const [favorites, setFavorites] = React.useState<string[]>([]);
-  const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
-  const menuRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [refFullOptions, setRefFullOptions] = useState<Element[]>();
+  const [favorites, setFavorites] = useState<string[]>([]);
+  const [filteredIds, setFilteredIds] = useState<string[]>(['*']);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setTimeout(() => {
@@ -123,8 +123,8 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
     const filteredCopy = items
       .map((group) => {
         if (group.type === DropdownGroup) {
-          const filteredGroup = React.cloneElement(group, {
-            children: React.cloneElement(group.props.children, {
+          const filteredGroup = cloneElement(group, {
+            children: cloneElement(group.props.children, {
               children: group.props.children.props.children.filter((child) => {
                 if (filteredIds.includes(child.props.value)) {
                   return child;
@@ -140,7 +140,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
             keepDivider = false;
           }
         } else if (group.type === DropdownList) {
-          const filteredGroup = React.cloneElement(group, {
+          const filteredGroup = cloneElement(group, {
             children: group.props.children.filter((child) => {
               if (filteredIds.includes(child.props.value)) {
                 return child;
diff --git a/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx
index 8507d1ec6a7..f2ea4b329e8 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   MenuToggle,
   MenuFooter,
@@ -52,12 +53,12 @@ export const ContextSelectorDemo: React.FunctionComponent = () => {
     'AWS 2',
     'Azure 2'
   ];
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState(typeof items[0] === 'string' ? items[0] : items[0].text);
-  const [filteredItems, setFilteredItems] = React.useState<ItemArrayType>(items);
-  const [searchInputValue, setSearchInputValue] = React.useState<string>('');
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const menuFooterBtnRef = React.useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selected, setSelected] = useState(typeof items[0] === 'string' ? items[0] : items[0].text);
+  const [filteredItems, setFilteredItems] = useState<ItemArrayType>(items);
+  const [searchInputValue, setSearchInputValue] = useState<string>('');
+  const menuRef = useRef<HTMLDivElement>(null);
+  const menuFooterBtnRef = useRef<HTMLButtonElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx
index 2e231a5d809..bc54b2a30e9 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx
@@ -1,9 +1,10 @@
+import { useRef, useState } from 'react';
 import { MenuToggle, Select, SelectList, SelectOption, Timestamp } from '@patternfly/react-core';
 
 export const DateSelectDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<number>(0);
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<number>(0);
+  const menuRef = useRef<HTMLDivElement>(undefined);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx
index 692e8c5dcee..c747176f886 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   MenuToggle,
   Menu,
@@ -18,13 +19,13 @@ interface MenuHeightsType {
 }
 
 export const DrilldownMenuDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [activeMenu, setActiveMenu] = React.useState<string>('rootMenu');
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<MenuHeightsType>({});
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [activeMenu, setActiveMenu] = useState<string>('rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<MenuHeightsType>({});
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/demos/CustomMenus/examples/FavoritesDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/FavoritesDemo.tsx
index 36c06464163..bc92ebeb32d 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/FavoritesDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/FavoritesDemo.tsx
@@ -1,4 +1,4 @@
-import { type JSX, Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { MenuToggle, Divider, Dropdown, DropdownGroup, DropdownList, DropdownItem } from '@patternfly/react-core';
 
 export const FavoritesDemo: React.FunctionComponent = () => {
@@ -47,7 +47,7 @@ export const FavoritesDemo: React.FunctionComponent = () => {
   ];
 
   const createFavorites = (favIds: string[]) => {
-    const favorites: JSX.Element[] = [];
+    const favorites: React.JSX.Element[] = [];
 
     menuItems.forEach((item) => {
       if (item.type === DropdownList) {
diff --git a/packages/react-core/src/demos/CustomMenus/examples/FlyoutDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/FlyoutDemo.tsx
index 4f2835c2d1c..2f4a217d69e 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/FlyoutDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/FlyoutDemo.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, MenuContainer } from '@patternfly/react-core';
 
 /* eslint-disable no-console */
@@ -30,9 +31,9 @@ const FlyoutMenu: React.FunctionComponent<FlyoutMenuProps> = ({ depth, children
 );
 
 export const FlyoutDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
 
   let curFlyout = <FlyoutMenu depth={1} />;
   for (let i = 2; i < 14; i++) {
diff --git a/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx
index 2e7c8d22ddf..685eb6ae7ac 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Menu,
   MenuList,
@@ -12,11 +13,11 @@ import {
 } from '@patternfly/react-core';
 
 export const InlineSearchFilterMenuDemo: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const [input, setInput] = React.useState('');
-  const [isOpen, setIsOpen] = React.useState(false);
-  const toggleRef = React.useRef<any>(undefined);
-  const menuRef = React.useRef<any>(undefined);
+  const [activeItem, setActiveItem] = useState(0);
+  const [input, setInput] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleRef = useRef<any>(undefined);
+  const menuRef = useRef<any>(undefined);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
diff --git a/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx
index c1a98935e91..eb79376f9db 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx
@@ -1,9 +1,10 @@
+import { useRef, useState } from 'react';
 import { MenuToggle, Divider, Select, SelectList, SelectOption, SelectGroup } from '@patternfly/react-core';
 
 export const OptionsMenuDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('');
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selected, setSelected] = useState<string>('');
+  const menuRef = useRef<HTMLDivElement>(undefined);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/demos/CustomMenus/examples/TreeViewMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/TreeViewMenuDemo.tsx
index b27009be367..ea6f96204bd 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/TreeViewMenuDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/TreeViewMenuDemo.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   MenuToggle,
   Panel,
@@ -10,10 +11,10 @@ import {
 } from '@patternfly/react-core';
 
 export const TreeViewMenuDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [checkedItems, setCheckedItems] = useState<TreeViewDataItem[]>([]);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(undefined);
 
   const statusOptions: TreeViewDataItem[] = [
     {
diff --git a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
index 64c4b338a07..23793746390 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   Content,
@@ -19,8 +20,8 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const DataListActionable: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [isDeleted, setIsDeleted] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isDeleted, setIsDeleted] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
index ba15f83f179..503d731bdd1 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Content,
@@ -33,11 +33,11 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DataListExpandableControlInToolbar: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
-  const [isOpen1, setIsOpen1] = React.useState(false);
-  const [isOpen2, setIsOpen2] = React.useState(false);
-  const [isOpen3, setIsOpen3] = React.useState(false);
-  const [allExpanded, setAllExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(['ex-toggle1', 'ex-toggle3']);
+  const [isOpen1, setIsOpen1] = useState(false);
+  const [isOpen2, setIsOpen2] = useState(false);
+  const [isOpen3, setIsOpen3] = useState(false);
+  const [allExpanded, setAllExpanded] = useState(false);
 
   const onToggleAll = () => {
     setAllExpanded((prevAllExpanded) => !prevAllExpanded);
diff --git a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx
index 1a1bcbec5f0..df6916d24c6 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Content,
@@ -31,9 +31,9 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 
 export const DataListStaticBottomPagination: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState<number | undefined>(1);
-  const [perPage, setPerPage] = React.useState<number>(10);
-  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
+  const [page, setPage] = useState<number | undefined>(1);
+  const [perPage, setPerPage] = useState<number>(10);
+  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10));
 
   const handleSetPage = (
     _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md
index 0449f8cdaff..e44a1ac57a4 100644
--- a/packages/react-core/src/demos/DataListDemo.md
+++ b/packages/react-core/src/demos/DataListDemo.md
@@ -3,6 +3,8 @@ id: Data list
 section: components
 ---
 
+import { Fragment, useState } from 'react';
+
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
diff --git a/packages/react-core/src/demos/DatePicker/DatePicker.md b/packages/react-core/src/demos/DatePicker/DatePicker.md
index 990b2086684..53329fd0b42 100644
--- a/packages/react-core/src/demos/DatePicker/DatePicker.md
+++ b/packages/react-core/src/demos/DatePicker/DatePicker.md
@@ -14,11 +14,12 @@ import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from
 This is intended to be used as a filter. After selecting a start date, the next date is automatically selected.
 
 ```js
+import { useState } from 'react';
 import { Split, SplitItem, DatePicker, isValidDate, yyyyMMddFormat } from '@patternfly/react-core';
 
 DateRangePicker = () => {
-  const [from, setFrom] = React.useState();
-  const [to, setTo] = React.useState();
+  const [from, setFrom] = useState();
+  const [to, setTo] = useState();
 
   const toValidator = (date) =>
     isValidDate(from) && date >= from ? '' : 'The "to" date must be after the "from" date';
diff --git a/packages/react-core/src/demos/DateTimePicker.md b/packages/react-core/src/demos/DateTimePicker.md
index 683c2a2f97f..11593da2ac2 100644
--- a/packages/react-core/src/demos/DateTimePicker.md
+++ b/packages/react-core/src/demos/DateTimePicker.md
@@ -4,6 +4,7 @@ section: components
 subsection: date-and-time
 ---
 
+import { useState } from 'react';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 
@@ -20,11 +21,12 @@ In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calen
 ### Date and time range picker
 
 ```js
+import { useState } from 'react';
 import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';
 
 DateTimeRangePicker = () => {
-  const [from, setFrom] = React.useState();
-  const [to, setTo] = React.useState();
+  const [from, setFrom] = useState();
+  const [to, setTo] = useState();
 
   const toValidator = (date) => {
     return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md
index 613d7f0d5c2..5d7c75ec2a6 100644
--- a/packages/react-core/src/demos/DescriptionList/DescriptionList.md
+++ b/packages/react-core/src/demos/DescriptionList/DescriptionList.md
@@ -3,6 +3,7 @@ id: Description list
 section: components
 ---
 
+import { useRef, useState } from 'react';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx
index 8ed5d3ac6b5..3af49469ed4 100644
--- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx
+++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Gallery,
   Content,
@@ -20,9 +21,9 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListInDrawer: React.FunctionComponent = () => {
-  const drawerRef = React.useRef<HTMLDivElement>(null);
-  const btnRef = React.useRef<HTMLDivElement>(null);
-  const [isExpanded, setIsExpanded] = React.useState(true);
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const btnRef = useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = useState(true);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md
index 440a7ade1ff..892f15342d5 100644
--- a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md
+++ b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md
@@ -3,6 +3,8 @@ id: Expandable section
 section: components
 ---
 
+import { useState } from 'react';
+
 ## Demos
 
 
diff --git a/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx b/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx
index 85a5cf1a3d7..185495469f1 100644
--- a/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx
+++ b/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ExpandableSection, ExpandableSectionVariant, Truncate } from '@patternfly/react-core';
 
 export const ExpandableTextDemo: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
diff --git a/packages/react-core/src/demos/Filters/FilterDemos.md b/packages/react-core/src/demos/Filters/FilterDemos.md
index 1b882d7da62..4c8f7aa328a 100644
--- a/packages/react-core/src/demos/Filters/FilterDemos.md
+++ b/packages/react-core/src/demos/Filters/FilterDemos.md
@@ -3,7 +3,7 @@ id: Filters
 section: patterns
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
 Popper,
 SearchInput,
diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
index 9245ca36b94..0f7c16c4096 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   SearchInput,
   Toolbar,
@@ -61,9 +61,9 @@ const columnNames = {
 
 export const FilterAttributeSearch: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [searchValue, setSearchValue] = React.useState('');
-  const [locationSelections, setLocationSelections] = React.useState<string[]>([]);
-  const [statusSelection, setStatusSelection] = React.useState('');
+  const [searchValue, setSearchValue] = useState('');
+  const [locationSelections, setLocationSelections] = useState<string[]>([]);
+  const [statusSelection, setStatusSelection] = useState('');
 
   const onSearchChange = (value: string) => {
     setSearchValue(value);
@@ -97,7 +97,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -110,8 +110,8 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
   // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
-  const [shifting, setShifting] = React.useState(false);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
 
   const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
     // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
@@ -128,7 +128,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -150,11 +150,11 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   }, []);
 
   // Set up bulk selection menu
-  const bulkSelectMenuRef = React.useRef<HTMLDivElement>(null);
-  const bulkSelectToggleRef = React.useRef<any>(null);
-  const bulkSelectContainerRef = React.useRef<HTMLDivElement>(null);
+  const bulkSelectMenuRef = useRef<HTMLDivElement>(null);
+  const bulkSelectToggleRef = useRef<any>(null);
+  const bulkSelectContainerRef = useRef<HTMLDivElement>(null);
 
-  const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState<boolean>(false);
+  const [isBulkSelectOpen, setIsBulkSelectOpen] = useState<boolean>(false);
 
   const handleBulkSelectClickOutside = (event: MouseEvent) => {
     if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) {
@@ -177,7 +177,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -266,10 +266,10 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   // Set up status single select
-  const [isStatusMenuOpen, setIsStatusMenuOpen] = React.useState<boolean>(false);
-  const statusToggleRef = React.useRef<HTMLButtonElement>(null);
-  const statusMenuRef = React.useRef<HTMLDivElement>(null);
-  const statusContainerRef = React.useRef<HTMLDivElement>(null);
+  const [isStatusMenuOpen, setIsStatusMenuOpen] = useState<boolean>(false);
+  const statusToggleRef = useRef<HTMLButtonElement>(null);
+  const statusMenuRef = useRef<HTMLDivElement>(null);
+  const statusContainerRef = useRef<HTMLDivElement>(null);
 
   const handleStatusMenuKeys = (event: KeyboardEvent) => {
     if (isStatusMenuOpen && statusMenuRef.current?.contains(event.target as Node)) {
@@ -286,7 +286,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleStatusMenuKeys);
     window.addEventListener('click', handleStatusClickOutside);
     return () => {
@@ -358,10 +358,10 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   // Set up location checkbox select
-  const [isLocationMenuOpen, setIsLocationMenuOpen] = React.useState<boolean>(false);
-  const locationToggleRef = React.useRef<HTMLButtonElement>(null);
-  const locationMenuRef = React.useRef<HTMLDivElement>(null);
-  const locationContainerRef = React.useRef<HTMLDivElement>(null);
+  const [isLocationMenuOpen, setIsLocationMenuOpen] = useState<boolean>(false);
+  const locationToggleRef = useRef<HTMLButtonElement>(null);
+  const locationMenuRef = useRef<HTMLDivElement>(null);
+  const locationContainerRef = useRef<HTMLDivElement>(null);
 
   const handleLocationMenuKeys = (event: KeyboardEvent) => {
     if (isLocationMenuOpen && locationMenuRef.current?.contains(event.target as Node)) {
@@ -378,7 +378,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleLocationMenuKeys);
     window.addEventListener('click', handleLocationClickOutside);
     return () => {
@@ -471,11 +471,11 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   // Set up attribute selector
-  const [activeAttributeMenu, setActiveAttributeMenu] = React.useState<'Servers' | 'Status' | 'Location'>('Servers');
-  const [isAttributeMenuOpen, setIsAttributeMenuOpen] = React.useState(false);
-  const attributeToggleRef = React.useRef<HTMLButtonElement>(null);
-  const attributeMenuRef = React.useRef<HTMLDivElement>(null);
-  const attributeContainerRef = React.useRef<HTMLDivElement>(null);
+  const [activeAttributeMenu, setActiveAttributeMenu] = useState<'Servers' | 'Status' | 'Location'>('Servers');
+  const [isAttributeMenuOpen, setIsAttributeMenuOpen] = useState(false);
+  const attributeToggleRef = useRef<HTMLButtonElement>(null);
+  const attributeMenuRef = useRef<HTMLDivElement>(null);
+  const attributeContainerRef = useRef<HTMLDivElement>(null);
 
   const handleAttribueMenuKeys = (event: KeyboardEvent) => {
     if (!isAttributeMenuOpen) {
@@ -498,7 +498,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleAttribueMenuKeys);
     window.addEventListener('click', handleAttributeClickOutside);
     return () => {
diff --git a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
index 021714d4efa..957be9a910b 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   Menu,
   MenuContent,
@@ -52,7 +52,7 @@ const columnNames = {
 
 export const FilterCheckboxSelect: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [selections, setSelections] = React.useState<string[]>([]);
+  const [selections, setSelections] = useState<string[]>([]);
   const onFilter = (repo: Repository) => {
     if (selections.length === 0) {
       return true;
@@ -75,7 +75,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -88,8 +88,8 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
   // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
-  const [shifting, setShifting] = React.useState(false);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
 
   const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
     // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
@@ -106,7 +106,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -128,11 +128,11 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   }, []);
 
   // Set up bulk selection menu
-  const bulkSelectMenuRef = React.useRef<HTMLDivElement>(null);
-  const bulkSelectToggleRef = React.useRef<any>(null);
-  const bulkSelectContainerRef = React.useRef<HTMLDivElement>(null);
+  const bulkSelectMenuRef = useRef<HTMLDivElement>(null);
+  const bulkSelectToggleRef = useRef<any>(null);
+  const bulkSelectContainerRef = useRef<HTMLDivElement>(null);
 
-  const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState<boolean>(false);
+  const [isBulkSelectOpen, setIsBulkSelectOpen] = useState<boolean>(false);
 
   const handleBulkSelectClickOutside = (event: MouseEvent) => {
     if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) {
@@ -155,7 +155,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -233,10 +233,10 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   );
 
   // Set up checkbox select menu
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current?.contains(event.target as Node)) {
@@ -253,7 +253,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {
diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
index 712112a67ce..f96c9eec76b 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   Toolbar,
   ToolbarContent,
@@ -60,8 +60,8 @@ const columnNames = {
 
 export const FilterFaceted: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [locationSelections, setLocationSelections] = React.useState<string[]>([]);
-  const [statusSelections, setStatusSelections] = React.useState<string[]>([]);
+  const [locationSelections, setLocationSelections] = useState<string[]>([]);
+  const [statusSelections, setStatusSelections] = useState<string[]>([]);
 
   const onFilter = (repo: Repository) => {
     // Search status with status selection
@@ -80,7 +80,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -93,8 +93,8 @@ export const FilterFaceted: React.FunctionComponent = () => {
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
   // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
-  const [shifting, setShifting] = React.useState(false);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
 
   const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
     // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
@@ -111,7 +111,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -133,11 +133,11 @@ export const FilterFaceted: React.FunctionComponent = () => {
   }, []);
 
   // Set up bulk selection menu
-  const bulkSelectMenuRef = React.useRef<HTMLDivElement>(null);
-  const bulkSelectToggleRef = React.useRef<any>(null);
-  const bulkSelectContainerRef = React.useRef<HTMLDivElement>(null);
+  const bulkSelectMenuRef = useRef<HTMLDivElement>(null);
+  const bulkSelectToggleRef = useRef<any>(null);
+  const bulkSelectContainerRef = useRef<HTMLDivElement>(null);
 
-  const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState<boolean>(false);
+  const [isBulkSelectOpen, setIsBulkSelectOpen] = useState<boolean>(false);
 
   const handleBulkSelectClickOutside = (event: MouseEvent) => {
     if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) {
@@ -160,7 +160,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -239,10 +239,10 @@ export const FilterFaceted: React.FunctionComponent = () => {
   );
 
   // Set up location checkbox select
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const handleKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current?.contains(event.target as Node)) {
@@ -259,7 +259,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {
diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
index 1ac0d5a859c..b4610509a51 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   Toolbar,
   ToolbarContent,
@@ -59,8 +59,8 @@ const columnNames = {
 
 export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [locationSelections, setLocationSelections] = React.useState<string[]>([]);
-  const [statusSelection, setStatusSelection] = React.useState('');
+  const [locationSelections, setLocationSelections] = useState<string[]>([]);
+  const [statusSelection, setStatusSelection] = useState('');
 
   const onFilter = (repo: Repository) => {
     // Search status with status selection
@@ -77,7 +77,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -90,8 +90,8 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
   // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
-  const [shifting, setShifting] = React.useState(false);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
 
   const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
     // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
@@ -108,7 +108,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -130,11 +130,11 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   }, []);
 
   // Set up bulk selection menu
-  const bulkSelectMenuRef = React.useRef<HTMLDivElement>(null);
-  const bulkSelectToggleRef = React.useRef<any>(null);
-  const bulkSelectContainerRef = React.useRef<HTMLDivElement>(null);
+  const bulkSelectMenuRef = useRef<HTMLDivElement>(null);
+  const bulkSelectToggleRef = useRef<any>(null);
+  const bulkSelectContainerRef = useRef<HTMLDivElement>(null);
 
-  const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState<boolean>(false);
+  const [isBulkSelectOpen, setIsBulkSelectOpen] = useState<boolean>(false);
 
   const handleBulkSelectClickOutside = (event: MouseEvent) => {
     if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) {
@@ -157,7 +157,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -236,10 +236,10 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   );
 
   // Set up status single select
-  const [isStatusMenuOpen, setIsStatusMenuOpen] = React.useState<boolean>(false);
-  const statusToggleRef = React.useRef<HTMLButtonElement>(null);
-  const statusMenuRef = React.useRef<HTMLDivElement>(null);
-  const statusContainerRef = React.useRef<HTMLDivElement>(null);
+  const [isStatusMenuOpen, setIsStatusMenuOpen] = useState<boolean>(false);
+  const statusToggleRef = useRef<HTMLButtonElement>(null);
+  const statusMenuRef = useRef<HTMLDivElement>(null);
+  const statusContainerRef = useRef<HTMLDivElement>(null);
 
   const handleStatusMenuKeys = (event: KeyboardEvent) => {
     if (isStatusMenuOpen && statusMenuRef.current?.contains(event.target as Node)) {
@@ -256,7 +256,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleStatusMenuKeys);
     window.addEventListener('click', handleStatusClickOutside);
     return () => {
@@ -329,10 +329,10 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   );
 
   // Set up location checkbox select
-  const [isLocationMenuOpen, setIsLocationMenuOpen] = React.useState<boolean>(false);
-  const locationToggleRef = React.useRef<HTMLButtonElement>(null);
-  const locationMenuRef = React.useRef<HTMLDivElement>(null);
-  const locationContainerRef = React.useRef<HTMLDivElement>(null);
+  const [isLocationMenuOpen, setIsLocationMenuOpen] = useState<boolean>(false);
+  const locationToggleRef = useRef<HTMLButtonElement>(null);
+  const locationMenuRef = useRef<HTMLDivElement>(null);
+  const locationContainerRef = useRef<HTMLDivElement>(null);
 
   const handleLocationMenuKeys = (event: KeyboardEvent) => {
     if (isLocationMenuOpen && locationMenuRef.current?.contains(event.target as Node)) {
@@ -349,7 +349,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleLocationMenuKeys);
     window.addEventListener('click', handleLocationClickOutside);
     return () => {
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
index df56da4a35e..40320bbf21c 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   Toolbar,
   ToolbarContent,
@@ -57,8 +57,8 @@ const columnNames = {
 
 export const FilterSameSelectGroup: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [locationSelection, setLocationSelection] = React.useState('All locations');
-  const [statusSelection, setStatusSelection] = React.useState('All statuses');
+  const [locationSelection, setLocationSelection] = useState('All locations');
+  const [statusSelection, setStatusSelection] = useState('All statuses');
 
   const onFilter = (repo: Repository) => {
     // Search status with status selection
@@ -78,7 +78,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -91,8 +91,8 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
   // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
-  const [shifting, setShifting] = React.useState(false);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
 
   const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
     // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
@@ -109,7 +109,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -131,11 +131,11 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   }, []);
 
   // Set up bulk selection menu
-  const bulkSelectMenuRef = React.useRef<HTMLDivElement>(null);
-  const bulkSelectToggleRef = React.useRef<any>(null);
-  const bulkSelectContainerRef = React.useRef<HTMLDivElement>(null);
+  const bulkSelectMenuRef = useRef<HTMLDivElement>(null);
+  const bulkSelectToggleRef = useRef<any>(null);
+  const bulkSelectContainerRef = useRef<HTMLDivElement>(null);
 
-  const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState<boolean>(false);
+  const [isBulkSelectOpen, setIsBulkSelectOpen] = useState<boolean>(false);
 
   const handleBulkSelectClickOutside = (event: MouseEvent) => {
     if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) {
@@ -158,7 +158,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -237,10 +237,10 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   );
 
   // Set up status single select
-  const [isStatusMenuOpen, setIsStatusMenuOpen] = React.useState<boolean>(false);
-  const statusToggleRef = React.useRef<HTMLButtonElement>(null);
-  const statusMenuRef = React.useRef<HTMLDivElement>(null);
-  const statusContainerRef = React.useRef<HTMLDivElement>(null);
+  const [isStatusMenuOpen, setIsStatusMenuOpen] = useState<boolean>(false);
+  const statusToggleRef = useRef<HTMLButtonElement>(null);
+  const statusMenuRef = useRef<HTMLDivElement>(null);
+  const statusContainerRef = useRef<HTMLDivElement>(null);
 
   const handleStatusMenuKeys = (event: KeyboardEvent) => {
     if (isStatusMenuOpen && statusMenuRef.current?.contains(event.target as Node)) {
@@ -257,7 +257,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleStatusMenuKeys);
     window.addEventListener('click', handleStatusClickOutside);
     return () => {
@@ -331,10 +331,10 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   );
 
   // Set up location checkbox select
-  const [isLocationMenuOpen, setIsLocationMenuOpen] = React.useState<boolean>(false);
-  const locationToggleRef = React.useRef<HTMLButtonElement>(null);
-  const locationMenuRef = React.useRef<HTMLDivElement>(null);
-  const locationContainerRef = React.useRef<HTMLDivElement>(null);
+  const [isLocationMenuOpen, setIsLocationMenuOpen] = useState<boolean>(false);
+  const locationToggleRef = useRef<HTMLButtonElement>(null);
+  const locationMenuRef = useRef<HTMLDivElement>(null);
+  const locationContainerRef = useRef<HTMLDivElement>(null);
 
   const handleLocationMenuKeys = (event: KeyboardEvent) => {
     if (isLocationMenuOpen && locationMenuRef.current?.contains(event.target as Node)) {
@@ -351,7 +351,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleLocationMenuKeys);
     window.addEventListener('click', handleLocationClickOutside);
     return () => {
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
index bc075d1f47e..0d52f805997 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   SearchInput,
   Toolbar,
@@ -56,7 +56,7 @@ const columnNames = {
 
 export const FilterSearchInput: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [searchValue, setSearchValue] = React.useState('');
+  const [searchValue, setSearchValue] = useState('');
 
   const onSearchChange = (value: string) => {
     setSearchValue(value);
@@ -81,7 +81,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -94,8 +94,8 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
   // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
-  const [shifting, setShifting] = React.useState(false);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
 
   const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
     // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
@@ -112,7 +112,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -134,11 +134,11 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   }, []);
 
   // Set up bulk selection menu
-  const bulkSelectMenuRef = React.useRef<HTMLDivElement>(null);
-  const bulkSelectToggleRef = React.useRef<any>(null);
-  const bulkSelectContainerRef = React.useRef<HTMLDivElement>(null);
+  const bulkSelectMenuRef = useRef<HTMLDivElement>(null);
+  const bulkSelectToggleRef = useRef<any>(null);
+  const bulkSelectContainerRef = useRef<HTMLDivElement>(null);
 
-  const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState<boolean>(false);
+  const [isBulkSelectOpen, setIsBulkSelectOpen] = useState<boolean>(false);
 
   const handleBulkSelectClickOutside = (event: MouseEvent) => {
     if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) {
@@ -161,7 +161,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
index ce84e4c8c47..0511982670e 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   Menu,
   MenuContent,
@@ -49,7 +49,7 @@ const columnNames = {
 
 export const FilterSingleSelect: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [searchValue, setSearchValue] = React.useState('');
+  const [searchValue, setSearchValue] = useState('');
   const onFilter = (repo: Repository) => {
     if (searchValue === 'all') {
       return true;
@@ -70,7 +70,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -83,8 +83,8 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
   // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
-  const [shifting, setShifting] = React.useState(false);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
 
   const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
     // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
@@ -101,7 +101,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -123,11 +123,11 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   }, []);
 
   // Set up bulk selection menu
-  const bulkSelectMenuRef = React.useRef<HTMLDivElement>(null);
-  const bulkSelectToggleRef = React.useRef<any>(null);
-  const bulkSelectContainerRef = React.useRef<HTMLDivElement>(null);
+  const bulkSelectMenuRef = useRef<HTMLDivElement>(null);
+  const bulkSelectToggleRef = useRef<any>(null);
+  const bulkSelectContainerRef = useRef<HTMLDivElement>(null);
 
-  const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState<boolean>(false);
+  const [isBulkSelectOpen, setIsBulkSelectOpen] = useState<boolean>(false);
 
   const handleBulkSelectClickOutside = (event: MouseEvent) => {
     if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) {
@@ -150,7 +150,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -228,11 +228,11 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   );
 
   // Set up single select menu & state
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [menuSelection, setMenuSelection] = React.useState<string>('all');
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [menuSelection, setMenuSelection] = useState<string>('all');
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current?.contains(event.target as Node)) {
@@ -249,7 +249,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {
diff --git a/packages/react-core/src/demos/HelperText.md b/packages/react-core/src/demos/HelperText.md
index 5e2823e067e..f404d8783ec 100644
--- a/packages/react-core/src/demos/HelperText.md
+++ b/packages/react-core/src/demos/HelperText.md
@@ -3,6 +3,7 @@ id: Helper text
 section: components
 ---
 
+import { useEffect, useState } from 'react';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md
index 60255b256d1..5213798b16e 100644
--- a/packages/react-core/src/demos/JumpLinks.md
+++ b/packages/react-core/src/demos/JumpLinks.md
@@ -3,6 +3,7 @@ id: Jump links
 section: components
 ---
 
+import { useContext, useEffect, useRef, useState } from 'react';
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
@@ -21,6 +22,7 @@ JumpLinks has a scrollspy built-in to make your implementation easier. When impl
 This demo expands on the previous to show the JumpLinks in a vertical layout with subsections. It scrolls the [Page](/components/page)'s `mainContainerId` with an `offset` calculated based on the height of the masthead and the nav list when it appears above the content. The headings are given a tab index to allow the jump links to focus on them.
 
 ```js isFullscreen
+import { useEffect, useState } from 'react';
 import {
   PageSection,
   JumpLinks,
@@ -41,13 +43,13 @@ import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/mas
 ScrollspyH2 = () => {
   const headings = [1, 2, 3, 4, 5];
 
-  const [isVertical, setIsVertical] = React.useState(true);
-  const [offsetHeight, setOffsetHeight] = React.useState(10);
+  const [isVertical, setIsVertical] = useState(true);
+  const [offsetHeight, setOffsetHeight] = useState(10);
   const offsetForPadding = 10;
   let masthead;
 
   // Update offset based on the masthead and jump links nav heights.
-  React.useEffect(() => {
+  useEffect(() => {
     masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
 
     if (isVertical) {
diff --git a/packages/react-core/src/demos/LabelGroupDemos.md b/packages/react-core/src/demos/LabelGroupDemos.md
index 85997ce7cd1..37f3caf3083 100644
--- a/packages/react-core/src/demos/LabelGroupDemos.md
+++ b/packages/react-core/src/demos/LabelGroupDemos.md
@@ -3,6 +3,7 @@ id: Label
 section: components
 ---
 
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
diff --git a/packages/react-core/src/demos/Masthead.md b/packages/react-core/src/demos/Masthead.md
index 5c3a21d9ade..19c6e8e07b5 100644
--- a/packages/react-core/src/demos/Masthead.md
+++ b/packages/react-core/src/demos/Masthead.md
@@ -3,6 +3,7 @@ id: Masthead
 section: components
 ---
 
+import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
diff --git a/packages/react-core/src/demos/MultipleFileUploadDemos.md b/packages/react-core/src/demos/MultipleFileUploadDemos.md
index 711dfbfdbed..913a837598e 100644
--- a/packages/react-core/src/demos/MultipleFileUploadDemos.md
+++ b/packages/react-core/src/demos/MultipleFileUploadDemos.md
@@ -3,7 +3,7 @@ id: Multiple file upload
 section: components
 subsection: file-upload
 ---
-
+import { useEffect, useState } from 'react';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index 29d2d2bf3ec..8e9ff804270 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -3,6 +3,7 @@ id: Navigation
 section: components
 ---
 
+import { Fragment, useState } from 'react';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
diff --git a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
index 90771bdb133..35e40326218 100644
--- a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
+++ b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
@@ -3,6 +3,8 @@ id: Notification drawer
 section: components
 ---
 
+import { Fragment, useRef, useState } from 'react';
+
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index bc9843fe35a..ff49e4a0e62 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -56,31 +56,31 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';
 
 export const NotificationDrawerBasic: React.FunctionComponent = () => {
-  const drawerRef = React.useRef<HTMLElement | null>(null);
+  const drawerRef = useRef<HTMLElement | null>(null);
 
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
 
   interface UnreadMap {
     [notificationId: string]: boolean;
   }
 
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
-  const [isUnreadMap, setIsUnreadMap] = React.useState<UnreadMap | null>({
+  const [activeItem, setActiveItem] = useState<number | string>(0);
+  const [isUnreadMap, setIsUnreadMap] = useState<UnreadMap | null>({
     'notification-1': true,
     'notification-2': true,
     'notification-3': false,
     'notification-4': false
   });
 
-  const [shouldShowNotifications, setShouldShowNotifications] = React.useState(true);
+  const [shouldShowNotifications, setShouldShowNotifications] = useState(true);
 
   interface ActionsMenu {
     [toggleId: string]: boolean;
   }
 
-  const [isActionsMenuOpen, setIsActionsMenuOpen] = React.useState<ActionsMenu | {}>({});
+  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<ActionsMenu | {}>({});
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
index 3f6a64fe35b..51358f47ced 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -58,14 +58,14 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';
 
 export const NotificationDrawerGrouped: React.FunctionComponent = () => {
-  const drawerRef = React.useRef<HTMLElement | null>(null);
+  const drawerRef = useRef<HTMLElement | null>(null);
 
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [firstDrawerGroupExpanded, setFirstDrawerGroupExpanded] = React.useState(false);
-  const [secondDrawerGroupExpanded, setSecondDrawerGroupExpanded] = React.useState(true);
-  const [thirdDrawerGroupExpanded, setThirdDrawerGroupExpanded] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [firstDrawerGroupExpanded, setFirstDrawerGroupExpanded] = useState(false);
+  const [secondDrawerGroupExpanded, setSecondDrawerGroupExpanded] = useState(true);
+  const [thirdDrawerGroupExpanded, setThirdDrawerGroupExpanded] = useState(false);
 
   interface UnreadMap {
     [groupName: string]: {
@@ -73,8 +73,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     } | null;
   }
 
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
-  const [isUnreadMap, setIsUnreadMap] = React.useState<UnreadMap | null>({
+  const [activeItem, setActiveItem] = useState<number | string>(0);
+  const [isUnreadMap, setIsUnreadMap] = useState<UnreadMap | null>({
     'group-1': {
       'notification-5': true,
       'notification-6': true
@@ -86,13 +86,13 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     'group-3': null
   });
 
-  const [shouldShowNotifications, setShouldShowNotifications] = React.useState(true);
+  const [shouldShowNotifications, setShouldShowNotifications] = useState(true);
 
   interface ActionsMenu {
     [toggleId: string]: boolean;
   }
 
-  const [isActionsMenuOpen, setIsActionsMenuOpen] = React.useState<ActionsMenu | {}>({});
+  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<ActionsMenu | {}>({});
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md
index 191b5f3aa1a..5600490267f 100644
--- a/packages/react-core/src/demos/Page.md
+++ b/packages/react-core/src/demos/Page.md
@@ -3,6 +3,7 @@ id: Page
 section: components
 ---
 
+import { useState } from 'react';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
diff --git a/packages/react-core/src/demos/PasswordGenerator.md b/packages/react-core/src/demos/PasswordGenerator.md
index 7f850499797..40035f9b432 100644
--- a/packages/react-core/src/demos/PasswordGenerator.md
+++ b/packages/react-core/src/demos/PasswordGenerator.md
@@ -3,6 +3,7 @@ id: Password generator
 section: patterns
 ---
 
+import { useEffect, useRef, useState } from 'react';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
@@ -12,6 +13,7 @@ import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'
 ### Provide a generated password
 
 ```ts
+import { useEffect, useRef, useState } from 'react';
 import {
   InputGroup,
   InputGroupItem,
@@ -38,14 +40,14 @@ const PasswordGenerator: React.FunctionComponent = () => {
     }
     return retVal;
   };
-  const [password, setPassword] = React.useState<string>('');
-  const [generatedPassword, setGeneratedPassword] = React.useState<string>(generatePassword());
-  const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState<boolean>(false);
-  const [passwordHidden, setPasswordHidden] = React.useState<boolean>(true);
-  const searchInputRef = React.useRef(null);
-  const autocompleteRef = React.useRef(null);
+  const [password, setPassword] = useState<string>('');
+  const [generatedPassword, setGeneratedPassword] = useState<string>(generatePassword());
+  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState<boolean>(false);
+  const [passwordHidden, setPasswordHidden] = useState<boolean>(true);
+  const searchInputRef = useRef(null);
+  const autocompleteRef = .useRef(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {
diff --git a/packages/react-core/src/demos/PasswordStrength.md b/packages/react-core/src/demos/PasswordStrength.md
index 1b4661059e1..009bf0bd667 100644
--- a/packages/react-core/src/demos/PasswordStrength.md
+++ b/packages/react-core/src/demos/PasswordStrength.md
@@ -3,6 +3,7 @@ id: Password strength
 section: patterns
 ---
 
+import { useState } from 'react';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 5d99ca0f484..a3040769493 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -3,6 +3,7 @@ id: Primary-detail
 section: patterns
 ---
 
+import { Fragment, useState } from 'react';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
diff --git a/packages/react-core/src/demos/ProgressDemo.md b/packages/react-core/src/demos/ProgressDemo.md
index ee82845d395..d7c40237f61 100644
--- a/packages/react-core/src/demos/ProgressDemo.md
+++ b/packages/react-core/src/demos/ProgressDemo.md
@@ -2,7 +2,7 @@
 id: Progress
 section: components
 ---
-
+import { useState } from 'react';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ## Demos
@@ -10,11 +10,12 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib
 ### Basic
 
 ```js
+import { useState } from 'react';
 import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ProgressStepperDemo = () => {
-  const [currentValue, setCurrentValue] = React.useState(0);
+  const [currentValue, setCurrentValue] = useState(0);
 
   const onProgressUpdate = (nextValue) => {
     setCurrentValue(nextValue);
@@ -48,10 +49,11 @@ ProgressStepperDemo = () => {
 Sometimes a progress bar should only show increases to progress state. In this case, before the next value is set it should be checked against the current progress. The `Decrease progress` button attempts to set a lower progress value, simulating an update to a progress state that isn't desired, but won't change the progress state due to this check.
 
 ```js
+import { useState } from 'react';
 import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 
 ProgressStepperDemo = () => {
-  const [currentValue, setCurrentValue] = React.useState(0);
+  const [currentValue, setCurrentValue] = useState(0);
 
   const onProgressUpdate = (nextValue) => {
     if (nextValue > currentValue) {
diff --git a/packages/react-core/src/demos/ProgressStepperDemo.md b/packages/react-core/src/demos/ProgressStepperDemo.md
index e157c0bdaaa..d14fe7b2327 100644
--- a/packages/react-core/src/demos/ProgressStepperDemo.md
+++ b/packages/react-core/src/demos/ProgressStepperDemo.md
@@ -3,6 +3,7 @@ id: Progress stepper
 section: components
 ---
 
+import { useState } from 'react';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ## Demos
@@ -10,11 +11,12 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib
 ### Basic
 
 ```js
+import { useState } from 'react';
 import { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ProgressStepperDemo = () => {
-  const [currentStep, setCurrentStep] = React.useState(0);
+  const [currentStep, setCurrentStep] = useState(0);
 
   const steps = [
     { title: 'First step', id: 'step1' },
diff --git a/packages/react-core/src/demos/RTL/RTL.md b/packages/react-core/src/demos/RTL/RTL.md
index 9c921ab5bae..a2c97ba4aeb 100644
--- a/packages/react-core/src/demos/RTL/RTL.md
+++ b/packages/react-core/src/demos/RTL/RTL.md
@@ -3,6 +3,7 @@ id: Right-to-left
 section: patterns
 ---
 
+import { Fragment, useEffect, useState } from 'react';
 import translationsEn from "./examples/translations.en.json";
 import translationsHe from "./examples/translations.he.json";
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
index 208b6a642e7..338444a4d34 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
@@ -1,3 +1,4 @@
+import { Fragment, useEffect, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -56,9 +57,9 @@ import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-ico
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
 export const PaginatedTableAction = () => {
-  const [translation, setTranslation] = React.useState(translationsEn);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
+  const [translation, setTranslation] = useState(translationsEn);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
 
   const columns = [
     translation.table.columns.servers,
@@ -106,9 +107,9 @@ export const PaginatedTableAction = () => {
   };
 
   const rows = createRows();
-  const [managedRows, setManagedRows] = React.useState(rows);
-  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
-  const [isDirRTL, setIsDirRTL] = React.useState(false);
+  const [managedRows, setManagedRows] = useState(rows);
+  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10));
+  const [isDirRTL, setIsDirRTL] = useState(false);
 
   const capitalize = (input) => input[0].toUpperCase() + input.substring(1);
 
@@ -117,13 +118,13 @@ export const PaginatedTableAction = () => {
     setTranslation((prevTranslation) => (prevTranslation === translationsEn ? translationsHe : translationsEn));
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const newRows = createRows();
     setManagedRows(newRows);
     setPaginatedRows(newRows.slice((page - 1) * perPage, page * perPage));
   }, [translation]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const html = document.querySelector('html');
     html.dir = isDirRTL ? 'rtl' : 'ltr';
   }, [isDirRTL]);
@@ -226,7 +227,7 @@ export const PaginatedTableAction = () => {
   };
 
   const toolbarItems = (
-    <React.Fragment>
+    <Fragment>
       <Toolbar id="rtl-paginated-table">
         <ToolbarContent>
           <ToolbarItem>
@@ -246,7 +247,7 @@ export const PaginatedTableAction = () => {
           <ToolbarItem variant="pagination">{renderPagination(PaginationVariant.top)}</ToolbarItem>
         </ToolbarContent>
       </Toolbar>
-    </React.Fragment>
+    </Fragment>
   );
 
   const pageNav = (
@@ -277,9 +278,9 @@ export const PaginatedTableAction = () => {
     </PageSidebar>
   );
 
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
 
   const kebabDropdownItems = (
     <>
@@ -431,7 +432,7 @@ export const PaginatedTableAction = () => {
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Page sidebar={sidebar} masthead={masthead} isManagedSidebar>
         <PageBreadcrumb>
           <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>
@@ -498,6 +499,6 @@ export const PaginatedTableAction = () => {
           </Card>
         </PageSection>
       </Page>
-    </React.Fragment>
+    </Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/SearchInput/SearchInput.md b/packages/react-core/src/demos/SearchInput/SearchInput.md
index e3cc48b1ac9..b51a1d458c6 100644
--- a/packages/react-core/src/demos/SearchInput/SearchInput.md
+++ b/packages/react-core/src/demos/SearchInput/SearchInput.md
@@ -2,7 +2,7 @@
 id: Search input
 section: components
 ---
-
+import { useEffect, useRef, useState } from 'react';
 import {
 Button,
 Card,
@@ -32,19 +32,20 @@ This demo handles building the advanced search form using the composable Menu, a
 It also demonstrates wiring up the appropriate keyboard interactions, focus management, and general event handling.
 
 ```js
+import { useEffect, useRef, useState } from 'react';
 import { Menu, MenuContent, MenuItem, MenuList, Popper, SearchInput } from '@patternfly/react-core';
 
 import { words } from './words.js';
 
 SearchAutocomplete = () => {
-  const [value, setValue] = React.useState('');
-  const [hint, setHint] = React.useState('');
-  const [autocompleteOptions, setAutocompleteOptions] = React.useState([]);
+  const [value, setValue] = useState('');
+  const [hint, setHint] = useState('');
+  const [autocompleteOptions, setAutocompleteOptions] = useState([]);
 
-  const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState(false);
+  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
 
-  const searchInputRef = React.useRef(null);
-  const autocompleteRef = React.useRef(null);
+  const searchInputRef = useRef(null);
+  const autocompleteRef = useRef(null);
 
   const onClear = () => {
     setValue('');
@@ -154,7 +155,7 @@ SearchAutocomplete = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {
@@ -206,6 +207,7 @@ keyboard interactions, focus management, and general event handling.
 Note: This demo and its handling of 'date within' and a date picker is modeled after the gmail advanced search form.
 
 ```js
+import { useEffect, useRef, useState } from 'react';
 import {
   ActionGroup,
   Button,
@@ -230,20 +232,20 @@ import {
 } from '@patternfly/react-core';
 
 AdvancedComposableSearchInput = () => {
-  const [value, setValue] = React.useState('');
-  const [hasWords, setHasWords] = React.useState('');
-  const [dateWithin, setDateWithin] = React.useState('1 day');
-  const [date, setDate] = React.useState();
+  const [value, setValue] = useState('');
+  const [hasWords, setHasWords] = useState('');
+  const [dateWithin, setDateWithin] = useState('1 day');
+  const [date, setDate] = useState();
 
-  const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = React.useState(false);
-  const [isDateWithinOpen, setIsDateWithinOpen] = React.useState(false);
+  const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = useState(false);
+  const [isDateWithinOpen, setIsDateWithinOpen] = useState(false);
 
-  const isInitialMount = React.useRef(true);
-  const firstAttrRef = React.useRef(null);
-  const searchInputRef = React.useRef(null);
-  const advancedSearchPaneRef = React.useRef(null);
-  const dateWithinToggleRef = React.useRef(undefined);
-  const dateWithinMenuRef = React.useRef(undefined);
+  const isInitialMount = useRef(true);
+  const firstAttrRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const advancedSearchPaneRef = useRef(null);
+  const dateWithinToggleRef = useRef(undefined);
+  const dateWithinMenuRef = useRef(undefined);
 
   const onClear = () => {
     setValue('');
@@ -264,7 +266,7 @@ AdvancedComposableSearchInput = () => {
   // After initial page load, whenever the advanced search menu is opened, the browser focus should be placed on the
   // first advanced search form input. Whenever the advanced search menu is closed, the browser focus should
   // be returned to the search input.
-  React.useEffect(() => {
+  useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
@@ -320,7 +322,7 @@ AdvancedComposableSearchInput = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {
diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
index 160e445fb42..846321906e0 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -3,6 +3,7 @@ id: Tabs
 section: components
 ---
 
+import { Fragment, useCallback, useRef, useState } from 'react';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -21,6 +22,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 ### Open tabs
 
 ```js isFullscreen
+import { useState } from 'react';
 import {
   PageSection,
   PageBreadcrumb,
@@ -47,7 +49,7 @@ import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 TabsOpenDemo = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(0);
+  const [activeTabKey, setActiveTabKey] = useState(0);
 
   // Toggle currently active tab
   const handleTabClick = (event, tabIndex) => {
@@ -210,6 +212,7 @@ TabsOpenDemo = () => {
 ### Open tabs with secondary tabs
 
 ```js isFullscreen
+import { useState } from 'react';
 import {
   PageSection,
   PageBreadcrumb,
@@ -236,8 +239,8 @@ import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 TabsOpenWithSecondaryTabsDemo = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(0);
-  const [activeTabKeySecondary, setActiveTabKeySecondary] = React.useState(10);
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10);
 
   // Toggle currently active tab
   const handleTabClick = (event, tabIndex) => {
diff --git a/packages/react-core/src/demos/TextInputGroupDemo.md b/packages/react-core/src/demos/TextInputGroupDemo.md
index bb781892b8e..683bfc1585c 100644
--- a/packages/react-core/src/demos/TextInputGroupDemo.md
+++ b/packages/react-core/src/demos/TextInputGroupDemo.md
@@ -3,6 +3,7 @@ id: Text input group
 section: components
 ---
 
+import { useEffect, useRef, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
diff --git a/packages/react-core/src/demos/Toolbar.md b/packages/react-core/src/demos/Toolbar.md
index 5ed799c61cd..2ab2ced8931 100644
--- a/packages/react-core/src/demos/Toolbar.md
+++ b/packages/react-core/src/demos/Toolbar.md
@@ -3,6 +3,7 @@ id: Toolbar
 section: components
 ---
 
+import { Fragment, useState } from 'react';
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
diff --git a/packages/react-core/src/demos/Wizard/WizardDemo.md b/packages/react-core/src/demos/Wizard/WizardDemo.md
index cf8e3003160..fda29f8b4ea 100644
--- a/packages/react-core/src/demos/Wizard/WizardDemo.md
+++ b/packages/react-core/src/demos/Wizard/WizardDemo.md
@@ -4,6 +4,8 @@ section: components
 source: react-demos
 ---
 
+import { Fragment, useRef, useState } from 'react';
+
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
diff --git a/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx b/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx
index 27e7f399814..458b75f6474 100644
--- a/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { Fragment, type JSX } from 'react';
+import { Fragment } from 'react';
 import {
   Card,
   CardBody,
@@ -28,7 +28,7 @@ interface CardData {
   [attribute: string]: {
     title: string;
     content: {
-      icon: JSX.Element;
+      icon: React.JSX.Element;
       count?: number;
       status?: string;
       subtitle?: string;
diff --git a/packages/react-core/src/demos/examples/Card/CardEventsView.tsx b/packages/react-core/src/demos/examples/Card/CardEventsView.tsx
index bc7507b58ab..45b2c702a64 100644
--- a/packages/react-core/src/demos/examples/Card/CardEventsView.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardEventsView.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 /* eslint-disable camelcase */
 import {
   Card,
@@ -29,7 +29,7 @@ import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 export const CardEventsView: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const selectItems = (
     <SelectList>
diff --git a/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx b/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
index 3104c575dff..f4ae6d7b064 100644
--- a/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -24,8 +25,8 @@ import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardHorizontalGrid: React.FunctionComponent = () => {
-  const [isCardExpanded, setIsCardExpanded] = React.useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isCardExpanded, setIsCardExpanded] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const onCardExpand = () => {
     setIsCardExpanded(!isCardExpanded);
diff --git a/packages/react-core/src/demos/examples/Card/CardLogView.tsx b/packages/react-core/src/demos/examples/Card/CardLogView.tsx
index 67d327fb9a4..83917f3f071 100644
--- a/packages/react-core/src/demos/examples/Card/CardLogView.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardLogView.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 /* eslint-disable camelcase */
 import {
   Card,
@@ -24,7 +24,7 @@ import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 export const CardLogView: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const selectItems = (
     <SelectList>
diff --git a/packages/react-core/src/demos/examples/Card/CardNested.tsx b/packages/react-core/src/demos/examples/Card/CardNested.tsx
index a4f67d9e748..40c3fb9973f 100644
--- a/packages/react-core/src/demos/examples/Card/CardNested.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardNested.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -17,10 +18,10 @@ import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 export const CardNested: React.FunctionComponent = () => {
-  const [isCardExpanded1, onCardExpand1] = React.useState(true);
-  const [isCardExpanded2, onCardExpand2] = React.useState(false);
-  const [isCardExpanded3, onCardExpand3] = React.useState(false);
-  const [isToggleOnRight, onCheckClick] = React.useState(false);
+  const [isCardExpanded1, onCardExpand1] = useState(true);
+  const [isCardExpanded2, onCardExpand2] = useState(false);
+  const [isCardExpanded3, onCardExpand3] = useState(false);
+  const [isToggleOnRight, onCheckClick] = useState(false);
 
   return (
     <>
diff --git a/packages/react-core/src/demos/examples/Card/CardStatus.tsx b/packages/react-core/src/demos/examples/Card/CardStatus.tsx
index 9535877cf19..c8b9d36760d 100644
--- a/packages/react-core/src/demos/examples/Card/CardStatus.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardStatus.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 /* eslint-disable camelcase */
 import {
   Alert,
@@ -29,12 +30,12 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/excla
 import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 
 export const CardStatus: React.FunctionComponent = () => {
-  const [drawerExpanded, setDrawerExpanded] = React.useState(false);
+  const [drawerExpanded, setDrawerExpanded] = useState(false);
   const handleDrawerToggleClick = () => {
     setDrawerExpanded(!drawerExpanded);
   };
 
-  const [rowsExpanded, setRowsExpanded] = React.useState([false, false, false]);
+  const [rowsExpanded, setRowsExpanded] = useState([false, false, false]);
   const handleToggleExpand = (_: any, rowIndex: number) => {
     const newRowsExpanded = [...rowsExpanded];
     newRowsExpanded[rowIndex] = !rowsExpanded[rowIndex];
diff --git a/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx b/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx
index 5b8ed3fe328..c54736922bf 100644
--- a/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardBody,
@@ -62,7 +63,7 @@ const descriptionListData = [
 ];
 
 export const CardStatusTabbed: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(0);
+  const [activeTabKey, setActiveTabKey] = useState(0);
   const handleTabClick = (_e: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveTabKey(Number(tabIndex));
   };
diff --git a/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx b/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx
index 9d0a9058f1c..0e9599ffde4 100644
--- a/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardTitle,
@@ -19,7 +20,7 @@ import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 export const CardWithAccordion: React.FunctionComponent = () => {
-  const [openCPU, setOpenCPU] = React.useState('cpu1');
+  const [openCPU, setOpenCPU] = useState('cpu1');
 
   return (
     <Card>
diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
index ef3dac71b23..f6307721257 100644
--- a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
+++ b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   CalendarMonth,
   InputGroup,
@@ -15,10 +16,10 @@ import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outl
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 
 export const DateTimePicker: React.FunctionComponent = () => {
-  const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
-  const [isTimeOpen, setIsTimeOpen] = React.useState(false);
-  const [valueDate, setValueDate] = React.useState('MM-DD-YYYY');
-  const [valueTime, setValueTime] = React.useState('HH:MM');
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const [isTimeOpen, setIsTimeOpen] = useState(false);
+  const [valueDate, setValueDate] = useState('MM-DD-YYYY');
+  const [valueTime, setValueTime] = useState('HH:MM');
   const times = Array.from(new Array(10), (_, i) => i + 8);
   const defaultTime = '0:00';
   const dateFormat = (date: Date) =>
diff --git a/packages/react-core/src/demos/examples/HelperText/HelperTextDynamic.tsx b/packages/react-core/src/demos/examples/HelperText/HelperTextDynamic.tsx
index 4784660a5d0..7037178545c 100644
--- a/packages/react-core/src/demos/examples/HelperText/HelperTextDynamic.tsx
+++ b/packages/react-core/src/demos/examples/HelperText/HelperTextDynamic.tsx
@@ -1,14 +1,15 @@
+import { useEffect, useState } from 'react';
 import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 export const HelperTextDynamic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [inputValidation, setInputValidation] = React.useState('default');
+  const [value, setValue] = useState('');
+  const [inputValidation, setInputValidation] = useState('default');
 
   const handleInputChange = (_event, inputValue: string) => {
     setValue(inputValue);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (value === '') {
       setInputValidation('default');
     } else if (value === 'johndoe') {
diff --git a/packages/react-core/src/demos/examples/HelperText/HelperTextStatic.tsx b/packages/react-core/src/demos/examples/HelperText/HelperTextStatic.tsx
index 350e1513a2a..cd79b7998cb 100644
--- a/packages/react-core/src/demos/examples/HelperText/HelperTextStatic.tsx
+++ b/packages/react-core/src/demos/examples/HelperText/HelperTextStatic.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 export const HelperTextStaticText: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
 
   const handleInputChange = (_event, inputValue: string) => {
     setValue(inputValue);
diff --git a/packages/react-core/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx b/packages/react-core/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx
index a244299ad22..2cfa7782fc0 100644
--- a/packages/react-core/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx
+++ b/packages/react-core/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx
@@ -1,14 +1,15 @@
+import { useEffect, useState } from 'react';
 import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 export const HelperTextStaticTextDynamicVariant: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [inputValidation, setInputValidation] = React.useState({
+  const [value, setValue] = useState('');
+  const [inputValidation, setInputValidation] = useState({
     ruleLength: 'indeterminate',
     ruleCharacterTypes: 'indeterminate'
   });
   const { ruleLength, ruleCharacterTypes } = inputValidation;
 
-  React.useEffect(() => {
+  useEffect(() => {
     let lengthVariant = ruleLength;
     let typeVariant = ruleCharacterTypes;
 
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
index 3c44e13ee93..17e783f7ed5 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -49,14 +50,14 @@ interface NavOnSelectProps {
 }
 
 export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(0);
 
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
@@ -104,7 +105,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
 
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index 849a3ac4b5b..b1a705abf0a 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -66,17 +66,17 @@ interface NavOnSelectProps {
 }
 
 export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
-
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [refFullOptions, setRefFullOptions] = React.useState<Element[]>();
-  const [favorites, setFavorites] = React.useState<string[]>([]);
-  const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [refFullOptions, setRefFullOptions] = useState<Element[]>();
+  const [favorites, setFavorites] = useState<string[]>([]);
+  const [filteredIds, setFilteredIds] = useState<string[]>(['*']);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
@@ -138,7 +138,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     setIsOpen(!isOpen);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
 
@@ -249,8 +249,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     const filteredCopy = items
       .map((group) => {
         if (group.type === MenuGroup) {
-          const filteredGroup = React.cloneElement(group, {
-            children: React.cloneElement(group.props.children, {
+          const filteredGroup = cloneElement(group, {
+            children: cloneElement(group.props.children, {
               children: group.props.children.props.children.filter((child) => {
                 if (filteredIds.includes(child.props.itemId)) {
                   return child;
@@ -266,7 +266,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
             keepDivider = false;
           }
         } else if (group.type === MenuList) {
-          const filteredGroup = React.cloneElement(group, {
+          const filteredGroup = cloneElement(group, {
             children: group.props.children.filter((child) => {
               if (filteredIds.includes(child.props.itemId)) {
                 return child;
diff --git a/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx b/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx
index 87a1a6593bb..644f280ab94 100644
--- a/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx
+++ b/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { FileRejection } from 'react-dropzone';
 import {
   MultipleFileUpload,
@@ -20,12 +21,12 @@ interface readFile {
 }
 
 export const MultipleFileUploadBasic: React.FunctionComponent = () => {
-  const [isHorizontal, setIsHorizontal] = React.useState(false);
-  const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
-  const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
-  const [showStatus, setShowStatus] = React.useState(false);
-  const [statusIcon, setStatusIcon] = React.useState('inProgress');
-  const [modalText, setModalText] = React.useState('');
+  const [isHorizontal, setIsHorizontal] = useState(false);
+  const [currentFiles, setCurrentFiles] = useState<File[]>([]);
+  const [readFileData, setReadFileData] = useState<readFile[]>([]);
+  const [showStatus, setShowStatus] = useState(false);
+  const [statusIcon, setStatusIcon] = useState('inProgress');
+  const [modalText, setModalText] = useState('');
 
   // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed
   if (!showStatus && currentFiles.length > 0) {
@@ -33,7 +34,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   }
 
   // determine the icon that should be shown for the overall status list
-  React.useEffect(() => {
+  useEffect(() => {
     if (readFileData.length < currentFiles.length) {
       setStatusIcon('inProgress');
     } else if (readFileData.every((file) => file.loadResult === 'success')) {
diff --git a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
index 842d3a94f2f..e9000dfc679 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
@@ -1,4 +1,4 @@
-import { type JSX, useState } from 'react';
+import { useState } from 'react';
 
 import {
   Page,
@@ -30,7 +30,7 @@ function getNavLayer(menuId: string): number {
   return 1;
 }
 
-const subMenuTwo: JSX.Element = (
+const subMenuTwo: React.JSX.Element = (
   <DrilldownMenu id="subMenu-2">
     <MenuItem itemId="subMenu-2-breadcrumb" direction="up">
       SubMenu 1 - Item 1
@@ -47,7 +47,7 @@ const subMenuTwo: JSX.Element = (
   </DrilldownMenu>
 );
 
-const subMenuOne: JSX.Element = (
+const subMenuOne: React.JSX.Element = (
   <DrilldownMenu id="subMenu-1">
     <MenuItem itemId="subMenu-1-breadcrumb" direction="up">
       Item 1
diff --git a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
index 995ae65a193..6bad93ef126 100644
--- a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   CardBody,
@@ -19,8 +19,8 @@ import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/Dashbo
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavExpandableDemo: React.FunctionComponent = () => {
-  const [activeGroup, setActiveGroup] = React.useState<string | number>('grp-1');
-  const [activeItem, setActiveItem] = React.useState<string | number>('grp-1_itm-1');
+  const [activeGroup, setActiveGroup] = useState<string | number>('grp-1');
+  const [activeItem, setActiveItem] = useState<string | number>('grp-1_itm-1');
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index 6280c123a41..d15b479163d 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -44,13 +45,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
 export const NavFlyout: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isMobileView, setIsMobileView] = React.useState(false);
-  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true);
-  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [isMobileView, setIsMobileView] = useState(false);
+  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(true);
+  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(false);
+  const [activeItem, setActiveItem] = useState<number | string>(0);
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
index 5dbcb4b6f68..c2e23680e18 100644
--- a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Content,
   Nav,
@@ -12,7 +13,7 @@ import {
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavGrouped: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<number | string>('grp-1_itm-1');
+  const [activeItem, setActiveItem] = useState<number | string>('grp-1_itm-1');
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
index fa33c705104..ff4e71e9714 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -42,10 +42,10 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const NavHorizontal: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
index 7dc2be2087f..5cdfab5b77a 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -46,11 +46,11 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
-  const [activeSubNavItem, setActiveSubNavItem] = React.useState<string | number>(7);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
+  const [activeSubNavItem, setActiveSubNavItem] = useState<string | number>(7);
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
index 4168a592c6a..f6b5aba16d4 100644
--- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -46,13 +46,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
 export const NavManual: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isMobileView, setIsMobileView] = React.useState(false);
-  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true);
-  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [isMobileView, setIsMobileView] = useState(false);
+  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(true);
+  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(false);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
index fd986b91398..c4ec34cdf8e 100644
--- a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   CardBody,
@@ -19,8 +19,8 @@ import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/Dashbo
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavWithSubnav: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
-  const [activeSubNavItem, setActiveSubNavItem] = React.useState<string | number>(7);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
+  const [activeSubNavItem, setActiveSubNavItem] = useState<string | number>(7);
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
diff --git a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
index 4476f067db4..287944bb03e 100644
--- a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -53,12 +54,12 @@ interface NavOnSelectProps {
 }
 
 export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isContextSelectorOpen, setIsContextSelectorOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index c835d384d5e..8e47b5bcfab 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -53,10 +54,10 @@ interface NavOnSelectProps {
 }
 
 export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index bbfb7eb7c74..0ee2e666e23 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -56,10 +57,10 @@ interface NavOnSelectProps {
 }
 
 export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
diff --git a/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx b/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx
index f67c816cb2d..343096fdd3a 100644
--- a/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx
+++ b/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx
@@ -1,4 +1,4 @@
-import { type JSX, useState } from 'react';
+import { useState } from 'react';
 import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
@@ -8,7 +8,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
   type HelperTextItemVariant = 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
   interface PassStrength {
     variant: HelperTextItemVariant;
-    icon: JSX.Element;
+    icon: React.JSX.Element;
     text: string;
   }
 
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
index e503158f882..33854cee367 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Badge,
   Button,
@@ -53,20 +53,20 @@ import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrap
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 export const PrimaryDetailCardView: React.FunctionComponent = () => {
-  const [totalItemCount, setTotalItemCount] = React.useState(10);
-  const [cardData, setCardData] = React.useState(data);
-  const [isChecked, setIsChecked] = React.useState(false);
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const [areAllSelected, setAreAllSelected] = React.useState<boolean>(false);
-  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
-  const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = React.useState(false);
-  const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
-  const [filters, setFilters] = React.useState<Record<string, string[]>>({ products: [] });
-  const [state, setState] = React.useState({});
-  const [activeCard, setActiveCard] = React.useState(-1);
+  const [totalItemCount, setTotalItemCount] = useState(10);
+  const [cardData, setCardData] = useState(data);
+  const [isChecked, setIsChecked] = useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+  const [areAllSelected, setAreAllSelected] = useState<boolean>(false);
+  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = useState(false);
+  const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = useState(false);
+  const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+  const [filters, setFilters] = useState<Record<string, string[]>>({ products: [] });
+  const [state, setState] = useState({});
+  const [activeCard, setActiveCard] = useState(-1);
 
   interface ProductType {
     id: number;
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
index d990b6a30fc..116dc8a11c7 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [
 ];
 
 export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
-  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsOpen, setStatusIsOpen] = useState(false);
+  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = useState(false);
+  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');
 
   const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
     setStatusSelected(value);
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
index 38c1eb3e0c1..4421b582829 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   Content,
@@ -32,10 +32,10 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('dataListItem1');
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('dataListItem1');
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
index 8254b7855f2..57eed2f56e4 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [
 ];
 
 export const PrimaryDetailFullPage: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
-  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsOpen, setStatusIsOpen] = useState(false);
+  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = useState(false);
+  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');
 
   const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
     setStatusSelected(value);
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
index 4692819ba03..0bed1377fc2 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [
 ];
 
 export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
-  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsOpen, setStatusIsOpen] = useState(false);
+  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = useState(false);
+  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');
 
   const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
     setStatusSelected(value);
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
index aa715574334..56d741b110e 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   Content,
@@ -23,8 +23,8 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onSelectListItem = (_listItem, listItemProps) => {
     const id = listItemProps.children;
diff --git a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
index 639dd113db4..e6060a85566 100644
--- a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useCallback, useState } from 'react';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import {
   PageSection,
@@ -47,11 +47,11 @@ const products: Product[] = [
 ];
 
 export const ModalTabs: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(true);
-  const [selectedProduct, setSelectedProduct] = React.useState<Product | undefined>(products[0]);
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [selectedProduct, setSelectedProduct] = useState<Product | undefined>(products[0]);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
 
-  const onCardClick = React.useCallback(
+  const onCardClick = useCallback(
     (product: Product) => () => {
       setSelectedProduct(product);
       setIsModalOpen(true);
@@ -59,13 +59,13 @@ export const ModalTabs: React.FunctionComponent = () => {
     []
   );
 
-  const closeModal = React.useCallback(() => {
+  const closeModal = useCallback(() => {
     setSelectedProduct(undefined);
     setIsModalOpen(false);
     setActiveTabKey(0);
   }, []);
 
-  const onTabSelect = React.useCallback(
+  const onTabSelect = useCallback(
     (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => setActiveTabKey(tabIndex),
     []
   );
diff --git a/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx b/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx
index 03cb03ec4da..52247356beb 100644
--- a/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -19,8 +20,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 
 export const NestedTabs: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(0);
-  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const [activeNestedTabKey, setActiveNestedTabKey] = useState(10);
 
   // Toggle currently active tab
   const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);
diff --git a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
index e55decfd910..c38caab0cd7 100644
--- a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -18,8 +19,8 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const NestedUnindentedTabs: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(1);
-  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
+  const [activeTabKey, setActiveTabKey] = useState(1);
+  const [activeNestedTabKey, setActiveNestedTabKey] = useState(10);
 
   // Toggle currently active tab
   const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);
diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index 68f21736711..36edd58e7ff 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 /* eslint-disable no-console */
 import {
   Button,
@@ -67,13 +67,13 @@ interface Repository {
 
 export const TablesAndTabs = () => {
   // secondary tab properties
-  const [secondaryActiveTabKey, setSecondaryActiveTabKey] = React.useState<number>(10);
+  const [secondaryActiveTabKey, setSecondaryActiveTabKey] = useState<number>(10);
   const handleSecondaryTabClick = (tabIndex: number) => {
     setSecondaryActiveTabKey(tabIndex);
   };
 
   // drawer properties
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(true);
+  const [isExpanded, setIsExpanded] = useState<boolean>(true);
 
   // table properties
   // In real usage, this data would come from some external source like an API via props.
@@ -93,7 +93,7 @@ export const TablesAndTabs = () => {
     lastCommit: 'Last commit'
   };
 
-  const [selectedRepoName, setSelectedRepoName] = React.useState<string>(repositories[0].name);
+  const [selectedRepoName, setSelectedRepoName] = useState<string>(repositories[0].name);
   const isRepoSelected = (repo: Repository) => repo.name === selectedRepoName;
   const setRepoSelected = (_event: React.FormEvent<HTMLInputElement>, repo: Repository) => {
     setSelectedRepoName(repo.name);
@@ -127,7 +127,7 @@ export const TablesAndTabs = () => {
     }
   ];
 
-  const firstActionRef = React.useRef<HTMLButtonElement>(null);
+  const firstActionRef = useRef<HTMLButtonElement>(null);
 
   /** Handles when the user clicks on the custom action toggle, stops propagation to prevent the drawer from opening */
   const handleActionsToggleClick = (event: React.MouseEvent, ActionsToggleProps: CustomActionsToggleProps) => {
diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
index 22d80727c85..962bfbd1615 100644
--- a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
+++ b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   TextInputGroup,
   TextInputGroupMain,
@@ -16,10 +17,10 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const AttributeValueFiltering: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [selectedKey, setSelectedKey] = React.useState('');
-  const [menuIsOpen, setMenuIsOpen] = React.useState(false);
-  const [currentChips, setCurrentChips] = React.useState<string[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [selectedKey, setSelectedKey] = useState('');
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [currentChips, setCurrentChips] = useState<string[]>([]);
 
   interface attributeValueData {
     [attribute: string]: string[];
@@ -35,12 +36,12 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
     Status: ['running', 'idle', 'stopped']
   };
   const keyNames = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status'];
-  const [menuItemsText, setMenuItemsText] = React.useState(keyNames);
-  const [menuItems, setMenuItems] = React.useState<React.ReactElement<any>[]>([]);
+  const [menuItemsText, setMenuItemsText] = useState(keyNames);
+  const [menuItems, setMenuItems] = useState<React.ReactElement<any>[]>([]);
 
   /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
-  const textInputGroupRef = React.useRef<HTMLDivElement>(undefined);
+  const menuRef = useRef<HTMLDivElement>(undefined);
+  const textInputGroupRef = useRef<HTMLDivElement>(undefined);
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
@@ -66,7 +67,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
     clearSelectedKey();
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     /** in the menu only show items that include the text in the input */
     const filteredMenuItems = menuItemsText
       .filter(
diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
index f3618a4da54..f9944f9b986 100644
--- a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
+++ b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   TextInputGroup,
   TextInputGroupMain,
@@ -16,18 +17,18 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const AutoCompleteSearch: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [menuIsOpen, setMenuIsOpen] = React.useState(false);
-  const [currentChips, setCurrentChips] = React.useState<string[]>([]);
-  const [hint, setHint] = React.useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [currentChips, setCurrentChips] = useState<string[]>([]);
+  const [hint, setHint] = useState('');
 
   /** auto-completing suggestion text items to be shown in the menu */
   const suggestionItems = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status'];
-  const [menuItems, setMenuItems] = React.useState<React.ReactElement<any>[]>([]);
+  const [menuItems, setMenuItems] = useState<React.ReactElement<any>[]>([]);
 
   /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
-  const textInputGroupRef = React.useRef<HTMLDivElement>(undefined);
+  const menuRef = useRef<HTMLDivElement>(undefined);
+  const textInputGroupRef = useRef<HTMLDivElement>(undefined);
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
@@ -46,7 +47,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
     setInputValue('');
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     /** in the menu only show items that include the text in the input */
     const filteredMenuItems = suggestionItems
       .filter((item) => !inputValue || item.toLowerCase().includes(inputValue.toString().toLowerCase()))
diff --git a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
index 16452705c10..e384267cc76 100644
--- a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
+++ b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Badge,
   Button,
@@ -35,22 +35,22 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
     'container-sample-3': { type: 'E' }
   };
 
-  const [containerExpanded, setContainerExpanded] = React.useState(false);
-  const [containerExpandedMobile, setContainerExpandedMobile] = React.useState(false);
-  const [containerSelected, setContainerSelected] = React.useState(Object.keys(firstOptions)[0]);
-  const [optionExpanded, setOptionExpanded] = React.useState(false);
-  const [optionExpandedMobile, setOptionExpandedMobile] = React.useState(false);
-  const [isPaused, setIsPaused] = React.useState(false);
-  const [firstSwitchChecked, setFirstSwitchChecked] = React.useState(true);
-  const [secondSwitchChecked, setSecondSwitchChecked] = React.useState(false);
-  const [searchValue, setSearchValue] = React.useState('');
-  const [searchResultsCount, setSearchResultsCount] = React.useState(3);
-  const [currentSearchResult, setCurrentSearchResult] = React.useState(1);
-  const [externalExpanded, setExternalExpanded] = React.useState(false);
-  const [externalExpandedMobile, setExternalExpandedMobile] = React.useState(false);
-  const [downloadExpanded, setDownloadExpanded] = React.useState(false);
-  const [downloadExpandedMobile, setDownloadExpandedMobile] = React.useState(false);
-  const [mobileView, setMobileView] = React.useState(window.innerWidth >= 1450 ? false : true);
+  const [containerExpanded, setContainerExpanded] = useState(false);
+  const [containerExpandedMobile, setContainerExpandedMobile] = useState(false);
+  const [containerSelected, setContainerSelected] = useState(Object.keys(firstOptions)[0]);
+  const [optionExpanded, setOptionExpanded] = useState(false);
+  const [optionExpandedMobile, setOptionExpandedMobile] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const [firstSwitchChecked, setFirstSwitchChecked] = useState(true);
+  const [secondSwitchChecked, setSecondSwitchChecked] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResultsCount, setSearchResultsCount] = useState(3);
+  const [currentSearchResult, setCurrentSearchResult] = useState(1);
+  const [externalExpanded, setExternalExpanded] = useState(false);
+  const [externalExpandedMobile, setExternalExpandedMobile] = useState(false);
+  const [downloadExpanded, setDownloadExpanded] = useState(false);
+  const [downloadExpandedMobile, setDownloadExpandedMobile] = useState(false);
+  const [mobileView, setMobileView] = useState(window.innerWidth >= 1450 ? false : true);
 
   const onContainerToggle = () => {
     setContainerExpanded((prevState) => !prevState);
diff --git a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx
index d1eb8bb205e..f9503ad113e 100644
--- a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Button,
   Drawer,
@@ -15,8 +16,8 @@ import {
 } from '@patternfly/react-core';
 
 export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLSpanElement | null>(null);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const drawerRef = useRef<HTMLSpanElement | null>(null);
 
   const onExpand = () => {
     if (drawerRef.current) {
diff --git a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx
index 782d13286d8..688addb71ee 100644
--- a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Button,
   Content,
@@ -16,8 +17,8 @@ import {
 } from '@patternfly/react-core';
 
 export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLSpanElement | null>(null);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const drawerRef = useRef<HTMLSpanElement | null>(null);
 
   const onExpand = () => {
     if (drawerRef.current) {
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
index d0139cb7623..8426523dd9a 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Brand,
   Breadcrumb,
@@ -34,10 +34,10 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [activeItem, setActiveItem] = useState(0);
 
-  const drawerRef = React.useRef<HTMLSpanElement>(null);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     if (drawerRef.current) {
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
index 045c2698c67..226b6423a04 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Brand,
   Breadcrumb,
@@ -34,10 +34,10 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [activeItem, setActiveItem] = useState(0);
 
-  const drawerRef = React.useRef<HTMLSpanElement | null>(null);
+  const drawerRef = useRef<HTMLSpanElement | null>(null);
 
   const onExpand = () => {
     if (drawerRef.current) {
diff --git a/packages/react-core/src/deprecated/components/Chip/examples/Chip.md b/packages/react-core/src/deprecated/components/Chip/examples/Chip.md
index a511c2bba36..3efdea7eaa8 100644
--- a/packages/react-core/src/deprecated/components/Chip/examples/Chip.md
+++ b/packages/react-core/src/deprecated/components/Chip/examples/Chip.md
@@ -7,7 +7,7 @@ ouia: true
 deprecated: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 ## Examples
 
diff --git a/packages/react-core/src/deprecated/components/Chip/examples/ChipDefault.tsx b/packages/react-core/src/deprecated/components/Chip/examples/ChipDefault.tsx
index 825fe3700c3..4e6e9db293b 100644
--- a/packages/react-core/src/deprecated/components/Chip/examples/ChipDefault.tsx
+++ b/packages/react-core/src/deprecated/components/Chip/examples/ChipDefault.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Badge } from '@patternfly/react-core';
 import { Chip } from '@patternfly/react-core/deprecated';
 
 export const ChipDefault: React.FunctionComponent = () => {
-  const [chips, setChips] = React.useState({
+  const [chips, setChips] = useState({
     chip: {
       name: 'Chip 1'
     },
diff --git a/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupInline.tsx b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupInline.tsx
index 8686b598ce5..7961bce45b6 100644
--- a/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupInline.tsx
+++ b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupInline.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 
 export const ChipGroupInline: React.FunctionComponent = () => {
-  const [chips, setChips] = React.useState([
+  const [chips, setChips] = useState([
     'Chip one',
     'Really long chip that goes on and on',
     'Chip three',
diff --git a/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx
index 7182a91b08a..9d045705472 100644
--- a/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx
+++ b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 
 export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
-  const [chipGroup1, setChipGroup1] = React.useState(['Chip one', 'Chip two', 'Chip three']);
-  const [chipGroup2, setChipGroup2] = React.useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']);
+  const [chipGroup1, setChipGroup1] = useState(['Chip one', 'Chip two', 'Chip three']);
+  const [chipGroup2, setChipGroup2] = useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']);
 
   const deleteItem = (id: string, group: string[]) => {
     const copyOfChips = [...group];
diff --git a/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupWithCategories.tsx b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupWithCategories.tsx
index f217a86c195..1382729f63d 100644
--- a/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupWithCategories.tsx
+++ b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupWithCategories.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 
 export const ChipGroupWithCategories: React.FunctionComponent = () => {
-  const [chips, setChips] = React.useState([
+  const [chips, setChips] = useState([
     'Chip one',
     'Really long chip that goes on and on',
     'Chip three',
diff --git a/packages/react-core/src/deprecated/components/DragDrop/examples/DragDrop.md b/packages/react-core/src/deprecated/components/DragDrop/examples/DragDrop.md
index 959d3d4a8bf..343168ef33d 100644
--- a/packages/react-core/src/deprecated/components/DragDrop/examples/DragDrop.md
+++ b/packages/react-core/src/deprecated/components/DragDrop/examples/DragDrop.md
@@ -5,6 +5,7 @@ propComponents: [DragDrop, Draggable, Droppable, DraggableItemPosition]
 title: Drag and drop
 deprecated: true
 ---
+import { useState } from 'react';
 
 You can use the `<DragDrop>` component to move items in or between lists. The `<DragDrop>` component should contain `<Droppable>` components which contain `<Draggable>` components.
 
diff --git a/packages/react-core/src/deprecated/components/DragDrop/examples/DragDropBasic.tsx b/packages/react-core/src/deprecated/components/DragDrop/examples/DragDropBasic.tsx
index 03ae6e88996..5c88c4f6926 100644
--- a/packages/react-core/src/deprecated/components/DragDrop/examples/DragDropBasic.tsx
+++ b/packages/react-core/src/deprecated/components/DragDrop/examples/DragDropBasic.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
 
 interface ItemType {
@@ -26,7 +27,7 @@ const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
 };
 
 export const DragDropBasic: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState<ItemType[]>(getItems(10));
+  const [items, setItems] = useState<ItemType[]>(getItems(10));
 
   function onDrop(source: SourceType, dest: DestinationType) {
     if (dest) {
diff --git a/packages/react-core/src/deprecated/components/DragDrop/examples/DragDropMultipleLists.tsx b/packages/react-core/src/deprecated/components/DragDrop/examples/DragDropMultipleLists.tsx
index 2afff695f32..196decee999 100644
--- a/packages/react-core/src/deprecated/components/DragDrop/examples/DragDropMultipleLists.tsx
+++ b/packages/react-core/src/deprecated/components/DragDrop/examples/DragDropMultipleLists.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Flex } from '@patternfly/react-core';
 import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
 
@@ -40,7 +41,7 @@ const move = (source: ItemType[], destination: ItemType[], sourceIndex: number,
 };
 
 export const DragDropMultipleLists: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState<MultipleListState>({
+  const [items, setItems] = useState<MultipleListState>({
     items1: getItems(10, 0),
     items2: getItems(5, 10)
   });
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/Modal.md b/packages/react-core/src/deprecated/components/Modal/examples/Modal.md
index b90af56b0be..80f1032b91e 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/deprecated/components/Modal/examples/Modal.md
@@ -7,7 +7,7 @@ ouia: true
 deprecated: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalBasic.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalBasic.tsx
index cb776b84c00..b481b3f9e3f 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalBasic.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalBasic.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalBasic: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomFocus.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomFocus.tsx
index 8756ef23d92..047f6fae5bb 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomFocus.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomFocus.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalCustomFocus: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomHeaderFooter.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomHeaderFooter.tsx
index 916bf2e9220..29a6ad87f9f 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomHeaderFooter.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomHeaderFooter.tsx
@@ -1,11 +1,11 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Title, TitleSizes } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomTitleIcon.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomTitleIcon.tsx
index 5c22e027ce1..9dce4d7de0d 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomTitleIcon.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomTitleIcon.tsx
@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 export const ModalCustomTitleIcon: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomWidth.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomWidth.tsx
index 6b3d499e84d..1d97dad0ba1 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomWidth.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomWidth.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalCustomWidth: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalLarge.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalLarge.tsx
index 3fc59893a8b..3cf17ae43ae 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalLarge.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalLarge.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalLarge: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalMedium.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalMedium.tsx
index 8e797093b64..ca3bc226464 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalMedium.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalMedium.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalMedium: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalNoHeaderFooter.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalNoHeaderFooter.tsx
index 3ebed042828..9f89024033c 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalNoHeaderFooter.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalNoHeaderFooter.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalNoHeaderFooter: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalSmall.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalSmall.tsx
index 2f25689e20e..f9cd48713c9 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalSmall.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalSmall.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalSmall: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalTitleIcon.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalTitleIcon.tsx
index 8b830d89593..fa9761d5c33 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalTitleIcon.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalTitleIcon.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalTitleIcon: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalTopAligned.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalTopAligned.tsx
index 28e997deac8..f7f968a1a11 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalTopAligned.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalTopAligned.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalTopAligned: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDescription.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDescription.tsx
index 906d9cccecb..5ea1a0c7daf 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDescription.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDescription.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalWithDescription: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDropdown.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDropdown.tsx
index 73b467c0485..84d52ebb785 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDropdown.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDropdown.tsx
@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Dropdown, DropdownList, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalWithDropdown: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithForm.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithForm.tsx
index c330cca9d04..aa5d133e1b4 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithForm.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithForm.tsx
@@ -1,15 +1,15 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import { Button, Form, FormGroup, FormGroupLabelHelp, Popover, TextInput } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalWithForm: React.FunctionComponent = () => {
-  const [isModalOpen, setModalOpen] = React.useState(false);
-  const [nameValue, setNameValue] = React.useState('');
-  const [emailValue, setEmailValue] = React.useState('');
-  const [addressValue, setAddressValue] = React.useState('');
-  const nameLabelHelpRef = React.useRef(null);
-  const emailLabelHelpRef = React.useRef(null);
-  const addressLabelHelpRef = React.useRef(null);
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [nameValue, setNameValue] = useState('');
+  const [emailValue, setEmailValue] = useState('');
+  const [addressValue, setAddressValue] = useState('');
+  const nameLabelHelpRef = useRef(null);
+  const emailLabelHelpRef = useRef(null);
+  const addressLabelHelpRef = useRef(null);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithHelp.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithHelp.tsx
index 409f4f60908..341c3eb4c06 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithHelp.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithHelp.tsx
@@ -1,11 +1,11 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Popover } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const ModalWithHelp: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithOverflowingContent.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithOverflowingContent.tsx
index 57ffd74b0f8..8209b0feba4 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithOverflowingContent.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithOverflowingContent.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalWithOverflowingContent: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithWizard.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithWizard.tsx
index 5a9920f84fa..bfb2498ab93 100644
--- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithWizard.tsx
+++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithWizard.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalWithWizard: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
diff --git a/packages/react-core/src/deprecated/components/Tile/examples/Tile.md b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md
index 50857f62e82..45b0a61b12c 100644
--- a/packages/react-core/src/deprecated/components/Tile/examples/Tile.md
+++ b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md
@@ -6,6 +6,7 @@ propComponents: ['Tile']
 deprecated: true
 ---
 
+import { useState } from 'react';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import './Tile.css';
@@ -73,10 +74,11 @@ You can also change the type of `Flex` you can use so that the line breaks in th
 ### Tiles with single selection
 
 ```ts
+import { useState } from 'react';
 import { Tile } from '@patternfly/react-core/deprecated';
 
 const TileSingleSelect: React.FunctionComponent = () => {
-  const [selectedId, setSelectedId] = React.useState<string>('');
+  const [selectedId, setSelectedId] = useState<string>('');
 
   const onSelect = (event: React.MouseEvent) => {
     setSelectedId(event.currentTarget.id);
@@ -103,10 +105,11 @@ const TileSingleSelect: React.FunctionComponent = () => {
 ### Tiles with multiple selection
 
 ```ts
+import { useState } from 'react';
 import { Tile } from '@patternfly/react-core/deprecated';
 
 const TileMultiSelect: React.FunctionComponent = () => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
   const onSelect = (event: React.MouseEvent | React.KeyboardEvent) => {
     const targetId = event.currentTarget.id;
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md b/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md
index 2a1b1772a51..ef6c7000cb6 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md
@@ -9,7 +9,7 @@ source: react-deprecated
 deprecated: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
 DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, ModalVariant, Alert, EmptyState, EmptyStateFooter, EmptyStateBody, EmptyStateActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
 import { Wizard as WizardDeprecated, WizardFooter as WizardFooterDeprecated, WizardContextConsumer as WizardContextConsumerDeprecated } from '@patternfly/react-core/deprecated';
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardEnabledOnFormValidation.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
index b3f7117acc1..f674d43857a 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Form, FormGroup, TextInput } from '@patternfly/react-core';
 import { Wizard as WizardDeprecated, WizardStep } from '@patternfly/react-core/deprecated';
 interface PrevStepInfo {
@@ -12,8 +13,8 @@ interface sampleFormProps {
 }
 
 const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormProps) => {
-  const [value, setValue] = React.useState(props.formValue);
-  const [isValid, setIsValid] = React.useState(props.isFormValid);
+  const [value, setValue] = useState(props.formValue);
+  const [isValid, setIsValid] = useState(props.isFormValid);
 
   const handleTextInputChange = (_event, value: string) => {
     const valid = /^\d+$/.test(value);
@@ -47,12 +48,12 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
 };
 
 export const WizardFormValidation: React.FunctionComponent = () => {
-  const [isFormValid, setIsFormValid] = React.useState(false);
-  const [formValue, setFormValue] = React.useState('Thirty');
-  const [allStepsValid, setAllStepsValid] = React.useState(false);
-  const [stepIdReached, setStepIdReached] = React.useState(1);
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [formValue, setFormValue] = useState('Thirty');
+  const [allStepsValid, setAllStepsValid] = useState(false);
+  const [stepIdReached, setStepIdReached] = useState(1);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setAllStepsValid(isFormValid);
   }, [isFormValid, stepIdReached]);
 
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx
index d8c2f5ba605..f663191c473 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   EmptyState,
   EmptyStateFooter,
@@ -16,7 +17,7 @@ interface finishedProps {
 }
 
 const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedProps) => {
-  const [percent, setPercent] = React.useState(0);
+  const [percent, setPercent] = useState(0);
 
   const tick = () => {
     setPercent((prevPercent) => {
@@ -28,7 +29,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
     });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const interval = setInterval(() => tick(), 1000);
 
     if (percent >= 100) {
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardInModal.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardInModal.tsx
index bc782a8a81f..9d7fc9a75c1 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardInModal.tsx
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardInModal.tsx
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 export const WizardInModal: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsOpen(!isOpen);
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardIncrementallyEnabledSteps.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardIncrementallyEnabledSteps.tsx
index 02666d9cca4..6866fc70986 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardIncrementallyEnabledSteps.tsx
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardIncrementallyEnabledSteps.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Wizard as WizardDeprecated, WizardStep } from '@patternfly/react-core/deprecated';
 
 export const WizardIncrementallyEnabledSteps: React.FunctionComponent = () => {
-  const [stepIdReached, setStepIdReached] = React.useState(1);
+  const [stepIdReached, setStepIdReached] = useState(1);
 
   const onNext = ({ id }: WizardStep) => {
     if (id) {
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx
index 8aa547e4b2e..6d384d7f6e1 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   EmptyState,
   EmptyStateFooter,
@@ -25,7 +26,7 @@ interface finishedProps {
 }
 
 const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedProps) => {
-  const [percent, setPercent] = React.useState(0);
+  const [percent, setPercent] = useState(0);
 
   const tick = () => {
     setPercent((prevPercent) => {
@@ -37,7 +38,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
     });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const interval = setInterval(() => tick(), 1000);
 
     if (percent >= 100) {
@@ -81,8 +82,8 @@ interface sampleFormProps {
 }
 
 const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormProps) => {
-  const [value, setValue] = React.useState(props.formValue);
-  const [isValid, setIsValid] = React.useState(props.isFormValid);
+  const [value, setValue] = useState(props.formValue);
+  const [isValid, setIsValid] = useState(props.isFormValid);
 
   const handleTextInputChange = (_event, value: string) => {
     const valid = /^\d+$/.test(value);
@@ -116,10 +117,10 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
 };
 
 export const WizardValidateButtonPress: React.FunctionComponent = () => {
-  const [isFormValid, setIsFormValid] = React.useState(false);
-  const [formValue, setFormValue] = React.useState('Validating on button press');
-  const [stepsValid, setStepsValid] = React.useState(0);
-  const [errorText, setErrorText] = React.useState(false);
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [formValue, setFormValue] = useState('Validating on button press');
+  const [stepsValid, setStepsValid] = useState(0);
+  const [errorText, setErrorText] = useState(false);
 
   const closeWizard = () => {
     // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx
index 19cf8c222eb..026ace4e196 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Button,
   DrawerActions,
@@ -10,9 +10,9 @@ import {
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 export const WizardWithDrawer: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
 
-  const drawerRef = React.useRef<HTMLSpanElement>(null);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpandDrawer = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/helpers/resizeObserver.tsx b/packages/react-core/src/helpers/resizeObserver.tsx
index 39d90b5868b..9f5aa7cbd95 100644
--- a/packages/react-core/src/helpers/resizeObserver.tsx
+++ b/packages/react-core/src/helpers/resizeObserver.tsx
@@ -6,7 +6,7 @@ import { canUseDOM, debounce } from './util';
  *
  * Example 1:
  *
- * private containerRef = React.createRef<HTMLDivElement>();
+ * private containerRef = createRef<HTMLDivElement>();
  * private observer: any = () => {};
  *
  * public componentDidMount() {
@@ -33,7 +33,7 @@ import { canUseDOM, debounce } from './util';
  *
  * Example 2:
  *
- * private inputRef = React.createRef<HTMLInputElement>();
+ * private inputRef = createRef<HTMLInputElement>();
  * private observer: any = () => {};
  *
  * public componentDidMount() {
diff --git a/packages/react-core/src/layouts/Bullseye/__tests__/Bullseye.test.tsx b/packages/react-core/src/layouts/Bullseye/__tests__/Bullseye.test.tsx
index 26850ef6786..6eb3ebf27d6 100644
--- a/packages/react-core/src/layouts/Bullseye/__tests__/Bullseye.test.tsx
+++ b/packages/react-core/src/layouts/Bullseye/__tests__/Bullseye.test.tsx
@@ -1,4 +1,3 @@
-import { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { Bullseye } from '../Bullseye';
 
@@ -23,7 +22,7 @@ describe('Bullseye', () => {
   test('allows passing in a React Component as the component', () => {
     const Component: React.FunctionComponent = () => <div>Some text</div>;
 
-    render(<Bullseye component={Component as unknown as keyof JSX.IntrinsicElements} />);
+    render(<Bullseye component={Component as unknown as keyof React.JSX.IntrinsicElements} />);
     expect(screen.getByText('Some text')).toBeInTheDocument();
   });
 });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
index 87b2d293bf2..081f69b35d1 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
@@ -1,4 +1,4 @@
-import { Component, type JSX } from 'react';
+import { Component } from 'react';
 import { RowWrapperProps, ICell, IRow } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
@@ -14,7 +14,7 @@ interface ITableRowWrapperDemoState {
 
 export class TableRowWrapperDemo extends Component<TableProps, ITableRowWrapperDemoState> {
   static displayName = 'TableRowWrapperDemo';
-  customRowWrapper: (props: RowWrapperProps) => JSX.Element;
+  customRowWrapper: (props: RowWrapperProps) => React.JSX.Element;
   constructor(props: TableProps) {
     super(props);
     this.state = {
diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx
index d03643ad604..39a96cf8c71 100644
--- a/packages/react-table/src/components/Table/Table.tsx
+++ b/packages/react-table/src/components/Table/Table.tsx
@@ -1,4 +1,4 @@
-import { createContext, forwardRef, useEffect, useRef, useState, type JSX } from 'react';
+import { createContext, forwardRef, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import stylesGrid from '@patternfly/react-styles/css/components/Table/table-grid';
 import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-tree-view';
@@ -105,7 +105,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   const tableRef = innerRef || ref;
 
   const [hasSelectableRows, setHasSelectableRows] = useState(false);
-  const [tableCaption, setTableCaption] = useState<JSX.Element | undefined>();
+  const [tableCaption, setTableCaption] = useState<React.JSX.Element | undefined>();
 
   useEffect(() => {
     document.addEventListener('keydown', handleKeys);
diff --git a/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
index f2e69695e92..0081af73f10 100644
--- a/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
+++ b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
@@ -48,7 +48,7 @@ export const TableSortableCustom: React.FunctionComponent = () => {
   const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // Sort dropdown expansion
-  // const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
+  // const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);
 
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   // This example is trivial since our data objects just contain strings, but if the data was more complex
diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
index 98512a99c1a..6f37d98b825 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -3,6 +3,8 @@ id: Table
 section: components
 ---
 
+import { Fragment, ReactNode, useEffect, useState } from 'react';
+
 import {
 Checkbox,
 Content,
diff --git a/packages/react-table/src/demos/examples/TableBulkSelect.tsx b/packages/react-table/src/demos/examples/TableBulkSelect.tsx
index 2938bf09bf2..ec142eb07de 100644
--- a/packages/react-table/src/demos/examples/TableBulkSelect.tsx
+++ b/packages/react-table/src/demos/examples/TableBulkSelect.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Dropdown,
   DropdownList,
@@ -18,12 +19,12 @@ import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/d
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableBulkSelect: React.FunctionComponent = () => {
-  const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = React.useState(false);
-  const [bulkSelection, setBulkSelection] = React.useState('');
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
-  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
-  const [selectedRows, setSelectedRows] = React.useState<string[]>([]);
+  const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = useState(false);
+  const [bulkSelection, setBulkSelection] = useState('');
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10));
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
   const handleSetPage = (
     _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
index d20f789c972..817b8e18058 100644
--- a/packages/react-table/src/demos/examples/TableColumnManagement.tsx
+++ b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState, type JSX } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 
 import {
   Button,
@@ -386,7 +386,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
     </Modal>
   );
 
-  const renderLabel = (labelText: string): JSX.Element => {
+  const renderLabel = (labelText: string): React.JSX.Element => {
     switch (labelText) {
       case 'Running':
         return <Label color="green">{labelText}</Label>;
diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
index a6e564071b8..70f11aae8be 100644
--- a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
+++ b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState, type JSX } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 
 import {
   Button,
@@ -281,7 +281,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
     </Modal>
   );
 
-  const renderLabel = (labelText: string): JSX.Element => {
+  const renderLabel = (labelText: string): React.JSX.Element => {
     switch (labelText) {
       case 'Running':
         return <Label color="green">{labelText}</Label>;
diff --git a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
index df56087e662..d831580cc7e 100644
--- a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
+++ b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { ActionsColumn, Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
 import {
   Button,
@@ -25,7 +26,7 @@ import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const TableCompoundExpansion: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
-  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+  const [isSelectOpen, setIsSelectOpen] = useState(false);
 
   const NestedItemsTable = () => {
     // In real usage, this data would come from some external source like an API via props.
@@ -176,7 +177,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
   // In this example, expanded cells are tracked by the repo and property names from each row. This could be any pair of unique identifiers.
   // This is to prevent state from being based on row and column order index in case we later add sorting and rearranging columns.
   // Note that this behavior is very similar to selection state.
-  const [expandedCells, setExpandedCells] = React.useState<IDictionary<string>>({
+  const [expandedCells, setExpandedCells] = useState<IDictionary<string>>({
     'siemur/test-space': 'branches' // Default to the first cell of the first row being expanded
   });
   const setCellExpanded = (repo: Repo, columnKey: string, isExpanding = true) => {
diff --git a/packages/react-table/src/deprecated/components/Table/Table.tsx b/packages/react-table/src/deprecated/components/Table/Table.tsx
index 18c932403c4..99990f18155 100644
--- a/packages/react-table/src/deprecated/components/Table/Table.tsx
+++ b/packages/react-table/src/deprecated/components/Table/Table.tsx
@@ -1,4 +1,4 @@
-import { Component, type JSX } from 'react';
+import { Component } from 'react';
 import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
@@ -105,7 +105,7 @@ export interface TableProps extends OUIAProps {
   /** Wrapper for the body  */
   bodyWrapper?: Function;
   /** Wrapper for the row */
-  rowWrapper?: (props: RowWrapperProps) => JSX.Element;
+  rowWrapper?: (props: RowWrapperProps) => React.JSX.Element;
   /** A valid WAI-ARIA role to be applied to the table element */
   role?: string;
   /** If set to true, the table header sticks to the top of its container */
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
index c16c47cc178..ab7d0dc6bef 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
@@ -46,7 +46,7 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
   const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // Sort dropdown expansion
-  // const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
+  // const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);
 
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   // This example is trivial since our data objects just contain strings, but if the data was more complex