diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
index 1d7711563ae..90e62b608ae 100644
--- a/app/src/App/Navbar.tsx
+++ b/app/src/App/Navbar.tsx
@@ -25,6 +25,7 @@ import logoSvgThree from '/app/assets/images/logo_nav_three.svg'
 
 import { NAV_BAR_WIDTH } from './constants'
 
+import type { MouseEvent } from 'react'
 import type { RouteProps } from './types'
 
 const SALESFORCE_HELP_LINK = 'https://support.opentrons.com/s/'
@@ -161,7 +162,7 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
         <NavIconLink
           role="button"
           data-testid="Navbar_settingsLink"
-          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+          onClick={(e: MouseEvent<HTMLButtonElement>) => {
             e.preventDefault()
             debouncedNavigate('/app-settings')
           }}
diff --git a/app/src/App/__mocks__/portal.tsx b/app/src/App/__mocks__/portal.tsx
index f80b1deb44e..498f3220f65 100644
--- a/app/src/App/__mocks__/portal.tsx
+++ b/app/src/App/__mocks__/portal.tsx
@@ -1,8 +1,8 @@
 // mock portal for enzyme tests
-import type * as React from 'react'
+import type { ReactNode } from 'react'
 
 interface Props {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 // replace Portal with a pass-through React.Fragment
diff --git a/app/src/App/__tests__/hooks.test.tsx b/app/src/App/__tests__/hooks.test.tsx
index 5b3f315049b..2423414c748 100644
--- a/app/src/App/__tests__/hooks.test.tsx
+++ b/app/src/App/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 import { renderHook } from '@testing-library/react'
 import { createStore } from 'redux'
@@ -9,11 +8,12 @@ import { i18n } from '/app/i18n'
 import { checkShellUpdate } from '/app/redux/shell'
 import { useSoftwareUpdatePoll } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
 describe('useSoftwareUpdatePoll', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let store: Store<State>
   beforeEach(() => {
     vi.useFakeTimers()
diff --git a/app/src/App/index.tsx b/app/src/App/index.tsx
index f0ba1de0304..0ffcf0dd751 100644
--- a/app/src/App/index.tsx
+++ b/app/src/App/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 
 import { Flex, POSITION_FIXED, DIRECTION_ROW } from '@opentrons/components'
@@ -9,7 +8,9 @@ import { DesktopApp } from './DesktopApp'
 import { OnDeviceDisplayApp } from './OnDeviceDisplayApp'
 import { TopPortalRoot } from './portal'
 
-const stopEvent = (event: React.MouseEvent): void => {
+import type { MouseEvent } from 'react'
+
+const stopEvent = (event: MouseEvent): void => {
   event.preventDefault()
 }
 
diff --git a/app/src/App/types.ts b/app/src/App/types.ts
index 87d8f77d4a1..c6a0822260d 100644
--- a/app/src/App/types.ts
+++ b/app/src/App/types.ts
@@ -1,11 +1,11 @@
-import type * as React from 'react'
+import type { FC } from 'react'
 
 export interface RouteProps {
   /**
    * the component rendered by a route match
    * drop developed components into slots held by placeholder div components
    */
-  Component: React.FC
+  Component: FC
   /**
    * a route/page name to render in the nav bar
    */
diff --git a/app/src/LocalizationProvider.tsx b/app/src/LocalizationProvider.tsx
index df2bbc8bc40..3c8fcf9feab 100644
--- a/app/src/LocalizationProvider.tsx
+++ b/app/src/LocalizationProvider.tsx
@@ -7,10 +7,10 @@ import { i18n, i18nCb, i18nConfig } from '/app/i18n'
 import { getAppLanguage } from '/app/redux/config'
 import { useIsOEMMode } from '/app/resources/robot-settings/hooks'
 
-import type * as React from 'react'
+import type { ReactNode } from 'react'
 
 export interface LocalizationProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export const BRANDED_RESOURCE = 'branded'
diff --git a/app/src/__testing-utils__/renderWithProviders.tsx b/app/src/__testing-utils__/renderWithProviders.tsx
index 11e3ba16d9b..4c3115281f5 100644
--- a/app/src/__testing-utils__/renderWithProviders.tsx
+++ b/app/src/__testing-utils__/renderWithProviders.tsx
@@ -1,6 +1,5 @@
 // render using targetted component using @testing-library/react
 // with wrapping providers for i18next and redux
-import type * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
@@ -8,16 +7,22 @@ import { vi } from 'vitest'
 import { render } from '@testing-library/react'
 import { createStore } from 'redux'
 
+import type {
+  ComponentProps,
+  ComponentType,
+  PropsWithChildren,
+  ReactElement,
+} from 'react'
 import type { PreloadedState, Store } from 'redux'
 import type { RenderOptions, RenderResult } from '@testing-library/react'
 
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
   initialState?: State
-  i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n']
+  i18nInstance: ComponentProps<typeof I18nextProvider>['i18n']
 }
 
 export function renderWithProviders<State>(
-  Component: React.ReactElement,
+  Component: ReactElement,
   options?: RenderWithProvidersOptions<State>
 ): [RenderResult, Store<State>] {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -32,7 +37,7 @@ export function renderWithProviders<State>(
 
   const queryClient = new QueryClient()
 
-  const ProviderWrapper: React.ComponentType<React.PropsWithChildren<{}>> = ({
+  const ProviderWrapper: ComponentType<PropsWithChildren<{}>> = ({
     children,
   }) => {
     const BaseWrapper = (
diff --git a/app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx b/app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx
index 0e91433e7b2..bb5ba0669b9 100644
--- a/app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx
+++ b/app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { InlineNotification } from '..'
 
-const render = (props: React.ComponentProps<typeof InlineNotification>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InlineNotification>) => {
   return renderWithProviders(<InlineNotification {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InlineNotification', () => {
-  let props: React.ComponentProps<typeof InlineNotification>
+  let props: ComponentProps<typeof InlineNotification>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx
index 5b5bf21aafa..cf413b652cc 100644
--- a/app/src/atoms/InlineNotification/index.tsx
+++ b/app/src/atoms/InlineNotification/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -19,6 +18,7 @@ import {
   Link,
 } from '@opentrons/components'
 
+import type { MouseEventHandler } from 'react'
 import type { IconProps, StyleProps } from '@opentrons/components'
 
 type InlineNotificationType = 'alert' | 'error' | 'neutral' | 'success'
@@ -32,9 +32,9 @@ export interface InlineNotificationProps extends StyleProps {
   /** Optional dynamic width based on contents */
   hug?: boolean
   /** optional handler to show close button/clear alert  */
-  onCloseClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>
+  onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
   linkText?: string
-  onLinkClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>
+  onLinkClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
 }
 
 const INLINE_NOTIFICATION_PROPS_BY_TYPE: Record<
diff --git a/app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx b/app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx
index e5fa872ab54..318175558fe 100644
--- a/app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx
+++ b/app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { InstrumentContainer } from '..'
 
-const render = (props: React.ComponentProps<typeof InstrumentContainer>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InstrumentContainer>) => {
   return renderWithProviders(<InstrumentContainer {...props} />)[0]
 }
 
 describe('InstrumentContainer', () => {
-  let props: React.ComponentProps<typeof InstrumentContainer>
+  let props: ComponentProps<typeof InstrumentContainer>
 
   it('renders an instrument display name', () => {
     props = {
diff --git a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx
index f58ad595169..863a10e886e 100644
--- a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx
+++ b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -6,14 +5,16 @@ import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ExternalLink } from '../ExternalLink'
 
+import type { ComponentProps } from 'react'
+
 const TEST_URL = 'https://opentrons.com'
 
-const render = (props: React.ComponentProps<typeof ExternalLink>) => {
+const render = (props: ComponentProps<typeof ExternalLink>) => {
   return renderWithProviders(<ExternalLink {...props} />)[0]
 }
 
 describe('ExternalLink', () => {
-  let props: React.ComponentProps<typeof ExternalLink>
+  let props: ComponentProps<typeof ExternalLink>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx b/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx
index 6d5b3d3fa40..557a234e969 100644
--- a/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx
+++ b/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -7,12 +6,14 @@ import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ProgressBar } from '..'
 
-const render = (props: React.ComponentProps<typeof ProgressBar>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ProgressBar>) => {
   return renderWithProviders(<ProgressBar {...props} />)
 }
 
 describe('ProgressBar', () => {
-  let props: React.ComponentProps<typeof ProgressBar>
+  let props: ComponentProps<typeof ProgressBar>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/ProgressBar/index.tsx b/app/src/atoms/ProgressBar/index.tsx
index 5852dadf2b5..bd598c0105b 100644
--- a/app/src/atoms/ProgressBar/index.tsx
+++ b/app/src/atoms/ProgressBar/index.tsx
@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { COLORS, Box } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 
 interface ProgressBarProps {
@@ -12,7 +12,7 @@ interface ProgressBarProps {
   /** extra styles to be filled progress element */
   innerStyles?: FlattenSimpleInterpolation
   /** extra elements to be rendered within container */
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export function ProgressBar({
diff --git a/app/src/atoms/SelectField/index.tsx b/app/src/atoms/SelectField/index.tsx
index 50deed28266..a51ed7a9ecd 100644
--- a/app/src/atoms/SelectField/index.tsx
+++ b/app/src/atoms/SelectField/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import find from 'lodash/find'
 import { Select } from './Select'
 import {
@@ -11,6 +10,7 @@ import {
 } from '@opentrons/components'
 import { css } from 'styled-components'
 
+import type { ReactNode } from 'react'
 import type { SelectProps, SelectOption } from './Select'
 import type { ActionMeta, MultiValue, SingleValue } from 'react-select'
 
@@ -32,9 +32,9 @@ export interface SelectFieldProps {
   /** render function for the option label passed to react-select */
   formatOptionLabel?: SelectProps['formatOptionLabel']
   /** optional title */
-  title?: React.ReactNode
+  title?: ReactNode
   /** optional caption. hidden when `error` is given */
-  caption?: React.ReactNode
+  caption?: ReactNode
   /** if included, use error style and display error instead of caption */
   error?: string | null
   /** change handler called with (name, value, actionMeta) */
diff --git a/app/src/atoms/Skeleton/__tests__/Skeleton.test.tsx b/app/src/atoms/Skeleton/__tests__/Skeleton.test.tsx
index b03bd72e98d..471506eb864 100644
--- a/app/src/atoms/Skeleton/__tests__/Skeleton.test.tsx
+++ b/app/src/atoms/Skeleton/__tests__/Skeleton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,7 +5,9 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { Skeleton } from '..'
 
-const render = (props: React.ComponentProps<typeof Skeleton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Skeleton>) => {
   return renderWithProviders(<Skeleton {...props} />, {
     i18nInstance: i18n,
   })[0]
diff --git a/app/src/atoms/Slideout/__tests__/Slideout.test.tsx b/app/src/atoms/Slideout/__tests__/Slideout.test.tsx
index 8e3301ad374..cca0cb02929 100644
--- a/app/src/atoms/Slideout/__tests__/Slideout.test.tsx
+++ b/app/src/atoms/Slideout/__tests__/Slideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen, fireEvent } from '@testing-library/react'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { Slideout } from '..'
 
-const render = (props: React.ComponentProps<typeof Slideout>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Slideout>) => {
   return renderWithProviders(<Slideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('Slideout', () => {
-  let props: React.ComponentProps<typeof Slideout>
+  let props: ComponentProps<typeof Slideout>
   const mockOnClick = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/Slideout/index.tsx b/app/src/atoms/Slideout/index.tsx
index 53a6888efa0..7260da7c342 100644
--- a/app/src/atoms/Slideout/index.tsx
+++ b/app/src/atoms/Slideout/index.tsx
@@ -22,17 +22,19 @@ import {
 
 import { Divider } from '../structure'
 
+import type { ReactElement, ReactNode } from 'react'
+
 export interface MultiSlideoutSpecs {
   currentStep: number
   maxSteps: number
 }
 export interface SlideoutProps {
-  title: string | React.ReactElement
-  children: React.ReactNode
+  title: string | ReactElement
+  children: ReactNode
   onCloseClick: () => void
   //  isExpanded is for collapse and expand animation
   isExpanded?: boolean
-  footer?: React.ReactNode
+  footer?: ReactNode
   multiSlideoutSpecs?: MultiSlideoutSpecs
 }
 
diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
index 3b3bb3ab48c..d536b18b30c 100644
--- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
+++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
@@ -7,6 +7,8 @@ import {
   layoutCandidates,
   customDisplay,
 } from '../constants'
+
+import type { MutableRefObject } from 'react'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
 
 import '../index.css'
@@ -15,7 +17,7 @@ import './index.css'
 // TODO (kk:04/05/2024) add debug to make debugging easy
 interface AlphanumericKeyboardProps {
   onChange: (input: string) => void
-  keyboardRef: React.MutableRefObject<KeyboardReactInterface | null>
+  keyboardRef: MutableRefObject<KeyboardReactInterface | null>
   debug?: boolean
 }
 
diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx
index 1cc2668d788..23ed71f9851 100644
--- a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx
+++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx
@@ -1,6 +1,8 @@
-import type * as React from 'react'
 import { KeyboardReact as Keyboard } from 'react-simple-keyboard'
+
+import type { MutableRefObject } from 'react'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
+
 import '../index.css'
 import './index.css'
 
@@ -11,7 +13,7 @@ const customDisplay = {
 // TODO (kk:04/05/2024) add debug to make debugging easy
 interface IndividualKeyProps {
   onChange: (input: string) => void
-  keyboardRef: React.MutableRefObject<KeyboardReactInterface | null>
+  keyboardRef: MutableRefObject<KeyboardReactInterface | null>
   keyText: string
   debug?: boolean
 }
diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx
index 4d3959eb9c3..16180ecbbdb 100644
--- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx
+++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { KeyboardReact as Keyboard } from 'react-simple-keyboard'
 import { numericalKeyboardLayout, numericalCustom } from '../constants'
 
+import type { MutableRefObject } from 'react'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
+
 import '../index.css'
 import './index.css'
 
 // Note (kk:04/05/2024) add debug to make debugging easy
 interface NumericalKeyboardProps {
   onChange: (input: string) => void
-  keyboardRef: React.MutableRefObject<KeyboardReactInterface | null>
+  keyboardRef: MutableRefObject<KeyboardReactInterface | null>
   isDecimal?: boolean
   hasHyphen?: boolean
   debug?: boolean
diff --git a/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx b/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx
index 568326f0065..48a7753cab5 100644
--- a/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx
+++ b/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { C_SKY_BLUE, COLORS } from '@opentrons/components'
 import { StatusLabel } from '..'
 import { renderWithProviders } from '/app/__testing-utils__'
 
-const render = (props: React.ComponentProps<typeof StatusLabel>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof StatusLabel>) => {
   return renderWithProviders(<StatusLabel {...props} />)[0]
 }
 
 describe('StatusLabel', () => {
-  let props: React.ComponentProps<typeof StatusLabel>
+  let props: ComponentProps<typeof StatusLabel>
 
   it('renders an engaged status label with a blue background and text', () => {
     props = {
diff --git a/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx b/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx
index 90f027b0f7a..dcd98b06159 100644
--- a/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx
+++ b/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { StepMeter } from '..'
 
-const render = (props: React.ComponentProps<typeof StepMeter>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof StepMeter>) => {
   return renderWithProviders(<StepMeter {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('StepMeter', () => {
-  let props: React.ComponentProps<typeof StepMeter>
+  let props: ComponentProps<typeof StepMeter>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/BackButton.tsx b/app/src/atoms/buttons/BackButton.tsx
index 29657e1f1b2..2819c0eb48e 100644
--- a/app/src/atoms/buttons/BackButton.tsx
+++ b/app/src/atoms/buttons/BackButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 
@@ -11,11 +10,13 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { HTMLProps } from 'react'
+
 // TODO(bh, 2022-12-7): finish styling when designs finalized
 export function BackButton({
   onClick,
   children,
-}: React.HTMLProps<HTMLButtonElement>): JSX.Element {
+}: HTMLProps<HTMLButtonElement>): JSX.Element {
   const navigate = useNavigate()
   const { t } = useTranslation('shared')
 
diff --git a/app/src/atoms/buttons/FloatingActionButton.tsx b/app/src/atoms/buttons/FloatingActionButton.tsx
index b7e870eab16..6088a5675b4 100644
--- a/app/src/atoms/buttons/FloatingActionButton.tsx
+++ b/app/src/atoms/buttons/FloatingActionButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import {
@@ -15,9 +14,10 @@ import {
   StyledText,
 } from '@opentrons/components'
 
+import type { ComponentProps } from 'react'
 import type { IconName } from '@opentrons/components'
 
-interface FloatingActionButtonProps extends React.ComponentProps<typeof Btn> {
+interface FloatingActionButtonProps extends ComponentProps<typeof Btn> {
   buttonText: string
   disabled?: boolean
   iconName?: IconName
diff --git a/app/src/atoms/buttons/IconButton.tsx b/app/src/atoms/buttons/IconButton.tsx
index ee754472ff1..43c935d462f 100644
--- a/app/src/atoms/buttons/IconButton.tsx
+++ b/app/src/atoms/buttons/IconButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   BORDERS,
@@ -10,8 +9,10 @@ import {
 } from '@opentrons/components'
 import { ODD_FOCUS_VISIBLE } from './constants'
 
-interface IconButtonProps extends React.ComponentProps<typeof Btn> {
-  iconName: React.ComponentProps<typeof Icon>['name']
+import type { ComponentProps } from 'react'
+
+interface IconButtonProps extends ComponentProps<typeof Btn> {
+  iconName: ComponentProps<typeof Icon>['name']
   hasBackground?: boolean
 }
 
diff --git a/app/src/atoms/buttons/MediumButton.tsx b/app/src/atoms/buttons/MediumButton.tsx
index d784029696a..7439cb39a46 100644
--- a/app/src/atoms/buttons/MediumButton.tsx
+++ b/app/src/atoms/buttons/MediumButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -16,6 +15,7 @@ import {
 } from '@opentrons/components'
 import { ODD_FOCUS_VISIBLE } from './constants'
 
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { IconName, StyleProps } from '@opentrons/components'
 import type { ButtonCategory } from './SmallButton'
 
@@ -28,12 +28,12 @@ type MediumButtonTypes =
   | 'tertiaryLowLight'
 
 interface MediumButtonProps extends StyleProps {
-  buttonText: React.ReactNode
+  buttonText: ReactNode
   buttonType?: MediumButtonTypes
   disabled?: boolean
   iconName?: IconName
   buttonCategory?: ButtonCategory
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
 }
 
 export function MediumButton(props: MediumButtonProps): JSX.Element {
diff --git a/app/src/atoms/buttons/SmallButton.tsx b/app/src/atoms/buttons/SmallButton.tsx
index e659d52fd58..7ad8c3d1a99 100644
--- a/app/src/atoms/buttons/SmallButton.tsx
+++ b/app/src/atoms/buttons/SmallButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -15,6 +14,8 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { ODD_FOCUS_VISIBLE } from './constants'
+
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { IconName, StyleProps } from '@opentrons/components'
 
 export type SmallButtonTypes =
@@ -28,9 +29,9 @@ export type ButtonCategory = 'default' | 'rounded'
 
 export type IconPlacement = 'startIcon' | 'endIcon'
 interface SmallButtonProps extends StyleProps {
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
   buttonType?: SmallButtonTypes
-  buttonText: React.ReactNode
+  buttonText: ReactNode
   iconPlacement?: IconPlacement | null
   iconName?: IconName | null
   buttonCategory?: ButtonCategory // if not specified, it will be 'default'
diff --git a/app/src/atoms/buttons/SubmitPrimaryButton.tsx b/app/src/atoms/buttons/SubmitPrimaryButton.tsx
index cdbf3442a65..cc53717bab0 100644
--- a/app/src/atoms/buttons/SubmitPrimaryButton.tsx
+++ b/app/src/atoms/buttons/SubmitPrimaryButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   SPACING,
@@ -8,10 +7,12 @@ import {
   styleProps,
 } from '@opentrons/components'
 
+import type { MouseEvent } from 'react'
+
 interface SubmitPrimaryButtonProps {
   form: string
   value: string
-  onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown
+  onClick?: (event: MouseEvent<HTMLInputElement>) => unknown
   disabled?: boolean
 }
 export const SubmitPrimaryButton = (
diff --git a/app/src/atoms/buttons/TextOnlyButton.tsx b/app/src/atoms/buttons/TextOnlyButton.tsx
index de3bbc969ab..0acdaf058ed 100644
--- a/app/src/atoms/buttons/TextOnlyButton.tsx
+++ b/app/src/atoms/buttons/TextOnlyButton.tsx
@@ -1,7 +1,8 @@
-import type * as React from 'react'
+import { css } from 'styled-components'
 import { Btn, StyledText, COLORS, RESPONSIVENESS } from '@opentrons/components'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
-import { css } from 'styled-components'
 
 const GO_BACK_BUTTON_STYLE = css`
   color: ${COLORS.grey50};
@@ -26,7 +27,7 @@ const GO_BACK_BUTTON_DISABLED_STYLE = css`
 
 interface TextOnlyButtonProps extends StyleProps {
   onClick: () => void
-  buttonText: React.ReactNode
+  buttonText: ReactNode
   disabled?: boolean
 }
 
diff --git a/app/src/atoms/buttons/ToggleButton.tsx b/app/src/atoms/buttons/ToggleButton.tsx
index b814f45da1d..42efbde32fb 100644
--- a/app/src/atoms/buttons/ToggleButton.tsx
+++ b/app/src/atoms/buttons/ToggleButton.tsx
@@ -1,8 +1,8 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
-import { Btn, Icon, COLORS, SIZE_1, SIZE_2 } from '@opentrons/components'
+import { Btn, COLORS, Icon } from '@opentrons/components'
 
+import type { MouseEvent } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 const TOGGLE_DISABLED_STYLES = css`
@@ -42,7 +42,7 @@ interface ToggleButtonProps extends StyleProps {
   toggledOn: boolean
   disabled?: boolean | null
   id?: string
-  onClick?: (e: React.MouseEvent) => unknown
+  onClick?: (e: MouseEvent) => unknown
 }
 
 export const ToggleButton = (props: ToggleButtonProps): JSX.Element => {
@@ -55,12 +55,12 @@ export const ToggleButton = (props: ToggleButtonProps): JSX.Element => {
       role="switch"
       aria-label={label}
       aria-checked={toggledOn}
-      size={size ?? SIZE_2}
+      size={size ?? '2rem'}
       css={props.toggledOn ? TOGGLE_ENABLED_STYLES : TOGGLE_DISABLED_STYLES}
       {...buttonProps}
     >
       {/* TODO(bh, 2022-10-05): implement small and large sizes from design system */}
-      <Icon name={iconName} height={SIZE_1} />
+      <Icon name={iconName} height="1rem" />
     </Btn>
   )
 }
diff --git a/app/src/atoms/buttons/__tests__/BackButton.test.tsx b/app/src/atoms/buttons/__tests__/BackButton.test.tsx
index 510abd0ee7d..67a65d107da 100644
--- a/app/src/atoms/buttons/__tests__/BackButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/BackButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -9,7 +8,9 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { BackButton } from '..'
 
-const render = (props?: React.HTMLProps<HTMLButtonElement>) => {
+import type { HTMLProps } from 'react'
+
+const render = (props?: HTMLProps<HTMLButtonElement>) => {
   return renderWithProviders(
     <MemoryRouter
       initialEntries={['/previous-page', '/current-page']}
diff --git a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
index de2bcd49e24..6a5804580b1 100644
--- a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -8,14 +7,16 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { FloatingActionButton } from '..'
 
-const render = (props: React.ComponentProps<typeof FloatingActionButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof FloatingActionButton>) => {
   return renderWithProviders(<FloatingActionButton {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FloatingActionButton', () => {
-  let props: React.ComponentProps<typeof FloatingActionButton>
+  let props: ComponentProps<typeof FloatingActionButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx
index 988248413d9..1ce59db9217 100644
--- a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,12 +6,14 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { MediumButton } from '../MediumButton'
 
-const render = (props: React.ComponentProps<typeof MediumButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof MediumButton>) => {
   return renderWithProviders(<MediumButton {...props} />)[0]
 }
 
 describe('MediumButton', () => {
-  let props: React.ComponentProps<typeof MediumButton>
+  let props: ComponentProps<typeof MediumButton>
   beforeEach(() => {
     props = {
       onClick: vi.fn(),
diff --git a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
index 4e10831c73c..7fd27eb874c 100644
--- a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -7,6 +6,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { QuaternaryButton } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('styled-components', async () => {
   const actual = await vi.importActual(
     'styled-components/dist/styled-components.browser.esm.js'
@@ -14,12 +15,12 @@ vi.mock('styled-components', async () => {
   return actual
 })
 
-const render = (props: React.ComponentProps<typeof QuaternaryButton>) => {
+const render = (props: ComponentProps<typeof QuaternaryButton>) => {
   return renderWithProviders(<QuaternaryButton {...props} />)[0]
 }
 
 describe('QuaternaryButton', () => {
-  let props: React.ComponentProps<typeof QuaternaryButton>
+  let props: ComponentProps<typeof QuaternaryButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/__tests__/SmallButton.test.tsx b/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
index 283f21daf4e..84341d3b39b 100644
--- a/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,12 +6,14 @@ import { COLORS, BORDERS } from '@opentrons/components'
 import { SmallButton } from '../SmallButton'
 import { renderWithProviders } from '/app/__testing-utils__'
 
-const render = (props: React.ComponentProps<typeof SmallButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof SmallButton>) => {
   return renderWithProviders(<SmallButton {...props} />)[0]
 }
 
 describe('SmallButton', () => {
-  let props: React.ComponentProps<typeof SmallButton>
+  let props: ComponentProps<typeof SmallButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx
index a62ba9c4a95..6af258d9d3f 100644
--- a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -6,15 +5,16 @@ import { COLORS, SPACING, TYPOGRAPHY, BORDERS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 
 import { SubmitPrimaryButton } from '..'
+import type { ComponentProps } from 'react'
 
 const mockOnClick = vi.fn()
 
-const render = (props: React.ComponentProps<typeof SubmitPrimaryButton>) => {
+const render = (props: ComponentProps<typeof SubmitPrimaryButton>) => {
   return renderWithProviders(<SubmitPrimaryButton {...props} />)[0]
 }
 
 describe('SubmitPrimaryButton', () => {
-  let props: React.ComponentProps<typeof SubmitPrimaryButton>
+  let props: ComponentProps<typeof SubmitPrimaryButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx
index 4a3f95369c8..30b15c5bea2 100644
--- a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -7,12 +6,14 @@ import { COLORS, SPACING, TYPOGRAPHY, BORDERS } from '@opentrons/components'
 
 import { TertiaryButton } from '..'
 
-const render = (props: React.ComponentProps<typeof TertiaryButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof TertiaryButton>) => {
   return renderWithProviders(<TertiaryButton {...props} />)[0]
 }
 
 describe('TertiaryButton', () => {
-  let props: React.ComponentProps<typeof TertiaryButton>
+  let props: ComponentProps<typeof TertiaryButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
index 3f61d43c5d0..29991d4ae0f 100644
--- a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { COLORS, SIZE_2 } from '@opentrons/components'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { ToggleButton } from '..'
 
+import type { ComponentProps } from 'react'
+
 const mockOnClick = vi.fn()
 
-const render = (props: React.ComponentProps<typeof ToggleButton>) => {
+const render = (props: ComponentProps<typeof ToggleButton>) => {
   return renderWithProviders(<ToggleButton {...props} />)[0]
 }
 
 describe('ToggleButton', () => {
-  let props: React.ComponentProps<typeof ToggleButton>
+  let props: ComponentProps<typeof ToggleButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/structure/Divider.tsx b/app/src/atoms/structure/Divider.tsx
index db55ad84f44..a253f27dce4 100644
--- a/app/src/atoms/structure/Divider.tsx
+++ b/app/src/atoms/structure/Divider.tsx
@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { Box, COLORS, SPACING } from '@opentrons/components'
+import type { ComponentProps } from 'react'
 
-type Props = React.ComponentProps<typeof Box>
+type Props = ComponentProps<typeof Box>
 
 export function Divider(props: Props): JSX.Element {
   const { marginY } = props
diff --git a/app/src/atoms/structure/Line.tsx b/app/src/atoms/structure/Line.tsx
index ecbbecc24cd..8eb456233f6 100644
--- a/app/src/atoms/structure/Line.tsx
+++ b/app/src/atoms/structure/Line.tsx
@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { Box, BORDERS } from '@opentrons/components'
+import type { ComponentProps } from 'react'
 
-type Props = React.ComponentProps<typeof Box>
+type Props = ComponentProps<typeof Box>
 
 export function Line(props: Props): JSX.Element {
   return <Box borderBottom={BORDERS.lineBorder} {...props} data-testid="line" />
diff --git a/app/src/atoms/structure/__tests__/Divider.test.tsx b/app/src/atoms/structure/__tests__/Divider.test.tsx
index 27460be938d..0aa40edb9d4 100644
--- a/app/src/atoms/structure/__tests__/Divider.test.tsx
+++ b/app/src/atoms/structure/__tests__/Divider.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { SPACING, COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { Divider } from '../index'
 
-const render = (props: React.ComponentProps<typeof Divider>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Divider>) => {
   return renderWithProviders(<Divider {...props} />)[0]
 }
 
 describe('Divider', () => {
-  let props: React.ComponentProps<typeof Divider>
+  let props: ComponentProps<typeof Divider>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/structure/__tests__/Line.test.tsx b/app/src/atoms/structure/__tests__/Line.test.tsx
index d9a9caefba2..c4e3e267565 100644
--- a/app/src/atoms/structure/__tests__/Line.test.tsx
+++ b/app/src/atoms/structure/__tests__/Line.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { SPACING, COLORS } from '@opentrons/components'
 import { Line } from '../index'
 import { renderWithProviders } from '/app/__testing-utils__'
 
-const render = (props: React.ComponentProps<typeof Line>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Line>) => {
   return renderWithProviders(<Line {...props} />)[0]
 }
 
 describe('Line', () => {
-  let props: React.ComponentProps<typeof Line>
+  let props: ComponentProps<typeof Line>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/BackgroundOverlay/__tests__/BackgroundOverlay.test.tsx b/app/src/molecules/BackgroundOverlay/__tests__/BackgroundOverlay.test.tsx
index e09b3c11765..882c4a644b4 100644
--- a/app/src/molecules/BackgroundOverlay/__tests__/BackgroundOverlay.test.tsx
+++ b/app/src/molecules/BackgroundOverlay/__tests__/BackgroundOverlay.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { BackgroundOverlay } from '..'
 
-const render = (props: React.ComponentProps<typeof BackgroundOverlay>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof BackgroundOverlay>) => {
   return renderWithProviders(<BackgroundOverlay {...props} />)[0]
 }
 
 describe('BackgroundOverlay', () => {
-  let props: React.ComponentProps<typeof BackgroundOverlay>
+  let props: ComponentProps<typeof BackgroundOverlay>
   it('renders background overlay', () => {
     props = { onClick: vi.fn() }
     render(props)
diff --git a/app/src/molecules/BackgroundOverlay/index.tsx b/app/src/molecules/BackgroundOverlay/index.tsx
index 3d6c6d976c6..c0a711ffa91 100644
--- a/app/src/molecules/BackgroundOverlay/index.tsx
+++ b/app/src/molecules/BackgroundOverlay/index.tsx
@@ -1,8 +1,9 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import { COLORS, Flex, POSITION_FIXED } from '@opentrons/components'
 
+import type { ComponentProps, MouseEventHandler } from 'react'
+
 const BACKGROUND_OVERLAY_STYLE = css`
   position: ${POSITION_FIXED};
   inset: 0;
@@ -10,10 +11,9 @@ const BACKGROUND_OVERLAY_STYLE = css`
   background-color: ${COLORS.black90}${COLORS.opacity60HexCode};
 `
 
-export interface BackgroundOverlayProps
-  extends React.ComponentProps<typeof Flex> {
+export interface BackgroundOverlayProps extends ComponentProps<typeof Flex> {
   //  onClick handler so when you click anywhere in the overlay, the modal/menu closes
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
 }
 
 export function BackgroundOverlay(props: BackgroundOverlayProps): JSX.Element {
diff --git a/app/src/molecules/CardButton/__tests__/CardButton.test.tsx b/app/src/molecules/CardButton/__tests__/CardButton.test.tsx
index 820dfbdc4e9..177d61dfd2d 100644
--- a/app/src/molecules/CardButton/__tests__/CardButton.test.tsx
+++ b/app/src/molecules/CardButton/__tests__/CardButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -7,6 +6,8 @@ import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { CardButton } from '..'
+
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -19,7 +20,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof CardButton>) => {
+const render = (props: ComponentProps<typeof CardButton>) => {
   return renderWithProviders(
     <MemoryRouter>
       <CardButton {...props} />
@@ -31,7 +32,7 @@ const render = (props: React.ComponentProps<typeof CardButton>) => {
 }
 
 describe('CardButton', () => {
-  let props: React.ComponentProps<typeof CardButton>
+  let props: ComponentProps<typeof CardButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/Command/CommandText.tsx b/app/src/molecules/Command/CommandText.tsx
index 9c43afb4b02..a2d872af5a8 100644
--- a/app/src/molecules/Command/CommandText.tsx
+++ b/app/src/molecules/Command/CommandText.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { pick } from 'lodash'
 import { css } from 'styled-components'
 
@@ -14,6 +13,7 @@ import {
 
 import { useCommandTextString } from '/app/local-resources/commands'
 
+import type { ComponentProps } from 'react'
 import type {
   LabwareDefinition2,
   RobotType,
@@ -27,13 +27,13 @@ import type {
 } from '/app/local-resources/commands'
 
 interface LegacySTProps {
-  as?: React.ComponentProps<typeof LegacyStyledText>['as']
+  as?: ComponentProps<typeof LegacyStyledText>['as']
   modernStyledTextDefaults?: false
 }
 
 interface ModernSTProps {
-  desktopStyle?: React.ComponentProps<typeof StyledText>['desktopStyle']
-  oddStyle?: React.ComponentProps<typeof StyledText>['oddStyle']
+  desktopStyle?: ComponentProps<typeof StyledText>['desktopStyle']
+  oddStyle?: ComponentProps<typeof StyledText>['oddStyle']
   modernStyledTextDefaults: true
 }
 
diff --git a/app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx b/app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx
index cd5b5adfd82..9f3c22db269 100644
--- a/app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx
+++ b/app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -7,7 +6,9 @@ import { i18n } from '/app/i18n'
 import { FileUpload } from '..'
 import testFile from './test-file.png'
 
-const render = (props: React.ComponentProps<typeof FileUpload>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof FileUpload>) => {
   return renderWithProviders(<FileUpload {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -16,7 +17,7 @@ const render = (props: React.ComponentProps<typeof FileUpload>) => {
 const handleClick = vi.fn()
 
 describe('FileUpload', () => {
-  let props: React.ComponentProps<typeof FileUpload>
+  let props: ComponentProps<typeof FileUpload>
 
   beforeEach(() => {
     const file = new File([testFile], 'a-file-to-test.png')
diff --git a/app/src/molecules/GenericWizardTile/__tests__/GenericWizardTile.test.tsx b/app/src/molecules/GenericWizardTile/__tests__/GenericWizardTile.test.tsx
index 1f53800ff6d..ee1d680d4d2 100644
--- a/app/src/molecules/GenericWizardTile/__tests__/GenericWizardTile.test.tsx
+++ b/app/src/molecules/GenericWizardTile/__tests__/GenericWizardTile.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,16 +6,18 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { getIsOnDevice } from '/app/redux/config'
 import { GenericWizardTile } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof GenericWizardTile>) => {
+const render = (props: ComponentProps<typeof GenericWizardTile>) => {
   return renderWithProviders(<GenericWizardTile {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('GenericWizardTile', () => {
-  let props: React.ComponentProps<typeof GenericWizardTile>
+  let props: ComponentProps<typeof GenericWizardTile>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/GenericWizardTile/index.tsx b/app/src/molecules/GenericWizardTile/index.tsx
index 24883a6ffea..3948daa292a 100644
--- a/app/src/molecules/GenericWizardTile/index.tsx
+++ b/app/src/molecules/GenericWizardTile/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
@@ -26,6 +25,8 @@ import { getIsOnDevice } from '/app/redux/config'
 import { NeedHelpLink } from '/app/molecules/OT2CalibrationNeedHelpLink'
 import { SmallButton, TextOnlyButton } from '/app/atoms/buttons'
 
+import type { ReactNode } from 'react'
+
 const ALIGN_BUTTONS = css`
   align-items: ${ALIGN_FLEX_END};
 
@@ -59,13 +60,13 @@ const TILE_CONTAINER_STYLE = css`
   }
 `
 export interface GenericWizardTileProps {
-  rightHandBody: React.ReactNode
-  bodyText: React.ReactNode
-  header: string | React.ReactNode
+  rightHandBody: ReactNode
+  bodyText: ReactNode
+  header: string | ReactNode
   getHelp?: string
   back?: () => void
   proceed?: () => void
-  proceedButtonText?: React.ReactNode
+  proceedButtonText?: ReactNode
   proceedIsDisabled?: boolean
   proceedButton?: JSX.Element
   backIsDisabled?: boolean
diff --git a/app/src/molecules/InProgressModal/InProgressModal.tsx b/app/src/molecules/InProgressModal/InProgressModal.tsx
index c6fefe761a2..82693b34429 100644
--- a/app/src/molecules/InProgressModal/InProgressModal.tsx
+++ b/app/src/molecules/InProgressModal/InProgressModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -13,9 +12,11 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface Props {
   //  optional override of the spinner
-  alternativeSpinner?: React.ReactNode
+  alternativeSpinner?: ReactNode
   description?: string
   body?: string
   children?: JSX.Element
diff --git a/app/src/molecules/InProgressModal/__tests__/InProgressModal.test.tsx b/app/src/molecules/InProgressModal/__tests__/InProgressModal.test.tsx
index f670fa221c3..db7ac2294cf 100644
--- a/app/src/molecules/InProgressModal/__tests__/InProgressModal.test.tsx
+++ b/app/src/molecules/InProgressModal/__tests__/InProgressModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { i18n } from '/app/i18n'
@@ -6,15 +5,17 @@ import { getIsOnDevice } from '/app/redux/config'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { InProgressModal } from '../InProgressModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof InProgressModal>) => {
+const render = (props: ComponentProps<typeof InProgressModal>) => {
   return renderWithProviders(<InProgressModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('InProgressModal', () => {
-  let props: React.ComponentProps<typeof InProgressModal>
+  let props: ComponentProps<typeof InProgressModal>
   beforeEach(() => {
     vi.mocked(getIsOnDevice).mockReturnValue(false)
   })
diff --git a/app/src/molecules/InfoMessage/__tests__/InfoMessage.test.tsx b/app/src/molecules/InfoMessage/__tests__/InfoMessage.test.tsx
index 5ff6948976f..378e1eff503 100644
--- a/app/src/molecules/InfoMessage/__tests__/InfoMessage.test.tsx
+++ b/app/src/molecules/InfoMessage/__tests__/InfoMessage.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { describe, it, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { screen } from '@testing-library/react'
 import { i18n } from '/app/i18n'
 import { InfoMessage } from '..'
 
-const render = (props: React.ComponentProps<typeof InfoMessage>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InfoMessage>) => {
   return renderWithProviders(<InfoMessage {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InfoMessage', () => {
-  let props: React.ComponentProps<typeof InfoMessage>
+  let props: ComponentProps<typeof InfoMessage>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/InstrumentCard/index.tsx b/app/src/molecules/InstrumentCard/index.tsx
index edcee546c32..2cd838a08bd 100644
--- a/app/src/molecules/InstrumentCard/index.tsx
+++ b/app/src/molecules/InstrumentCard/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
@@ -22,6 +20,7 @@ import flexGripper from '/app/assets/images/flex_gripper.png'
 
 import { MenuOverlay } from './MenuOverlay'
 
+import type { ReactNode } from 'react'
 import type { InstrumentDiagramProps, StyleProps } from '@opentrons/components'
 import type { MenuOverlayItemProps } from './MenuOverlay'
 
@@ -33,7 +32,7 @@ interface InstrumentCardProps extends StyleProps {
   instrumentDiagramProps?: InstrumentDiagramProps
   // special casing the gripper at least for now
   isGripperAttached?: boolean
-  banner?: React.ReactNode
+  banner?: ReactNode
   isEstopNotDisengaged: boolean
 }
 
diff --git a/app/src/molecules/InterventionModal/InterventionContent/index.tsx b/app/src/molecules/InterventionModal/InterventionContent/index.tsx
index 8d2bbba9c8c..e9b156cf0e6 100644
--- a/app/src/molecules/InterventionModal/InterventionContent/index.tsx
+++ b/app/src/molecules/InterventionModal/InterventionContent/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   Flex,
   StyledText,
@@ -7,15 +6,17 @@ import {
   RESPONSIVENESS,
 } from '@opentrons/components'
 import { InlineNotification } from '/app/atoms/InlineNotification'
-
 import { InterventionInfo } from './InterventionInfo'
+
+import type { ComponentProps } from 'react'
+
 export type { InterventionInfoProps } from './InterventionInfo'
 export { InterventionInfo }
 
 export interface InterventionContentProps {
   headline: string
-  infoProps: React.ComponentProps<typeof InterventionInfo>
-  notificationProps?: React.ComponentProps<typeof InlineNotification>
+  infoProps: ComponentProps<typeof InterventionInfo>
+  notificationProps?: ComponentProps<typeof InlineNotification>
 }
 
 export function InterventionContent({
diff --git a/app/src/molecules/InterventionModal/OneColumn.tsx b/app/src/molecules/InterventionModal/OneColumn.tsx
index 35a37dd10f9..8fca9f26ff3 100644
--- a/app/src/molecules/InterventionModal/OneColumn.tsx
+++ b/app/src/molecules/InterventionModal/OneColumn.tsx
@@ -1,14 +1,14 @@
-import type * as React from 'react'
-
 import {
   Flex,
   DIRECTION_COLUMN,
   JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 export interface OneColumnProps extends StyleProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function OneColumn({
diff --git a/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx b/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx
index db25d343be5..0a02f3397ac 100644
--- a/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx
+++ b/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { css } from 'styled-components'
 import {
   Flex,
@@ -9,11 +7,13 @@ import {
   WRAP,
   RESPONSIVENESS,
 } from '@opentrons/components'
-import type { StyleProps } from '@opentrons/components'
 import { TWO_COLUMN_ELEMENT_MIN_WIDTH } from './constants'
 
+import type { ReactNode } from 'react'
+import type { StyleProps } from '@opentrons/components'
+
 export interface OneColumnOrTwoColumnProps extends StyleProps {
-  children: [React.ReactNode, React.ReactNode]
+  children: [ReactNode, ReactNode]
 }
 
 export function OneColumnOrTwoColumn({
diff --git a/app/src/molecules/InterventionModal/TwoColumn.tsx b/app/src/molecules/InterventionModal/TwoColumn.tsx
index fc9072232be..600386ec60f 100644
--- a/app/src/molecules/InterventionModal/TwoColumn.tsx
+++ b/app/src/molecules/InterventionModal/TwoColumn.tsx
@@ -1,11 +1,11 @@
-import type * as React from 'react'
-
 import { Flex, Box, DIRECTION_ROW, SPACING, WRAP } from '@opentrons/components'
 import type { StyleProps } from '@opentrons/components'
 import { TWO_COLUMN_ELEMENT_MIN_WIDTH } from './constants'
 
+import type { ReactNode } from 'react'
+
 export interface TwoColumnProps extends StyleProps {
-  children: [React.ReactNode, React.ReactNode]
+  children: [ReactNode, ReactNode]
 }
 
 export function TwoColumn({
diff --git a/app/src/molecules/InterventionModal/__tests__/InterventionModal.test.tsx b/app/src/molecules/InterventionModal/__tests__/InterventionModal.test.tsx
index a063bee13bc..bdbe4c95e70 100644
--- a/app/src/molecules/InterventionModal/__tests__/InterventionModal.test.tsx
+++ b/app/src/molecules/InterventionModal/__tests__/InterventionModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
 import '@testing-library/jest-dom/vitest'
@@ -12,6 +11,7 @@ import { getIsOnDevice } from '/app/redux/config'
 
 import { InterventionModal } from '../'
 
+import type { ComponentProps } from 'react'
 import type { ModalType } from '../'
 import type { State } from '/app/redux/types'
 
@@ -23,7 +23,7 @@ const MOCK_STATE: State = {
   },
 } as any
 
-const render = (props: React.ComponentProps<typeof InterventionModal>) => {
+const render = (props: ComponentProps<typeof InterventionModal>) => {
   return renderWithProviders(<InterventionModal {...props} />, {
     i18nInstance: i18n,
     initialState: MOCK_STATE,
@@ -31,7 +31,7 @@ const render = (props: React.ComponentProps<typeof InterventionModal>) => {
 }
 
 describe('InterventionModal', () => {
-  let props: React.ComponentProps<typeof InterventionModal>
+  let props: ComponentProps<typeof InterventionModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx b/app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx
index b68e8a379a0..bb25d211619 100644
--- a/app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx
+++ b/app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { vi, describe, it, expect } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 
 import { ModalContentOneColSimpleButtons } from '../ModalContentOneColSimpleButtons'
 
+import type { ChangeEventHandler } from 'react'
+
 /* eslint-disable testing-library/no-node-access */
 const inputElForButtonFromButtonText = (text: string): HTMLInputElement =>
   ((screen.getByText(text)?.parentElement?.parentElement
@@ -88,7 +89,7 @@ describe('InterventionModal', () => {
         firstButton={{
           label: 'first button',
           value: 'first',
-          onChange: onChange as React.ChangeEventHandler<HTMLInputElement>,
+          onChange: onChange as ChangeEventHandler<HTMLInputElement>,
         }}
         secondButton={{ label: 'second button', value: 'second' }}
         furtherButtons={[{ label: 'third button', value: 'third' }]}
diff --git a/app/src/molecules/InterventionModal/index.tsx b/app/src/molecules/InterventionModal/index.tsx
index 679d3b3d1f8..3e4801d4922 100644
--- a/app/src/molecules/InterventionModal/index.tsx
+++ b/app/src/molecules/InterventionModal/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
 
@@ -32,6 +31,7 @@ import { DescriptionContent } from './DescriptionContent'
 import { DeckMapContent } from './DeckMapContent'
 import { CategorizedStepContent } from './CategorizedStepContent'
 
+import type { MouseEvent, ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { IconName } from '@opentrons/components'
 
@@ -116,9 +116,9 @@ const ERROR_COLOR = COLORS.red50
 
 export interface InterventionModalProps {
   /** Optional modal title heading. Aligned to the left. */
-  titleHeading?: React.ReactNode
+  titleHeading?: ReactNode
   /** Optional modal heading right of the icon. Aligned right if titleHeading is supplied, otherwise aligned left. **/
-  iconHeading?: React.ReactNode
+  iconHeading?: ReactNode
   /** Optional onClick for the icon heading and icon. */
   iconHeadingOnClick?: () => void
   /** overall style hint */
@@ -128,7 +128,7 @@ export interface InterventionModalProps {
   /* Optional icon size override. */
   iconSize?: string
   /** modal contents */
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function InterventionModal({
@@ -160,7 +160,7 @@ export function InterventionModal({
           {...modalStyle}
           flexDirection={DIRECTION_COLUMN}
           border={border}
-          onClick={(e: React.MouseEvent) => {
+          onClick={(e: MouseEvent) => {
             e.stopPropagation()
           }}
         >
diff --git a/app/src/molecules/InterventionModal/story-utils/StandIn.tsx b/app/src/molecules/InterventionModal/story-utils/StandIn.tsx
index 04aa5690e7a..56153551df3 100644
--- a/app/src/molecules/InterventionModal/story-utils/StandIn.tsx
+++ b/app/src/molecules/InterventionModal/story-utils/StandIn.tsx
@@ -1,10 +1,10 @@
-import type * as React from 'react'
 import { Box, BORDERS } from '@opentrons/components'
+import type { ReactNode } from 'react'
 
 export function StandInContent({
   children,
 }: {
-  children?: React.ReactNode
+  children?: ReactNode
 }): JSX.Element {
   return (
     <Box
diff --git a/app/src/molecules/JogControls/ControlContainer.tsx b/app/src/molecules/JogControls/ControlContainer.tsx
index 02e3c0b1692..a319b4f5b63 100644
--- a/app/src/molecules/JogControls/ControlContainer.tsx
+++ b/app/src/molecules/JogControls/ControlContainer.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   BORDERS,
@@ -9,11 +8,13 @@ import {
   SPACING,
   LegacyStyledText,
 } from '@opentrons/components'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 interface ControlContainerProps extends StyleProps {
   title: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const CONTROL_CHILDREN_STYLES = css`
diff --git a/app/src/molecules/JogControls/StepSizeControl.tsx b/app/src/molecules/JogControls/StepSizeControl.tsx
index 77d1e65b870..e8fd2d98860 100644
--- a/app/src/molecules/JogControls/StepSizeControl.tsx
+++ b/app/src/molecules/JogControls/StepSizeControl.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import {
@@ -22,6 +21,7 @@ import {
 import { ControlContainer } from './ControlContainer'
 import { TouchControlButton } from './TouchControlButton'
 
+import type { MouseEvent } from 'react'
 import type { StepSize } from './types'
 
 const JUMP_SIZE_SUBTITLE = '- / +'
@@ -107,9 +107,7 @@ export function StepSizeControl(props: StepSizeControlProps): JSX.Element {
     if (i > 0) setCurrentStepSize(stepSizes[i - 1])
   }
 
-  const handleStepSelect = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ): void => {
+  const handleStepSelect = (event: MouseEvent<HTMLButtonElement>): void => {
     setCurrentStepSize(Number(event.currentTarget.value) as StepSize)
     event.currentTarget.blur()
   }
diff --git a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
index fcc76f38505..0e26b805f16 100644
--- a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
+++ b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { COLORS, SPACING, BORDERS, CURSOR_POINTER } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { MiniCard } from '../'
 
-const render = (props: React.ComponentProps<typeof MiniCard>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof MiniCard>) => {
   return renderWithProviders(<MiniCard {...props} />)[0]
 }
 
 describe('MiniCard', () => {
-  let props: React.ComponentProps<typeof MiniCard>
+  let props: ComponentProps<typeof MiniCard>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/MiniCard/index.tsx b/app/src/molecules/MiniCard/index.tsx
index b65ccbbb59d..d95c42e149f 100644
--- a/app/src/molecules/MiniCard/index.tsx
+++ b/app/src/molecules/MiniCard/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   BORDERS,
@@ -8,12 +7,13 @@ import {
   SPACING,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 interface MiniCardProps extends StyleProps {
   onClick: () => void
   isSelected: boolean
-  children: React.ReactNode
+  children: ReactNode
   isError?: boolean
   isWarning?: boolean
 }
diff --git a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
index 73c44639e51..6e20f8997fa 100644
--- a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
+++ b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { COLORS, SPACING } from '@opentrons/components'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -6,6 +5,7 @@ import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ModuleIcon } from '../'
 
+import type { ComponentProps } from 'react'
 import type { AttachedModule } from '/app/redux/modules/types'
 import type * as OpentronsComponents from '@opentrons/components'
 
@@ -17,7 +17,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ModuleIcon>) => {
+const render = (props: ComponentProps<typeof ModuleIcon>) => {
   return renderWithProviders(<ModuleIcon {...props} />)[0]
 }
 
@@ -46,7 +46,7 @@ const mockHeaterShakerModule = {
 } as AttachedModule
 
 describe('ModuleIcon', () => {
-  let props: React.ComponentProps<typeof ModuleIcon>
+  let props: ComponentProps<typeof ModuleIcon>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/ModuleInfo/__tests__/ModuleInfo.test.tsx b/app/src/molecules/ModuleInfo/__tests__/ModuleInfo.test.tsx
index 1d732faeb18..de5eef75577 100644
--- a/app/src/molecules/ModuleInfo/__tests__/ModuleInfo.test.tsx
+++ b/app/src/molecules/ModuleInfo/__tests__/ModuleInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -7,11 +6,13 @@ import { when } from 'vitest-when'
 import { i18n } from '/app/i18n'
 import { ModuleInfo } from '../ModuleInfo'
 import { useRunHasStarted } from '/app/resources/runs'
+
+import type { ComponentProps } from 'react'
 import type { ModuleModel, ModuleType } from '@opentrons/shared-data'
 
 vi.mock('/app/resources/runs')
 
-const render = (props: React.ComponentProps<typeof ModuleInfo>) => {
+const render = (props: ComponentProps<typeof ModuleInfo>) => {
   return renderWithProviders(<ModuleInfo {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -26,7 +27,7 @@ const mockTCModule = {
 const MOCK_RUN_ID = '1'
 
 describe('ModuleInfo', () => {
-  let props: React.ComponentProps<typeof ModuleInfo>
+  let props: ComponentProps<typeof ModuleInfo>
   beforeEach(() => {
     props = {
       moduleModel: mockTCModule.model,
diff --git a/app/src/molecules/NavTab/__tests__/NavTab.test.tsx b/app/src/molecules/NavTab/__tests__/NavTab.test.tsx
index 176c76b60cc..e6a2c9a504f 100644
--- a/app/src/molecules/NavTab/__tests__/NavTab.test.tsx
+++ b/app/src/molecules/NavTab/__tests__/NavTab.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, beforeEach } from 'vitest'
@@ -7,7 +6,9 @@ import { SPACING, COLORS, TYPOGRAPHY, BORDERS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { NavTab } from '..'
 
-const render = (props: React.ComponentProps<typeof NavTab>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof NavTab>) => {
   return renderWithProviders(
     <MemoryRouter>
       <NavTab {...props} />
@@ -16,7 +17,7 @@ const render = (props: React.ComponentProps<typeof NavTab>) => {
 }
 
 describe('NavTab', () => {
-  let props: React.ComponentProps<typeof NavTab>
+  let props: ComponentProps<typeof NavTab>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/NavTab/index.tsx b/app/src/molecules/NavTab/index.tsx
index e170da56e43..6cdf6cb0e6b 100644
--- a/app/src/molecules/NavTab/index.tsx
+++ b/app/src/molecules/NavTab/index.tsx
@@ -3,6 +3,8 @@ import { NavLink } from 'react-router-dom'
 
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '@opentrons/components'
 
+import type { ComponentProps } from 'react'
+
 export const TAB_BORDER_STYLE = css`
   border-bottom-style: ${BORDERS.styleSolid};
   border-bottom-width: 2px;
@@ -15,7 +17,7 @@ interface NavTabProps {
   disabled?: boolean
 }
 
-const StyledNavLink = styled(NavLink)<React.ComponentProps<typeof NavLink>>`
+const StyledNavLink = styled(NavLink)<ComponentProps<typeof NavLink>>`
   padding: 0 ${SPACING.spacing4} ${SPACING.spacing8};
   ${TYPOGRAPHY.labelSemiBold}
   color: ${COLORS.grey50};
diff --git a/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx b/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx
index 2b520279cf8..5b487b2e7dc 100644
--- a/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx
+++ b/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { COLORS } from '@opentrons/components'
 import { ODDBackButton } from '..'
 import { renderWithProviders } from '/app/__testing-utils__'
 
-const render = (props: React.ComponentProps<typeof ODDBackButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ODDBackButton>) => {
   return renderWithProviders(<ODDBackButton {...props} />)[0]
 }
 
 describe('ODDBackButton', () => {
-  let props: React.ComponentProps<typeof ODDBackButton>
+  let props: ComponentProps<typeof ODDBackButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/ODDBackButton/index.tsx b/app/src/molecules/ODDBackButton/index.tsx
index 396feaa5e19..0390dc21284 100644
--- a/app/src/molecules/ODDBackButton/index.tsx
+++ b/app/src/molecules/ODDBackButton/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   ALIGN_CENTER,
   Btn,
@@ -11,8 +9,10 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { HTMLProps } from 'react'
+
 export function ODDBackButton(
-  props: React.HTMLProps<HTMLButtonElement>
+  props: HTMLProps<HTMLButtonElement>
 ): JSX.Element {
   const { onClick, label } = props
 
diff --git a/app/src/molecules/OT2CalibrationNeedHelpLink/NeedHelpLink.tsx b/app/src/molecules/OT2CalibrationNeedHelpLink/NeedHelpLink.tsx
index a87a7808827..6dd9a5f8d86 100644
--- a/app/src/molecules/OT2CalibrationNeedHelpLink/NeedHelpLink.tsx
+++ b/app/src/molecules/OT2CalibrationNeedHelpLink/NeedHelpLink.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Flex,
@@ -11,9 +10,11 @@ import {
   SPACING,
 } from '@opentrons/components'
 
+import type { ComponentProps } from 'react'
+
 const SUPPORT_PAGE_URL = 'https://support.opentrons.com/s/ot2-calibration'
 
-interface NeedHelpLinkProps extends React.ComponentProps<typeof Flex> {
+interface NeedHelpLinkProps extends ComponentProps<typeof Flex> {
   href?: string
 }
 
diff --git a/app/src/molecules/OddModal/OddModal.tsx b/app/src/molecules/OddModal/OddModal.tsx
index 9b32974000c..e95aaa1d9a4 100644
--- a/app/src/molecules/OddModal/OddModal.tsx
+++ b/app/src/molecules/OddModal/OddModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -11,14 +10,15 @@ import {
 import { BackgroundOverlay } from '../BackgroundOverlay'
 import { OddModalHeader } from './OddModalHeader'
 
+import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { OddModalHeaderBaseProps, ModalSize } from './types'
 
 interface OddModalProps extends StyleProps {
   /** clicking anywhere outside of the modal closes it  */
-  onOutsideClick?: React.MouseEventHandler
+  onOutsideClick?: MouseEventHandler
   /** modal content */
-  children: React.ReactNode
+  children: ReactNode
   /** for small, medium, or large modal sizes, medium by default */
   modalSize?: ModalSize
   /** see OddModalHeader component for more details */
@@ -66,7 +66,7 @@ export function OddModal(props: OddModalProps): JSX.Element {
         margin={SPACING.spacing32}
         flexDirection={DIRECTION_COLUMN}
         aria-label={`modal_${modalSize}`}
-        onClick={(e: React.MouseEvent) => {
+        onClick={(e: MouseEvent) => {
           e.stopPropagation()
         }}
       >
diff --git a/app/src/molecules/OddModal/__tests__/OddModal.test.tsx b/app/src/molecules/OddModal/__tests__/OddModal.test.tsx
index d8c129a8b01..9d9097b4729 100644
--- a/app/src/molecules/OddModal/__tests__/OddModal.test.tsx
+++ b/app/src/molecules/OddModal/__tests__/OddModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -7,14 +6,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { OddModalHeader } from '../OddModalHeader'
 import { OddModal } from '../OddModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../OddModalHeader')
 
-const render = (props: React.ComponentProps<typeof OddModal>) => {
+const render = (props: ComponentProps<typeof OddModal>) => {
   return renderWithProviders(<OddModal {...props} />)[0]
 }
 
 describe('OddModal', () => {
-  let props: React.ComponentProps<typeof OddModal>
+  let props: ComponentProps<typeof OddModal>
   beforeEach(() => {
     props = {
       onOutsideClick: vi.fn(),
diff --git a/app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx b/app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx
index e824e49648c..94499d35abf 100644
--- a/app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx
+++ b/app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { OddModalHeader } from '../OddModalHeader'
 
-const render = (props: React.ComponentProps<typeof OddModalHeader>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof OddModalHeader>) => {
   return renderWithProviders(<OddModalHeader {...props} />)[0]
 }
 
 describe('OddModalHeader', () => {
-  let props: React.ComponentProps<typeof OddModalHeader>
+  let props: ComponentProps<typeof OddModalHeader>
   beforeEach(() => {
     props = {
       title: 'title',
diff --git a/app/src/molecules/OddModal/types.ts b/app/src/molecules/OddModal/types.ts
index b0fa6d103ae..e4f07cc52ad 100644
--- a/app/src/molecules/OddModal/types.ts
+++ b/app/src/molecules/OddModal/types.ts
@@ -1,10 +1,11 @@
+import type { MouseEventHandler } from 'react'
 import type { IconName, StyleProps } from '@opentrons/components'
 
 export type ModalSize = 'small' | 'medium' | 'large'
 
 export interface OddModalHeaderBaseProps extends StyleProps {
   title: string | JSX.Element
-  onClick?: React.MouseEventHandler
+  onClick?: MouseEventHandler
   hasExitIcon?: boolean
   iconName?: IconName
   iconColor?: string
diff --git a/app/src/molecules/OffsetVector/__tests__/OffsetVector.test.tsx b/app/src/molecules/OffsetVector/__tests__/OffsetVector.test.tsx
index bb247c0175a..e3b4c87da6c 100644
--- a/app/src/molecules/OffsetVector/__tests__/OffsetVector.test.tsx
+++ b/app/src/molecules/OffsetVector/__tests__/OffsetVector.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, beforeEach } from 'vitest'
@@ -7,12 +6,14 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { OffsetVector } from '../'
 
-const render = (props: React.ComponentProps<typeof OffsetVector>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof OffsetVector>) => {
   return renderWithProviders(<OffsetVector {...props} />)[0]
 }
 
 describe('OffsetVector', () => {
-  let props: React.ComponentProps<typeof OffsetVector>
+  let props: ComponentProps<typeof OffsetVector>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/OffsetVector/index.tsx b/app/src/molecules/OffsetVector/index.tsx
index 155019e8074..af4d8c5dc68 100644
--- a/app/src/molecules/OffsetVector/index.tsx
+++ b/app/src/molecules/OffsetVector/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   Flex,
   SPACING,
@@ -6,13 +5,14 @@ import {
   LegacyStyledText,
 } from '@opentrons/components'
 
+import type { ComponentProps } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 interface OffsetVectorProps extends StyleProps {
   x: number
   y: number
   z: number
-  as?: React.ComponentProps<typeof LegacyStyledText>['as']
+  as?: ComponentProps<typeof LegacyStyledText>['as']
 }
 
 export function OffsetVector(props: OffsetVectorProps): JSX.Element {
diff --git a/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx b/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx
index 16113e28c9a..1a179f1b987 100644
--- a/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx
+++ b/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
 import {
@@ -21,13 +20,15 @@ import SuccessIcon from '/app/assets/images/icon_success.png'
 import { getIsOnDevice } from '/app/redux/config'
 
 import { Skeleton } from '/app/atoms/Skeleton'
+
+import type { ReactNode } from 'react'
 import type { RobotType } from '@opentrons/shared-data'
 
 interface Props {
   iconColor: string
   header: string
   isSuccess: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   subHeader?: string | JSX.Element
   isPending?: boolean
   robotType?: RobotType
diff --git a/app/src/molecules/SimpleWizardBody/SimpleWizardInProgressBody.tsx b/app/src/molecules/SimpleWizardBody/SimpleWizardInProgressBody.tsx
index 10882025dfc..92f65aa2cf2 100644
--- a/app/src/molecules/SimpleWizardBody/SimpleWizardInProgressBody.tsx
+++ b/app/src/molecules/SimpleWizardBody/SimpleWizardInProgressBody.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
-import type { StyleProps } from '@opentrons/components'
 import { InProgressModal } from '../InProgressModal/InProgressModal'
 import { SimpleWizardBodyContainer } from './SimpleWizardBodyContainer'
 
-export type SimpleWizardInProgressBodyProps = React.ComponentProps<
+import type { ComponentProps } from 'react'
+import type { StyleProps } from '@opentrons/components'
+
+export type SimpleWizardInProgressBodyProps = ComponentProps<
   typeof InProgressModal
 > &
   StyleProps
diff --git a/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx b/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx
index 9849e8fa03c..f21e14f0580 100644
--- a/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx
+++ b/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { COLORS } from '@opentrons/components'
@@ -7,14 +6,16 @@ import { Skeleton } from '/app/atoms/Skeleton'
 import { getIsOnDevice } from '/app/redux/config'
 import { SimpleWizardBody } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/Skeleton')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof SimpleWizardBody>) => {
+const render = (props: ComponentProps<typeof SimpleWizardBody>) => {
   return renderWithProviders(<SimpleWizardBody {...props} />)[0]
 }
 describe('SimpleWizardBody', () => {
-  let props: React.ComponentProps<typeof SimpleWizardBody>
+  let props: ComponentProps<typeof SimpleWizardBody>
   beforeEach(() => {
     props = {
       iconColor: COLORS.red60,
diff --git a/app/src/molecules/SimpleWizardBody/index.tsx b/app/src/molecules/SimpleWizardBody/index.tsx
index b554b71b90e..c49c49be2a8 100644
--- a/app/src/molecules/SimpleWizardBody/index.tsx
+++ b/app/src/molecules/SimpleWizardBody/index.tsx
@@ -1,8 +1,9 @@
-import type * as React from 'react'
-
 import { SimpleWizardBodyContainer } from './SimpleWizardBodyContainer'
 import { SimpleWizardBodyContent } from './SimpleWizardBodyContent'
 import { SimpleWizardInProgressBody } from './SimpleWizardInProgressBody'
+
+import type { ComponentProps } from 'react'
+
 export {
   SimpleWizardBodyContainer,
   SimpleWizardBodyContent,
@@ -10,8 +11,8 @@ export {
 }
 
 export function SimpleWizardBody(
-  props: React.ComponentProps<typeof SimpleWizardBodyContent> &
-    React.ComponentProps<typeof SimpleWizardBodyContainer>
+  props: ComponentProps<typeof SimpleWizardBodyContent> &
+    ComponentProps<typeof SimpleWizardBodyContainer>
 ): JSX.Element {
   const { children, ...rest } = props
   return (
diff --git a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx
index c4829b79615..b90da347489 100644
--- a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx
+++ b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import '@testing-library/jest-dom/vitest'
@@ -7,6 +6,7 @@ import { renderHook, render, fireEvent, screen } from '@testing-library/react'
 import { useTrackEvent } from '/app/redux/analytics'
 import { useToggleGroup } from '../useToggleGroup'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -23,7 +23,7 @@ describe('useToggleGroup', () => {
   })
 
   it('should return default selectedValue and toggle buttons', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -35,7 +35,7 @@ describe('useToggleGroup', () => {
     expect(result.current[0]).toBe('List View')
   })
   it('should record an analytics event for list view', async () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -53,7 +53,7 @@ describe('useToggleGroup', () => {
     })
   })
   it('should record an analytics event for map view', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
diff --git a/app/src/molecules/UnorderedList/index.tsx b/app/src/molecules/UnorderedList/index.tsx
index cf9937266a8..f48c3e685ba 100644
--- a/app/src/molecules/UnorderedList/index.tsx
+++ b/app/src/molecules/UnorderedList/index.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { SPACING, LegacyStyledText } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface UnorderedListProps {
-  items: React.ReactNode[]
+  items: ReactNode[]
 }
 export function UnorderedList(props: UnorderedListProps): JSX.Element {
   const { items } = props
diff --git a/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx b/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx
index 52b074b37d8..1f8470efcd0 100644
--- a/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx
+++ b/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { when } from 'vitest-when'
@@ -9,10 +8,12 @@ import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstop
 import { UpdateBanner } from '..'
 import { renderWithProviders } from '/app/__testing-utils__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux-resources/robots')
 vi.mock('/app/resources/devices/hooks/useIsEstopNotDisengaged')
 
-const render = (props: React.ComponentProps<typeof UpdateBanner>) => {
+const render = (props: ComponentProps<typeof UpdateBanner>) => {
   return renderWithProviders(<UpdateBanner {...props} />, {
     i18nInstance: i18n,
     initialState: { robotsByName: 'test' },
@@ -20,7 +21,7 @@ const render = (props: React.ComponentProps<typeof UpdateBanner>) => {
 }
 
 describe('Module Update Banner', () => {
-  let props: React.ComponentProps<typeof UpdateBanner>
+  let props: ComponentProps<typeof UpdateBanner>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/WizardHeader/__tests__/WizardHeader.test.tsx b/app/src/molecules/WizardHeader/__tests__/WizardHeader.test.tsx
index 0e11447cac2..436e594dd59 100644
--- a/app/src/molecules/WizardHeader/__tests__/WizardHeader.test.tsx
+++ b/app/src/molecules/WizardHeader/__tests__/WizardHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -8,17 +7,19 @@ import { StepMeter } from '/app/atoms/StepMeter'
 import { WizardHeader } from '..'
 import { renderWithProviders } from '/app/__testing-utils__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/StepMeter')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof WizardHeader>) => {
+const render = (props: ComponentProps<typeof WizardHeader>) => {
   return renderWithProviders(<WizardHeader {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('WizardHeader', () => {
-  let props: React.ComponentProps<typeof WizardHeader>
+  let props: ComponentProps<typeof WizardHeader>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/WizardRequiredEquipmentList/index.tsx b/app/src/molecules/WizardRequiredEquipmentList/index.tsx
index f6f7457a71a..3a39d904639 100644
--- a/app/src/molecules/WizardRequiredEquipmentList/index.tsx
+++ b/app/src/molecules/WizardRequiredEquipmentList/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
@@ -23,9 +22,10 @@ import { Divider } from '/app/atoms/structure'
 import { labwareImages } from '/app/local-resources/labware'
 import { equipmentImages } from './equipmentImages'
 
+import type { ComponentProps } from 'react'
 import type { StyleProps } from '@opentrons/components'
 interface WizardRequiredEquipmentListProps extends StyleProps {
-  equipmentList: Array<React.ComponentProps<typeof RequiredEquipmentCard>>
+  equipmentList: Array<ComponentProps<typeof RequiredEquipmentCard>>
   footer?: string
 }
 export function WizardRequiredEquipmentList(
diff --git a/app/src/molecules/modals/BottomButtonBar.tsx b/app/src/molecules/modals/BottomButtonBar.tsx
index d5c202e943c..f7f78f067e4 100644
--- a/app/src/molecules/modals/BottomButtonBar.tsx
+++ b/app/src/molecules/modals/BottomButtonBar.tsx
@@ -1,18 +1,18 @@
 // bottom button bar for modals
 // TODO(mc, 2018-08-18): maybe make this the default AlertModal behavior
-import type * as React from 'react'
 import cx from 'classnames'
 
 import { OutlineButton } from '@opentrons/components'
 import styles from './styles.module.css'
 
+import type { ReactNode } from 'react'
 import type { ButtonProps } from '@opentrons/components'
 
 type MaybeButtonProps = ButtonProps | null | undefined
 interface Props {
   buttons: MaybeButtonProps[]
   className?: string | null
-  description?: React.ReactNode | null
+  description?: ReactNode | null
 }
 
 export function BottomButtonBar(props: Props): JSX.Element {
diff --git a/app/src/molecules/modals/ScrollableAlertModal.tsx b/app/src/molecules/modals/ScrollableAlertModal.tsx
index c98846899b8..d8ebdc18543 100644
--- a/app/src/molecules/modals/ScrollableAlertModal.tsx
+++ b/app/src/molecules/modals/ScrollableAlertModal.tsx
@@ -1,12 +1,13 @@
 // AlertModal with vertical scrolling
-import type * as React from 'react'
 import omit from 'lodash/omit'
 
 import { AlertModal } from '@opentrons/components'
 import { BottomButtonBar } from './BottomButtonBar'
 import styles from './styles.module.css'
 
-type Props = React.ComponentProps<typeof AlertModal>
+import type { ComponentProps } from 'react'
+
+type Props = ComponentProps<typeof AlertModal>
 
 export function ScrollableAlertModal(props: Props): JSX.Element {
   return (
diff --git a/app/src/organisms/Desktop/AdvancedSettings/OT2AdvancedSettings.tsx b/app/src/organisms/Desktop/AdvancedSettings/OT2AdvancedSettings.tsx
index 7ab3ebb0bd0..3ff3313a840 100644
--- a/app/src/organisms/Desktop/AdvancedSettings/OT2AdvancedSettings.tsx
+++ b/app/src/organisms/Desktop/AdvancedSettings/OT2AdvancedSettings.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
@@ -17,6 +16,7 @@ import {
 } from '/app/redux/calibration'
 import { getUseTrashSurfaceForTipCal } from '/app/redux/config'
 
+import type { ChangeEvent } from 'react'
 import type { Dispatch, State } from '/app/redux/types'
 
 const ALWAYS_BLOCK: 'always-block' = 'always-block'
@@ -74,7 +74,7 @@ export function OT2AdvancedSettings(): JSX.Element {
               ? ALWAYS_BLOCK
               : ALWAYS_PROMPT
           }
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
             // you know this is a limited-selection field whose values are only
             // the elements of BlockSelection; i know this is a limited-selection
             // field whose values are only the elements of BlockSelection; but sadly,
diff --git a/app/src/organisms/Desktop/AdvancedSettings/OverridePathToPython.tsx b/app/src/organisms/Desktop/AdvancedSettings/OverridePathToPython.tsx
index d0e5b7d6d93..a87d739172f 100644
--- a/app/src/organisms/Desktop/AdvancedSettings/OverridePathToPython.tsx
+++ b/app/src/organisms/Desktop/AdvancedSettings/OverridePathToPython.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 
@@ -27,6 +26,7 @@ import {
   ANALYTICS_CHANGE_PATH_TO_PYTHON_DIRECTORY,
 } from '/app/redux/analytics'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 
 export function OverridePathToPython(): JSX.Element {
@@ -35,7 +35,7 @@ export function OverridePathToPython(): JSX.Element {
   const dispatch = useDispatch<Dispatch>()
   const trackEvent = useTrackEvent()
 
-  const handleClickPythonDirectoryChange: React.MouseEventHandler<HTMLButtonElement> = _event => {
+  const handleClickPythonDirectoryChange: MouseEventHandler<HTMLButtonElement> = _event => {
     dispatch(changePythonPathOverrideConfig())
     trackEvent({
       name: ANALYTICS_CHANGE_PATH_TO_PYTHON_DIRECTORY,
diff --git a/app/src/organisms/Desktop/AdvancedSettings/UpdatedChannel.tsx b/app/src/organisms/Desktop/AdvancedSettings/UpdatedChannel.tsx
index aca0348cb7b..ec261c75083 100644
--- a/app/src/organisms/Desktop/AdvancedSettings/UpdatedChannel.tsx
+++ b/app/src/organisms/Desktop/AdvancedSettings/UpdatedChannel.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -19,6 +18,7 @@ import {
   updateConfigValue,
 } from '/app/redux/config'
 
+import type { ComponentProps } from 'react'
 import type { SelectOption } from '/app/atoms/SelectField/Select'
 import type { Dispatch } from '/app/redux/types'
 
@@ -31,7 +31,7 @@ export function UpdatedChannel(): JSX.Element {
     dispatch(updateConfigValue('update.channel', value))
   }
 
-  const formatOptionLabel: React.ComponentProps<
+  const formatOptionLabel: ComponentProps<
     typeof SelectField
   >['formatOptionLabel'] = (option, index): JSX.Element => {
     const { label, value } = option
diff --git a/app/src/organisms/Desktop/AppSettings/__tests__/ConnectRobotSlideout.test.tsx b/app/src/organisms/Desktop/AppSettings/__tests__/ConnectRobotSlideout.test.tsx
index c92e1f495a0..4cddd3e1763 100644
--- a/app/src/organisms/Desktop/AppSettings/__tests__/ConnectRobotSlideout.test.tsx
+++ b/app/src/organisms/Desktop/AppSettings/__tests__/ConnectRobotSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -8,17 +7,19 @@ import { getConfig } from '/app/redux/config'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ConnectRobotSlideout } from '../ConnectRobotSlideout'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof ConnectRobotSlideout>) => {
+const render = (props: ComponentProps<typeof ConnectRobotSlideout>) => {
   return renderWithProviders(<ConnectRobotSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ConnectRobotSlideout', () => {
-  let props: React.ComponentProps<typeof ConnectRobotSlideout>
+  let props: ComponentProps<typeof ConnectRobotSlideout>
 
   beforeEach(() => {
     vi.mocked(getScanning).mockReturnValue(true)
@@ -54,7 +55,7 @@ describe('ConnectRobotSlideout', () => {
       checkIpAndHostname: vi.fn(),
       isExpanded: true,
       onCloseClick: vi.fn(),
-    } as React.ComponentProps<typeof ConnectRobotSlideout>
+    } as ComponentProps<typeof ConnectRobotSlideout>
   })
 
   it('renders correct title, body, and footer for ConnectRobotSlideout', () => {
diff --git a/app/src/organisms/Desktop/AppSettings/__tests__/PreviousVersionModal.test.tsx b/app/src/organisms/Desktop/AppSettings/__tests__/PreviousVersionModal.test.tsx
index b4449623c05..59eff47aa2c 100644
--- a/app/src/organisms/Desktop/AppSettings/__tests__/PreviousVersionModal.test.tsx
+++ b/app/src/organisms/Desktop/AppSettings/__tests__/PreviousVersionModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -10,12 +9,14 @@ import {
   PREVIOUS_RELEASES_URL,
 } from '../PreviousVersionModal'
 
-const render = (props: React.ComponentProps<typeof PreviousVersionModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof PreviousVersionModal>) => {
   return renderWithProviders(<PreviousVersionModal {...props} />, {
     i18nInstance: i18n,
   })
 }
-const props: React.ComponentProps<typeof PreviousVersionModal> = {
+const props: ComponentProps<typeof PreviousVersionModal> = {
   closeModal: vi.fn(),
 }
 
diff --git a/app/src/organisms/Desktop/CalibrateDeck/__tests__/CalibrateDeck.test.tsx b/app/src/organisms/Desktop/CalibrateDeck/__tests__/CalibrateDeck.test.tsx
index 3f90064c03c..13415c8e47c 100644
--- a/app/src/organisms/Desktop/CalibrateDeck/__tests__/CalibrateDeck.test.tsx
+++ b/app/src/organisms/Desktop/CalibrateDeck/__tests__/CalibrateDeck.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, beforeEach, expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -14,6 +13,7 @@ import {
   CalibrationError,
 } from '/app/organisms/Desktop/CalibrationError'
 
+import type { ComponentProps, ComponentType } from 'react'
 import type { DeckCalibrationStep } from '/app/redux/sessions/types'
 import type { DispatchRequestsType } from '/app/redux/robot-api'
 
@@ -41,14 +41,14 @@ describe('CalibrateDeck', () => {
     ...mockDeckCalibrationSessionAttributes,
   }
   const render = (
-    props: Partial<React.ComponentProps<typeof CalibrateDeck>> = {}
+    props: Partial<ComponentProps<typeof CalibrateDeck>> = {}
   ) => {
     const {
       showSpinner = false,
       isJogging = false,
       session = mockDeckCalSession,
     } = props
-    return renderWithProviders<React.ComponentType<typeof CalibrateDeck>>(
+    return renderWithProviders<ComponentType<typeof CalibrateDeck>>(
       <CalibrateDeck
         robotName="robot-name"
         session={session}
diff --git a/app/src/organisms/Desktop/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx b/app/src/organisms/Desktop/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx
index 15117cac92f..ac34e42e5ee 100644
--- a/app/src/organisms/Desktop/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx
+++ b/app/src/organisms/Desktop/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,13 +6,15 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import * as Sessions from '/app/redux/sessions'
 import { mockPipetteOffsetCalibrationSessionAttributes } from '/app/redux/sessions/__fixtures__'
-import { CalibratePipetteOffset } from '../index'
-import type { PipetteOffsetCalibrationStep } from '/app/redux/sessions/types'
-import type { DispatchRequestsType } from '/app/redux/robot-api'
 import {
   useCalibrationError,
   CalibrationError,
 } from '/app/organisms/Desktop/CalibrationError'
+import { CalibratePipetteOffset } from '../index'
+
+import type { ComponentProps, ComponentType } from 'react'
+import type { PipetteOffsetCalibrationStep } from '/app/redux/sessions/types'
+import type { DispatchRequestsType } from '/app/redux/robot-api'
 
 vi.mock('@opentrons/shared-data', async importOriginal => {
   const actual = await importOriginal<typeof getDeckDefinitions>()
@@ -35,16 +36,14 @@ interface CalibratePipetteOffsetSpec {
 describe('CalibratePipetteOffset', () => {
   let dispatchRequests: DispatchRequestsType
   const render = (
-    props: Partial<React.ComponentProps<typeof CalibratePipetteOffset>> = {}
+    props: Partial<ComponentProps<typeof CalibratePipetteOffset>> = {}
   ) => {
     const {
       showSpinner = false,
       isJogging = false,
       session = mockPipOffsetCalSession,
     } = props
-    return renderWithProviders<
-      React.ComponentType<typeof CalibratePipetteOffset>
-    >(
+    return renderWithProviders<ComponentType<typeof CalibratePipetteOffset>>(
       <CalibratePipetteOffset
         robotName="robot-name"
         session={session}
diff --git a/app/src/organisms/Desktop/CalibrateTipLength/TipLengthCalibrationInfoBox.tsx b/app/src/organisms/Desktop/CalibrateTipLength/TipLengthCalibrationInfoBox.tsx
index 7bcf3bd81e3..c13d9f5bab9 100644
--- a/app/src/organisms/Desktop/CalibrateTipLength/TipLengthCalibrationInfoBox.tsx
+++ b/app/src/organisms/Desktop/CalibrateTipLength/TipLengthCalibrationInfoBox.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   Box,
   Text,
@@ -7,9 +6,11 @@ import {
   SPACING,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 export interface TipLengthCalibrationInfoBoxProps {
   title: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function TipLengthCalibrationInfoBox(
diff --git a/app/src/organisms/Desktop/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx b/app/src/organisms/Desktop/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx
index 199ec279988..7ed7cad97e9 100644
--- a/app/src/organisms/Desktop/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx
+++ b/app/src/organisms/Desktop/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx
@@ -1,17 +1,18 @@
 import { vi, it, describe, expect } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
-
 import { i18n } from '/app/i18n'
 import { setUseTrashSurfaceForTipCal } from '/app/redux/calibration'
 import { AskForCalibrationBlockModal } from '../AskForCalibrationBlockModal'
-import { fireEvent, screen } from '@testing-library/react'
+
+import type { ComponentProps } from 'react'
 
 describe('AskForCalibrationBlockModal', () => {
   const onResponse = vi.fn()
   const render = () => {
     return renderWithProviders<
-      React.ComponentProps<typeof AskForCalibrationBlockModal>
+      ComponentProps<typeof AskForCalibrationBlockModal>
     >(
       <AskForCalibrationBlockModal
         onResponse={onResponse}
diff --git a/app/src/organisms/Desktop/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx b/app/src/organisms/Desktop/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx
index 7324f182f66..9f19f449888 100644
--- a/app/src/organisms/Desktop/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx
+++ b/app/src/organisms/Desktop/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
@@ -15,6 +14,7 @@ import {
   CalibrationError,
 } from '/app/organisms/Desktop/CalibrationError'
 
+import type { ComponentProps, ComponentType } from 'react'
 import type { TipLengthCalibrationStep } from '/app/redux/sessions/types'
 
 vi.mock('@opentrons/shared-data', async importOriginal => {
@@ -41,14 +41,14 @@ describe('CalibrateTipLength', () => {
     ...mockTipLengthCalibrationSessionAttributes,
   }
   const render = (
-    props: Partial<React.ComponentProps<typeof CalibrateTipLength>> = {}
+    props: Partial<ComponentProps<typeof CalibrateTipLength>> = {}
   ) => {
     const {
       showSpinner = false,
       isJogging = false,
       session = mockTipLengthSession,
     } = props
-    return renderWithProviders<React.ComponentType<typeof CalibrateTipLength>>(
+    return renderWithProviders<ComponentType<typeof CalibrateTipLength>>(
       <CalibrateTipLength
         robotName="robot-name"
         session={session}
diff --git a/app/src/organisms/Desktop/CalibrationError/__tests__/CalibrationError.test.tsx b/app/src/organisms/Desktop/CalibrationError/__tests__/CalibrationError.test.tsx
index d8213c793ca..3676c0e95f0 100644
--- a/app/src/organisms/Desktop/CalibrationError/__tests__/CalibrationError.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationError/__tests__/CalibrationError.test.tsx
@@ -8,7 +8,7 @@ import { CalibrationError } from '..'
 import type { ComponentProps } from 'react'
 
 describe('CalibrationError', () => {
-  let props: React.ComponentProps<typeof CalibrationError>
+  let props: ComponentProps<typeof CalibrationError>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/CalibrationPanels/CompleteConfirmation.tsx b/app/src/organisms/Desktop/CalibrationPanels/CompleteConfirmation.tsx
index cbd0e214cd1..3f6de1fed33 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/CompleteConfirmation.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/CompleteConfirmation.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
@@ -16,11 +15,13 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { MouseEventHandler, ReactNode } from 'react'
+
 interface CompleteConfirmationProps {
-  proceed: React.MouseEventHandler
+  proceed: MouseEventHandler
   flowName?: string
   body?: string
-  visualAid?: React.ReactNode
+  visualAid?: ReactNode
 }
 
 export function CompleteConfirmation(
diff --git a/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Body.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Body.test.tsx
index c1300fb3218..26682dff0cc 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Body.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Body.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,7 +7,9 @@ import * as Sessions from '/app/redux/sessions'
 import { i18n } from '/app/i18n'
 import { Body } from '../Body'
 
-const render = (props: React.ComponentProps<typeof Body>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Body>) => {
   return renderWithProviders(<Body {...props} />, {
     i18nInstance: i18n,
   })[0]
diff --git a/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx
index a34460571ed..4005f6c996c 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -9,6 +8,8 @@ import { i18n } from '/app/i18n'
 import { Introduction } from '../'
 import { ChooseTipRack } from '../../ChooseTipRack'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../ChooseTipRack')
 
 const mockCalInvalidationHandler = vi.fn()
@@ -17,9 +18,7 @@ describe('Introduction', () => {
   const mockSendCommands = vi.fn()
   const mockCleanUpAndExit = vi.fn()
 
-  const render = (
-    props: Partial<React.ComponentProps<typeof Introduction>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof Introduction>> = {}) => {
     return renderWithProviders(
       <Introduction
         sendCommands={mockSendCommands}
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChooseTipRack.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChooseTipRack.test.tsx
index 4bb1cecd0ef..1a8de5f9a00 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChooseTipRack.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChooseTipRack.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
@@ -19,6 +18,7 @@ import {
 import { getCustomTipRackDefinitions } from '/app/redux/custom-labware'
 import { ChooseTipRack } from '../ChooseTipRack'
 
+import type { ComponentProps } from 'react'
 import type { AttachedPipettesByMount } from '/app/redux/pipettes/types'
 
 vi.mock('@opentrons/react-api-client')
@@ -32,14 +32,14 @@ const mockAttachedPipettes: AttachedPipettesByMount = {
   right: null,
 } as any
 
-const render = (props: React.ComponentProps<typeof ChooseTipRack>) => {
+const render = (props: ComponentProps<typeof ChooseTipRack>) => {
   return renderWithProviders(<ChooseTipRack {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ChooseTipRack', () => {
-  let props: React.ComponentProps<typeof ChooseTipRack>
+  let props: ComponentProps<typeof ChooseTipRack>
 
   beforeEach(() => {
     vi.mocked(Select).mockReturnValue(<div>mock select</div>)
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx
index 5eb7fa1db8b..27bc9a7d233 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx
@@ -1,13 +1,14 @@
-import type * as React from 'react'
 import { it, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ChosenTipRackRender } from '../ChosenTipRackRender'
+
+import type { ComponentProps } from 'react'
 import type { SelectOption } from '/app/atoms/SelectField/Select'
 
-const render = (props: React.ComponentProps<typeof ChosenTipRackRender>) => {
+const render = (props: ComponentProps<typeof ChosenTipRackRender>) => {
   return renderWithProviders(<ChosenTipRackRender {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -19,7 +20,7 @@ const mockSelectValue = {
 } as SelectOption
 
 describe('ChosenTipRackRender', () => {
-  let props: React.ComponentProps<typeof ChosenTipRackRender>
+  let props: ComponentProps<typeof ChosenTipRackRender>
   beforeEach(() => {
     props = {
       selectedValue: mockSelectValue,
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx
index 99dc73310d1..8dd9575a2c3 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -7,10 +6,12 @@ import { i18n } from '/app/i18n'
 
 import { CompleteConfirmation } from '../CompleteConfirmation'
 
+import type { ComponentProps } from 'react'
+
 describe('CompleteConfirmation', () => {
   const mockCleanUpAndExit = vi.fn()
   const render = (
-    props: Partial<React.ComponentProps<typeof CompleteConfirmation>> = {}
+    props: Partial<ComponentProps<typeof CompleteConfirmation>> = {}
   ) => {
     const { proceed = mockCleanUpAndExit, flowName, body, visualAid } = props
     return renderWithProviders(
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx
index 53fb8559e55..11581f72c55 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -6,11 +5,13 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmCrashRecovery } from '../ConfirmCrashRecovery'
 
+import type { ComponentProps } from 'react'
+
 describe('ConfirmCrashRecovery', () => {
   const mockBack = vi.fn()
   const mockConfirm = vi.fn()
   const render = (
-    props: Partial<React.ComponentProps<typeof ConfirmCrashRecovery>> = {}
+    props: Partial<ComponentProps<typeof ConfirmCrashRecovery>> = {}
   ) => {
     const { back = mockBack, confirm = mockConfirm } = props
     return renderWithProviders(
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmExit.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmExit.test.tsx
index 086c122e8bf..c09bf0dcd84 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmExit.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmExit.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -7,12 +6,12 @@ import { i18n } from '/app/i18n'
 
 import { ConfirmExit } from '../ConfirmExit'
 
+import type { ComponentProps } from 'react'
+
 describe('ConfirmExit', () => {
   const mockBack = vi.fn()
   const mockExit = vi.fn()
-  const render = (
-    props: Partial<React.ComponentProps<typeof ConfirmExit>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof ConfirmExit>> = {}) => {
     const { heading, body } = props
     return renderWithProviders(
       <ConfirmExit
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/DeckSetup.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/DeckSetup.test.tsx
index bfa641e6b26..5560594c981 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/DeckSetup.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/DeckSetup.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -11,6 +10,7 @@ import {
 import * as Sessions from '/app/redux/sessions'
 import { DeckSetup } from '../DeckSetup'
 
+import type { ComponentProps } from 'react'
 import type { getDeckDefinitions } from '@opentrons/shared-data'
 
 vi.mock('/app/assets/labware/getLabware')
@@ -27,9 +27,7 @@ describe('DeckSetup', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
 
-  const render = (
-    props: Partial<React.ComponentProps<typeof DeckSetup>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof DeckSetup>> = {}) => {
     const {
       mount = 'left',
       isMulti = false,
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureNozzle.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureNozzle.test.tsx
index d0de251b0ad..e95c612ec01 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureNozzle.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureNozzle.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -11,11 +10,13 @@ import {
 import * as Sessions from '/app/redux/sessions'
 import { MeasureNozzle } from '../MeasureNozzle'
 
+import type { ComponentProps } from 'react'
+
 describe('MeasureNozzle', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
   const render = (
-    props: Partial<React.ComponentProps<typeof MeasureNozzle>> = {}
+    props: Partial<ComponentProps<typeof MeasureNozzle>> = {}
   ) => {
     const {
       mount = 'left',
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureTip.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureTip.test.tsx
index 70d8ab54a6b..6f37d74fca5 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureTip.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureTip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -12,12 +11,12 @@ import * as Sessions from '/app/redux/sessions'
 
 import { MeasureTip } from '../MeasureTip'
 
+import type { ComponentProps } from 'react'
+
 describe('MeasureTip', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
-  const render = (
-    props: Partial<React.ComponentProps<typeof MeasureTip>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof MeasureTip>> = {}) => {
     const {
       mount = 'left',
       isMulti = false,
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveXYPoint.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveXYPoint.test.tsx
index 3d7dbda32a9..1965c0b1a14 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveXYPoint.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveXYPoint.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -9,12 +8,12 @@ import { mockDeckCalTipRack } from '/app/redux/sessions/__fixtures__'
 import * as Sessions from '/app/redux/sessions'
 import { SaveXYPoint } from '../SaveXYPoint'
 
+import type { ComponentProps } from 'react'
+
 describe('SaveXYPoint', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
-  const render = (
-    props: Partial<React.ComponentProps<typeof SaveXYPoint>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof SaveXYPoint>> = {}) => {
     const {
       mount = 'left',
       isMulti = false,
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveZPoint.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveZPoint.test.tsx
index 36f04c1ebb2..dab0a5ee2b4 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveZPoint.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveZPoint.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -12,13 +11,13 @@ import {
 import * as Sessions from '/app/redux/sessions'
 import { SaveZPoint } from '../SaveZPoint'
 
+import type { ComponentProps } from 'react'
+
 describe('SaveZPoint', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
 
-  const render = (
-    props: Partial<React.ComponentProps<typeof SaveZPoint>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof SaveZPoint>> = {}) => {
     const {
       mount = 'left',
       isMulti = false,
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipConfirmation.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipConfirmation.test.tsx
index f9eee22d78b..979db72ecb0 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipConfirmation.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipConfirmation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -8,11 +7,13 @@ import { mockDeckCalTipRack } from '/app/redux/sessions/__fixtures__'
 import * as Sessions from '/app/redux/sessions'
 import { TipConfirmation } from '../TipConfirmation'
 
+import type { ComponentProps } from 'react'
+
 describe('TipConfirmation', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
   const render = (
-    props: Partial<React.ComponentProps<typeof TipConfirmation>> = {}
+    props: Partial<ComponentProps<typeof TipConfirmation>> = {}
   ) => {
     const {
       mount = 'left',
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipPickUp.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipPickUp.test.tsx
index b6836cf96fb..6b8aac3fe88 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipPickUp.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipPickUp.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -8,12 +7,12 @@ import { mockDeckCalTipRack } from '/app/redux/sessions/__fixtures__'
 import * as Sessions from '/app/redux/sessions'
 import { TipPickUp } from '../TipPickUp'
 
+import type { ComponentProps } from 'react'
+
 describe('TipPickUp', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
-  const render = (
-    props: Partial<React.ComponentProps<typeof TipPickUp>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof TipPickUp>> = {}) => {
     const {
       mount = 'left',
       isMulti = false,
diff --git a/app/src/organisms/Desktop/CalibrationStatusCard/__tests__/CalibrationStatusCard.test.tsx b/app/src/organisms/Desktop/CalibrationStatusCard/__tests__/CalibrationStatusCard.test.tsx
index 400e73b3078..3a3e09c4005 100644
--- a/app/src/organisms/Desktop/CalibrationStatusCard/__tests__/CalibrationStatusCard.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationStatusCard/__tests__/CalibrationStatusCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -18,9 +17,11 @@ import {
   expectedTaskList,
 } from '../../Devices/hooks/__fixtures__/taskListFixtures'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../Devices/hooks')
 
-const render = (props: React.ComponentProps<typeof CalibrationStatusCard>) => {
+const render = (props: ComponentProps<typeof CalibrationStatusCard>) => {
   return renderWithProviders(
     <MemoryRouter>
       <CalibrationStatusCard {...props} />
@@ -38,7 +39,7 @@ describe('CalibrationStatusCard', () => {
     vi.mocked(useCalibrationTaskList).mockReturnValue(expectedTaskList)
   })
 
-  const props: React.ComponentProps<typeof CalibrationStatusCard> = {
+  const props: ComponentProps<typeof CalibrationStatusCard> = {
     robotName: 'otie',
     setShowHowCalibrationWorksModal: mockSetShowHowCalibrationWorksModal,
   }
diff --git a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx
index dbe7c8349a0..bb66e979624 100644
--- a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,8 +7,10 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { CalibrationHealthCheckResults } from '../CalibrationHealthCheckResults'
 
+import type { ComponentProps } from 'react'
+
 const render = (
-  props: React.ComponentProps<typeof CalibrationHealthCheckResults>
+  props: ComponentProps<typeof CalibrationHealthCheckResults>
 ) => {
   return renderWithProviders(<CalibrationHealthCheckResults {...props} />, {
     i18nInstance: i18n,
@@ -17,7 +18,7 @@ const render = (
 }
 
 describe('CalibrationHealthCheckResults', () => {
-  let props: React.ComponentProps<typeof CalibrationHealthCheckResults>
+  let props: ComponentProps<typeof CalibrationHealthCheckResults>
   beforeEach(() => {
     props = {
       isCalibrationRecommended: false,
diff --git a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx
index 70432556944..c4d6bd4e67d 100644
--- a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -7,16 +6,18 @@ import { i18n } from '/app/i18n'
 import { RenderResult } from '../RenderResult'
 import { CalibrationResult } from '../CalibrationResult'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../RenderResult')
 
-const render = (props: React.ComponentProps<typeof CalibrationResult>) => {
+const render = (props: ComponentProps<typeof CalibrationResult>) => {
   return renderWithProviders(<CalibrationResult {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('PipetteCalibrationResult', () => {
-  let props: React.ComponentProps<typeof CalibrationResult>
+  let props: ComponentProps<typeof CalibrationResult>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx
index bae133b6522..3a5fc13d0c1 100644
--- a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -10,6 +9,8 @@ import { LEFT, RIGHT } from '/app/redux/pipettes'
 import * as Fixtures from '/app/redux/sessions/__fixtures__'
 import { RenderMountInformation } from '../RenderMountInformation'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/shared-data', async importOriginal => {
   const actual = await importOriginal<typeof getPipetteModelSpecs>()
   return {
@@ -20,14 +21,14 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
 
 const mockSessionDetails = Fixtures.mockRobotCalibrationCheckSessionDetails
 
-const render = (props: React.ComponentProps<typeof RenderMountInformation>) => {
+const render = (props: ComponentProps<typeof RenderMountInformation>) => {
   return renderWithProviders(<RenderMountInformation {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RenderMountInformation', () => {
-  let props: React.ComponentProps<typeof RenderMountInformation>
+  let props: ComponentProps<typeof RenderMountInformation>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx
index 90ed47fc126..7b60f864218 100644
--- a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -9,14 +8,16 @@ import { i18n } from '/app/i18n'
 
 import { RenderResult } from '../RenderResult'
 
-const render = (props: React.ComponentProps<typeof RenderResult>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof RenderResult>) => {
   return renderWithProviders(<RenderResult {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RenderResult', () => {
-  let props: React.ComponentProps<typeof RenderResult>
+  let props: ComponentProps<typeof RenderResult>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/CheckCalibration/__tests__/CheckCalibration.test.tsx b/app/src/organisms/Desktop/CheckCalibration/__tests__/CheckCalibration.test.tsx
index d5f5a9814d7..853716d3d46 100644
--- a/app/src/organisms/Desktop/CheckCalibration/__tests__/CheckCalibration.test.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/__tests__/CheckCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
@@ -11,6 +10,8 @@ import * as Sessions from '/app/redux/sessions'
 import { mockCalibrationCheckSessionAttributes } from '/app/redux/sessions/__fixtures__'
 
 import { CheckCalibration } from '../index'
+
+import type { ComponentProps, ComponentType } from 'react'
 import type { RobotCalibrationCheckStep } from '/app/redux/sessions/types'
 
 vi.mock('/app/redux/calibration/selectors')
@@ -36,14 +37,14 @@ describe('CheckCalibration', () => {
   }
 
   const render = (
-    props: Partial<React.ComponentProps<typeof CheckCalibration>> = {}
+    props: Partial<ComponentProps<typeof CheckCalibration>> = {}
   ) => {
     const {
       showSpinner = false,
       isJogging = false,
       session = mockCalibrationCheckSession,
     } = props
-    return renderWithProviders<React.ComponentType<typeof CheckCalibration>>(
+    return renderWithProviders<ComponentType<typeof CheckCalibration>>(
       <CheckCalibration
         robotName="robot-name"
         session={session}
diff --git a/app/src/organisms/Desktop/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx b/app/src/organisms/Desktop/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx
index fc6a0f281a9..86440066772 100644
--- a/app/src/organisms/Desktop/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx
+++ b/app/src/organisms/Desktop/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
@@ -19,6 +18,8 @@ import { useTrackCreateProtocolRunEvent } from '/app/organisms/Desktop/Devices/h
 import { useCreateRunFromProtocol } from '/app/organisms/Desktop/ChooseRobotToRunProtocolSlideout/useCreateRunFromProtocol'
 import { ChooseProtocolSlideout } from '../'
 import { useNotifyDataReady } from '/app/resources/useNotifyDataReady'
+
+import type { ComponentProps } from 'react'
 import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'
 
 vi.mock(
@@ -29,7 +30,7 @@ vi.mock('/app/organisms/Desktop/Devices/hooks')
 vi.mock('/app/redux/config')
 vi.mock('/app/resources/useNotifyDataReady')
 
-const render = (props: React.ComponentProps<typeof ChooseProtocolSlideout>) => {
+const render = (props: ComponentProps<typeof ChooseProtocolSlideout>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ChooseProtocolSlideout {...props} />
diff --git a/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx b/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx
index 998c82462bc..33f601165d2 100644
--- a/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx
+++ b/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx
@@ -1,6 +1,4 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
-
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -22,13 +20,15 @@ import {
 import { getNetworkInterfaces } from '/app/redux/networking'
 import { ChooseRobotSlideout } from '..'
 import { useNotifyDataReady } from '/app/resources/useNotifyDataReady'
+
+import type { ComponentProps } from 'react'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux/robot-update')
 vi.mock('/app/redux/networking')
 vi.mock('/app/resources/useNotifyDataReady')
-const render = (props: React.ComponentProps<typeof ChooseRobotSlideout>) => {
+const render = (props: ComponentProps<typeof ChooseRobotSlideout>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ChooseRobotSlideout {...props} />
diff --git a/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/FileCard.test.tsx b/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/FileCard.test.tsx
index 9a151cd1704..9a150141526 100644
--- a/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/FileCard.test.tsx
+++ b/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/FileCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect } from 'vitest'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,6 +6,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { FileCard } from '../FileCard'
 
+import type { ComponentProps } from 'react'
 import type { CsvFileParameter } from '@opentrons/shared-data'
 
 vi.mock('/app/redux/discovery')
@@ -15,7 +15,7 @@ vi.mock('/app/redux/networking')
 vi.mock('/app/resources/useNotifyDataReady')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof FileCard>) => {
+const render = (props: ComponentProps<typeof FileCard>) => {
   return renderWithProviders(
     <MemoryRouter>
       <FileCard {...props} />
diff --git a/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx b/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx
index 3c6416a5290..19e3d39c370 100644
--- a/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx
+++ b/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
@@ -32,6 +31,7 @@ import { ChooseRobotToRunProtocolSlideout } from '../'
 import { useNotifyDataReady } from '/app/resources/useNotifyDataReady'
 import { useCurrentRunId, useCloseCurrentRun } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type { State } from '/app/redux/types'
 
 vi.mock('/app/organisms/Desktop/Devices/hooks')
@@ -49,7 +49,7 @@ vi.mock('/app/resources/useNotifyDataReady')
 vi.mock('/app/resources/runs')
 
 const render = (
-  props: React.ComponentProps<typeof ChooseRobotToRunProtocolSlideout>
+  props: ComponentProps<typeof ChooseRobotToRunProtocolSlideout>
 ) => {
   return renderWithProviders(
     <MemoryRouter>
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/ConfirmPipette.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/ConfirmPipette.tsx
index f756059d003..6f6585cefe4 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/ConfirmPipette.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/ConfirmPipette.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 import {
@@ -13,6 +12,7 @@ import { CheckPipettesButton } from './CheckPipettesButton'
 import { SimpleWizardBody } from '/app/molecules/SimpleWizardBody'
 import { LevelPipette } from './LevelPipette'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type {
   PipetteNameSpecs,
   PipetteModelSpecs,
@@ -36,11 +36,9 @@ export interface ConfirmPipetteProps {
   //  wrongWantedPipette is referring to if the user attaches a pipette that is different
   //  from wantedPipette and they want to use it anyway
   wrongWantedPipette: PipetteNameSpecs | null
-  setWrongWantedPipette: React.Dispatch<
-    React.SetStateAction<PipetteNameSpecs | null>
-  >
+  setWrongWantedPipette: Dispatch<SetStateAction<PipetteNameSpecs | null>>
   confirmPipetteLevel: boolean
-  setConfirmPipetteLevel: React.Dispatch<React.SetStateAction<boolean>>
+  setConfirmPipetteLevel: Dispatch<SetStateAction<boolean>>
   tryAgain: () => void
   exit: () => void
   nextStep: () => void
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/InstructionStep.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/InstructionStep.tsx
index 5b6338be6a5..94d617f2ea4 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/InstructionStep.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/InstructionStep.tsx
@@ -1,14 +1,15 @@
-import type * as React from 'react'
 import { Box, Flex, JUSTIFY_SPACE_EVENLY, SPACING } from '@opentrons/components'
 import type {
   PipetteChannels,
   PipetteDisplayCategory,
 } from '@opentrons/shared-data'
+
+import type { ReactNode } from 'react'
 import type { Mount } from '@opentrons/components'
 import type { Diagram, Direction } from './types'
 
 interface Props {
-  children: React.ReactNode
+  children: ReactNode
   direction: Direction
   mount: Mount
   channels: PipetteChannels
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/PipetteSelection.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/PipetteSelection.tsx
index c306f132154..f998887afbd 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/PipetteSelection.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/PipetteSelection.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   DIRECTION_COLUMN,
@@ -10,7 +9,9 @@ import {
 import { OT3_PIPETTES } from '@opentrons/shared-data'
 import { PipetteSelect } from '/app/molecules/PipetteSelect'
 
-export type PipetteSelectionProps = React.ComponentProps<typeof PipetteSelect>
+import type { ComponentProps } from 'react'
+
+export type PipetteSelectionProps = ComponentProps<typeof PipetteSelect>
 
 export function PipetteSelection(props: PipetteSelectionProps): JSX.Element {
   const { t } = useTranslation('change_pipette')
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ChangePipette.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ChangePipette.test.tsx
index 89112a484d4..6cedab5a47b 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ChangePipette.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ChangePipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -21,6 +20,7 @@ import { ExitModal } from '../ExitModal'
 import { ConfirmPipette } from '../ConfirmPipette'
 import { ChangePipette } from '..'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { PipetteNameSpecs } from '@opentrons/shared-data'
 import type { AttachedPipette } from '/app/redux/pipettes/types'
@@ -54,7 +54,7 @@ vi.mock('../ConfirmPipette')
 vi.mock('/app/resources/instruments')
 vi.mock('/app/assets/images')
 
-const render = (props: React.ComponentProps<typeof ChangePipette>) => {
+const render = (props: ComponentProps<typeof ChangePipette>) => {
   return renderWithProviders(<ChangePipette {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -78,7 +78,7 @@ const mockAttachedPipettes = {
 }
 
 describe('ChangePipette', () => {
-  let props: React.ComponentProps<typeof ChangePipette>
+  let props: ComponentProps<typeof ChangePipette>
   let dispatchApiRequest: DispatchApiRequestType
 
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/CheckPipettesButton.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/CheckPipettesButton.test.tsx
index a5fa3a50bd6..ce6f7f2db25 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/CheckPipettesButton.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/CheckPipettesButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
@@ -8,16 +7,18 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { CheckPipettesButton } from '../CheckPipettesButton'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof CheckPipettesButton>) => {
+const render = (props: ComponentProps<typeof CheckPipettesButton>) => {
   return renderWithProviders(<CheckPipettesButton {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('CheckPipettesButton', () => {
-  let props: React.ComponentProps<typeof CheckPipettesButton>
+  let props: ComponentProps<typeof CheckPipettesButton>
   beforeEach(() => {
     props = {
       robotName: 'otie',
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ClearDeckModal.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ClearDeckModal.test.tsx
index f4af4566141..85ae7a52495 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ClearDeckModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ClearDeckModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
@@ -6,13 +5,15 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ClearDeckModal } from '../ClearDeckModal'
 
-const render = (props: React.ComponentProps<typeof ClearDeckModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ClearDeckModal>) => {
   return renderWithProviders(<ClearDeckModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('ClearDeckModal', () => {
-  let props: React.ComponentProps<typeof ClearDeckModal>
+  let props: ComponentProps<typeof ClearDeckModal>
   beforeEach(() => {
     props = {
       onContinueClick: vi.fn(),
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ConfirmPipette.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ConfirmPipette.test.tsx
index a328df38383..ebb06f3dc91 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ConfirmPipette.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ConfirmPipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -9,6 +8,7 @@ import { mockPipetteInfo } from '/app/redux/pipettes/__fixtures__'
 import { CheckPipettesButton } from '../CheckPipettesButton'
 import { ConfirmPipette } from '../ConfirmPipette'
 
+import type { ComponentProps } from 'react'
 import type {
   PipetteModelSpecs,
   PipetteNameSpecs,
@@ -25,7 +25,7 @@ vi.mock('../LevelPipette', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ConfirmPipette>) => {
+const render = (props: ComponentProps<typeof ConfirmPipette>) => {
   return renderWithProviders(<ConfirmPipette {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -87,7 +87,7 @@ const MOCK_WANTED_PIPETTE = {
 } as PipetteNameSpecs
 
 describe('ConfirmPipette', () => {
-  let props: React.ComponentProps<typeof ConfirmPipette>
+  let props: ComponentProps<typeof ConfirmPipette>
 
   it('Should detach a pipette successfully', () => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ExitModal.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ExitModal.test.tsx
index 29bf417071c..0b4155ebd09 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ExitModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ExitModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
@@ -6,13 +5,15 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ExitModal } from '../ExitModal'
 
-const render = (props: React.ComponentProps<typeof ExitModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ExitModal>) => {
   return renderWithProviders(<ExitModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('ExitModal', () => {
-  let props: React.ComponentProps<typeof ExitModal>
+  let props: ComponentProps<typeof ExitModal>
   beforeEach(() => {
     props = {
       back: vi.fn(),
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/InstructionStep.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/InstructionStep.test.tsx
index 80cdde63972..39e53564b68 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/InstructionStep.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/InstructionStep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,13 +7,15 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { InstructionStep } from '../InstructionStep'
 
-const render = (props: React.ComponentProps<typeof InstructionStep>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InstructionStep>) => {
   return renderWithProviders(<InstructionStep {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('InstructionStep', () => {
-  let props: React.ComponentProps<typeof InstructionStep>
+  let props: ComponentProps<typeof InstructionStep>
   beforeEach(() => {
     props = {
       children: <div>children</div>,
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/Instructions.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/Instructions.test.tsx
index 024be58e798..4f01b748286 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/Instructions.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/Instructions.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -12,9 +11,11 @@ import { mockPipetteInfo } from '/app/redux/pipettes/__fixtures__'
 import { Instructions } from '../Instructions'
 import { CheckPipettesButton } from '../CheckPipettesButton'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../CheckPipettesButton')
 
-const render = (props: React.ComponentProps<typeof Instructions>) => {
+const render = (props: ComponentProps<typeof Instructions>) => {
   return renderWithProviders(<Instructions {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -29,7 +30,7 @@ const MOCK_ACTUAL_PIPETTE = {
 } as PipetteModelSpecs
 
 describe('Instructions', () => {
-  let props: React.ComponentProps<typeof Instructions>
+  let props: ComponentProps<typeof Instructions>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/LevelPipette.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/LevelPipette.test.tsx
index 78c2e9f8d6d..3b74cf10ea1 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/LevelPipette.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/LevelPipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -6,9 +5,11 @@ import { LEFT } from '@opentrons/shared-data'
 import { nestedTextMatcher, renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { LevelPipette } from '../LevelPipette'
+
+import type { ComponentProps } from 'react'
 import type { PipetteNameSpecs } from '@opentrons/shared-data'
 
-const render = (props: React.ComponentProps<typeof LevelPipette>) => {
+const render = (props: ComponentProps<typeof LevelPipette>) => {
   return renderWithProviders(<LevelPipette {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -57,7 +58,7 @@ const MOCK_WANTED_PIPETTE = {
 } as PipetteNameSpecs
 
 describe('LevelPipette', () => {
-  let props: React.ComponentProps<typeof LevelPipette>
+  let props: ComponentProps<typeof LevelPipette>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/PipetteSelection.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/PipetteSelection.test.tsx
index f3619e9930d..9f507dc8a36 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/PipetteSelection.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/PipetteSelection.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -7,15 +6,17 @@ import { i18n } from '/app/i18n'
 import { PipetteSelect } from '/app/molecules/PipetteSelect'
 import { PipetteSelection } from '../PipetteSelection'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/PipetteSelect')
 
-const render = (props: React.ComponentProps<typeof PipetteSelection>) => {
+const render = (props: ComponentProps<typeof PipetteSelection>) => {
   return renderWithProviders(<PipetteSelection {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('PipetteSelection', () => {
-  let props: React.ComponentProps<typeof PipetteSelection>
+  let props: ComponentProps<typeof PipetteSelection>
   beforeEach(() => {
     props = {
       pipetteName: null,
diff --git a/app/src/organisms/Desktop/Devices/ConfigurePipette/ConfigFormGroup.tsx b/app/src/organisms/Desktop/Devices/ConfigurePipette/ConfigFormGroup.tsx
index 9c8a2c25acf..e006efe1c5c 100644
--- a/app/src/organisms/Desktop/Devices/ConfigurePipette/ConfigFormGroup.tsx
+++ b/app/src/organisms/Desktop/Devices/ConfigurePipette/ConfigFormGroup.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Controller } from 'react-hook-form'
 import {
   CheckboxField,
@@ -12,11 +11,12 @@ import {
 } from '@opentrons/components'
 import styles from './styles.module.css'
 
+import type { ReactNode } from 'react'
 import type { Control } from 'react-hook-form'
 import type { DisplayFieldProps, DisplayQuirkFieldProps } from './ConfigForm'
 
 export interface FormColumnProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function FormColumn(props: FormColumnProps): JSX.Element {
@@ -65,7 +65,7 @@ export function ConfigFormGroup(props: ConfigFormGroupProps): JSX.Element {
 export interface ConfigFormRowProps {
   label: string
   labelFor: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const FIELD_ID_PREFIX = '__PipetteConfig__'
diff --git a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx
index 4c2ec08c7d4..7e26987f573 100644
--- a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, expect, describe, beforeEach } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfigFormResetButton } from '../ConfigFormResetButton'
 
-const render = (props: React.ComponentProps<typeof ConfigFormResetButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConfigFormResetButton>) => {
   return renderWithProviders(<ConfigFormResetButton {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ConfigFormResetButton', () => {
-  let props: React.ComponentProps<typeof ConfigFormResetButton>
+  let props: ComponentProps<typeof ConfigFormResetButton>
   beforeEach(() => {
     props = {
       onClick: vi.fn(),
diff --git a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx
index 3dbab681883..73db2ec1596 100644
--- a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, expect, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfigFormSubmitButton } from '../ConfigFormSubmitButton'
 
-const render = (props: React.ComponentProps<typeof ConfigFormSubmitButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConfigFormSubmitButton>) => {
   return renderWithProviders(<ConfigFormSubmitButton {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ConfigFormSubmitButton', () => {
-  let props: React.ComponentProps<typeof ConfigFormSubmitButton>
+  let props: ComponentProps<typeof ConfigFormSubmitButton>
   beforeEach(() => {
     props = {
       disabled: false,
diff --git a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigurePipette.test.tsx b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigurePipette.test.tsx
index 2d7790bdd24..5f810b3b97c 100644
--- a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigurePipette.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigurePipette.test.tsx
@@ -1,6 +1,6 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { vi, it, expect, describe, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
@@ -9,14 +9,14 @@ import { ConfigurePipette } from '../../ConfigurePipette'
 import { mockPipetteSettingsFieldsMap } from '/app/redux/pipettes/__fixtures__'
 import { getConfig } from '/app/redux/config'
 
+import type { ComponentProps } from 'react'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
 import type { State } from '/app/redux/types'
-import { screen } from '@testing-library/react'
 
 vi.mock('/app/redux/robot-api')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof ConfigurePipette>) => {
+const render = (props: ComponentProps<typeof ConfigurePipette>) => {
   return renderWithProviders(<ConfigurePipette {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -26,7 +26,7 @@ const mockRobotName = 'mockRobotName'
 
 describe('ConfigurePipette', () => {
   let dispatchApiRequest: DispatchApiRequestType
-  let props: React.ComponentProps<typeof ConfigurePipette>
+  let props: ComponentProps<typeof ConfigurePipette>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ErrorRecoveryBanner/__tests__/ErrorRecoveryBanner.test.tsx b/app/src/organisms/Desktop/Devices/ErrorRecoveryBanner/__tests__/ErrorRecoveryBanner.test.tsx
index fc234a52629..58a79593fe6 100644
--- a/app/src/organisms/Desktop/Devices/ErrorRecoveryBanner/__tests__/ErrorRecoveryBanner.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ErrorRecoveryBanner/__tests__/ErrorRecoveryBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -6,6 +5,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useErrorRecoveryBanner, ErrorRecoveryBanner } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('..', async importOriginal => {
   const actualReact = await importOriginal<typeof useErrorRecoveryBanner>()
   return {
@@ -14,7 +15,7 @@ vi.mock('..', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ErrorRecoveryBanner>) => {
+const render = (props: ComponentProps<typeof ErrorRecoveryBanner>) => {
   return renderWithProviders(<ErrorRecoveryBanner {...props} />, {
     i18nInstance: i18n,
   })[0]
diff --git a/app/src/organisms/Desktop/Devices/GripperCard/__tests__/AboutGripperSlideout.test.tsx b/app/src/organisms/Desktop/Devices/GripperCard/__tests__/AboutGripperSlideout.test.tsx
index 9ad4381a40c..373ba5256af 100644
--- a/app/src/organisms/Desktop/Devices/GripperCard/__tests__/AboutGripperSlideout.test.tsx
+++ b/app/src/organisms/Desktop/Devices/GripperCard/__tests__/AboutGripperSlideout.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { screen, fireEvent } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { AboutGripperSlideout } from '../AboutGripperSlideout'
 
-const render = (props: React.ComponentProps<typeof AboutGripperSlideout>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof AboutGripperSlideout>) => {
   return renderWithProviders(<AboutGripperSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('AboutGripperSlideout', () => {
-  let props: React.ComponentProps<typeof AboutGripperSlideout>
+  let props: ComponentProps<typeof AboutGripperSlideout>
   beforeEach(() => {
     props = {
       serialNumber: '123',
diff --git a/app/src/organisms/Desktop/Devices/GripperCard/__tests__/GripperCard.test.tsx b/app/src/organisms/Desktop/Devices/GripperCard/__tests__/GripperCard.test.tsx
index ccdbc80c2b3..32538ba2cb5 100644
--- a/app/src/organisms/Desktop/Devices/GripperCard/__tests__/GripperCard.test.tsx
+++ b/app/src/organisms/Desktop/Devices/GripperCard/__tests__/GripperCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -7,20 +6,22 @@ import { i18n } from '/app/i18n'
 import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows'
 import { AboutGripperSlideout } from '../AboutGripperSlideout'
 import { GripperCard } from '../'
+
+import type { ComponentProps } from 'react'
 import type { GripperData } from '@opentrons/api-client'
 
 vi.mock('/app/organisms/GripperWizardFlows')
 vi.mock('../AboutGripperSlideout')
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof GripperCard>) => {
+const render = (props: ComponentProps<typeof GripperCard>) => {
   return renderWithProviders(<GripperCard {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('GripperCard', () => {
-  let props: React.ComponentProps<typeof GripperCard>
+  let props: ComponentProps<typeof GripperCard>
   beforeEach(() => {
     props = {
       attachedGripper: {
diff --git a/app/src/organisms/Desktop/Devices/HistoricalProtocolRunOverflowMenu.tsx b/app/src/organisms/Desktop/Devices/HistoricalProtocolRunOverflowMenu.tsx
index 18dc44cb11b..b696d8285cb 100644
--- a/app/src/organisms/Desktop/Devices/HistoricalProtocolRunOverflowMenu.tsx
+++ b/app/src/organisms/Desktop/Devices/HistoricalProtocolRunOverflowMenu.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { NavLink, useNavigate } from 'react-router-dom'
 
@@ -38,6 +37,7 @@ import { useIsEstopNotDisengaged } from '/app/resources/devices'
 import { useTrackProtocolRunEvent } from '/app/redux-resources/analytics'
 import { useRobot } from '/app/redux-resources/robots'
 
+import type { MouseEventHandler } from 'react'
 import type { Run } from '@opentrons/api-client'
 
 export interface HistoricalProtocolRunOverflowMenuProps {
@@ -99,7 +99,7 @@ export function HistoricalProtocolRunOverflowMenu(
 }
 
 interface MenuDropdownProps extends HistoricalProtocolRunOverflowMenuProps {
-  closeOverflowMenu: React.MouseEventHandler<HTMLButtonElement>
+  closeOverflowMenu: MouseEventHandler<HTMLButtonElement>
   downloadRunLog: () => void
   isRunLogLoading: boolean
 }
@@ -126,7 +126,7 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element {
       `/devices/${robotName}/protocol-runs/${createRunResponse.data.id}/run-preview`
     )
   }
-  const onDownloadClick: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const onDownloadClick: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     downloadRunLog()
@@ -143,9 +143,7 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element {
   const robotSerialNumber =
     robot?.health?.robot_serial ?? robot?.serverHealth?.serialNumber ?? null
 
-  const handleResetClick: React.MouseEventHandler<HTMLButtonElement> = (
-    e
-  ): void => {
+  const handleResetClick: MouseEventHandler<HTMLButtonElement> = (e): void => {
     e.preventDefault()
     e.stopPropagation()
 
@@ -160,7 +158,7 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element {
     trackProtocolRunEvent({ name: ANALYTICS_PROTOCOL_RUN_ACTION.AGAIN })
   }
 
-  const handleDeleteClick: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleDeleteClick: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     deleteRun(runId)
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/AboutPipetteSlideout.test.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/AboutPipetteSlideout.test.tsx
index dd2274a3ab3..c39a0e286fc 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/AboutPipetteSlideout.test.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/AboutPipetteSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -7,16 +6,18 @@ import { i18n } from '/app/i18n'
 import { AboutPipetteSlideout } from '../AboutPipetteSlideout'
 import { mockLeftSpecs } from '/app/redux/pipettes/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof AboutPipetteSlideout>) => {
+const render = (props: ComponentProps<typeof AboutPipetteSlideout>) => {
   return renderWithProviders(<AboutPipetteSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('AboutPipetteSlideout', () => {
-  let props: React.ComponentProps<typeof AboutPipetteSlideout>
+  let props: ComponentProps<typeof AboutPipetteSlideout>
   beforeEach(() => {
     props = {
       pipetteId: '123',
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/FlexPipetteCard.test.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/FlexPipetteCard.test.tsx
index bd753e9f9d3..6bbb7eacbd9 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/FlexPipetteCard.test.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/FlexPipetteCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -11,8 +10,9 @@ import { FlexPipetteCard } from '../FlexPipetteCard'
 import { ChoosePipette } from '/app/organisms/PipetteWizardFlows/ChoosePipette'
 import { useDropTipWizardFlows } from '/app/organisms/DropTipWizardFlows'
 
-import type { PipetteData } from '@opentrons/api-client'
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
+import type { PipetteData } from '@opentrons/api-client'
 
 vi.mock('/app/organisms/PipetteWizardFlows')
 vi.mock('/app/organisms/PipetteWizardFlows/ChoosePipette')
@@ -20,7 +20,7 @@ vi.mock('../AboutPipetteSlideout')
 vi.mock('/app/organisms/DropTipWizardFlows')
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof FlexPipetteCard>) => {
+const render = (props: ComponentProps<typeof FlexPipetteCard>) => {
   return renderWithProviders(<FlexPipetteCard {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -29,7 +29,7 @@ const render = (props: React.ComponentProps<typeof FlexPipetteCard>) => {
 let mockDTWizToggle: Mock
 
 describe('FlexPipetteCard', () => {
-  let props: React.ComponentProps<typeof FlexPipetteCard>
+  let props: ComponentProps<typeof FlexPipetteCard>
   mockDTWizToggle = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteCard.test.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteCard.test.tsx
index e04796bd491..c71ee4ec4b4 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteCard.test.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -15,6 +14,7 @@ import { useDropTipWizardFlows } from '/app/organisms/DropTipWizardFlows'
 
 import { mockLeftSpecs, mockRightSpecs } from '/app/redux/pipettes/__fixtures__'
 
+import type { ComponentProps } from 'react'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
 
 vi.mock('../PipetteOverflowMenu')
@@ -24,7 +24,7 @@ vi.mock('@opentrons/react-api-client')
 vi.mock('/app/redux/pipettes')
 vi.mock('/app/organisms/DropTipWizardFlows')
 
-const render = (props: React.ComponentProps<typeof PipetteCard>) => {
+const render = (props: ComponentProps<typeof PipetteCard>) => {
   return renderWithProviders(<PipetteCard {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -33,7 +33,7 @@ const render = (props: React.ComponentProps<typeof PipetteCard>) => {
 const mockRobotName = 'mockRobotName'
 describe('PipetteCard', () => {
   let dispatchApiRequest: DispatchApiRequestType
-  let props: React.ComponentProps<typeof PipetteCard>
+  let props: ComponentProps<typeof PipetteCard>
 
   beforeEach(() => {
     dispatchApiRequest = vi.fn()
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx
index 155d955b6ea..273d6bdf7b6 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -11,8 +10,9 @@ import {
 } from '/app/redux/pipettes/__fixtures__'
 import { isFlexPipette } from '@opentrons/shared-data'
 
-import type { Mount } from '/app/redux/pipettes/types'
+import type { ComponentProps } from 'react'
 import type * as SharedData from '@opentrons/shared-data'
+import type { Mount } from '/app/redux/pipettes/types'
 
 vi.mock('/app/redux/config')
 vi.mock('@opentrons/shared-data', async importOriginal => {
@@ -23,7 +23,7 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof PipetteOverflowMenu>) => {
+const render = (props: ComponentProps<typeof PipetteOverflowMenu>) => {
   return renderWithProviders(<PipetteOverflowMenu {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -31,7 +31,7 @@ const render = (props: React.ComponentProps<typeof PipetteOverflowMenu>) => {
 
 const LEFT = 'left' as Mount
 describe('PipetteOverflowMenu', () => {
-  let props: React.ComponentProps<typeof PipetteOverflowMenu>
+  let props: ComponentProps<typeof PipetteOverflowMenu>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx
index 37b6f66b863..c75945cd549 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -16,13 +15,12 @@ import {
   mockPipetteSettingsFieldsMap,
 } from '/app/redux/pipettes/__fixtures__'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('@opentrons/react-api-client')
 
-const render = (
-  props: React.ComponentProps<typeof PipetteSettingsSlideout>
-) => {
+const render = (props: ComponentProps<typeof PipetteSettingsSlideout>) => {
   return renderWithProviders(<PipetteSettingsSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -31,7 +29,7 @@ const render = (
 const mockRobotName = 'mockRobotName'
 
 describe('PipetteSettingsSlideout', () => {
-  let props: React.ComponentProps<typeof PipetteSettingsSlideout>
+  let props: ComponentProps<typeof PipetteSettingsSlideout>
   let mockUpdatePipetteSettings: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/BackToTopButton.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/BackToTopButton.tsx
index a8524988bf2..909b49f1548 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/BackToTopButton.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/BackToTopButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { useRobot } from '/app/redux-resources/robots'
@@ -10,8 +9,10 @@ import {
   ANALYTICS_PROTOCOL_PROCEED_TO_RUN,
 } from '/app/redux/analytics'
 
+import type { RefObject } from 'react'
+
 interface BackToTopButtonProps {
-  protocolRunHeaderRef: React.RefObject<HTMLDivElement> | null
+  protocolRunHeaderRef: RefObject<HTMLDivElement> | null
   robotName: string
   runId: string
   sourceLocation: string
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/EmptySetupStep.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/EmptySetupStep.tsx
index 24c2b449083..5d9eb70774e 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/EmptySetupStep.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/EmptySetupStep.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   COLORS,
   DIRECTION_COLUMN,
@@ -10,10 +9,12 @@ import {
   JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface EmptySetupStepProps {
-  title: React.ReactNode
+  title: ReactNode
   description: string
-  rightElement?: React.ReactNode
+  rightElement?: ReactNode
 }
 
 export function EmptySetupStep(props: EmptySetupStepProps): JSX.Element {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/__tests__/ProtocolAnalysisErrorBanner.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/__tests__/ProtocolAnalysisErrorBanner.test.tsx
index 5b60de044d7..fceea1d15c0 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/__tests__/ProtocolAnalysisErrorBanner.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/__tests__/ProtocolAnalysisErrorBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 
@@ -6,16 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ProtocolAnalysisErrorBanner } from '../ProtocolAnalysisErrorBanner'
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolAnalysisErrorBanner>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ProtocolAnalysisErrorBanner>) => {
   return renderWithProviders(<ProtocolAnalysisErrorBanner {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ProtocolAnalysisErrorBanner', () => {
-  let props: React.ComponentProps<typeof ProtocolAnalysisErrorBanner>
+  let props: ComponentProps<typeof ProtocolAnalysisErrorBanner>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/ActionButton/index.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/ActionButton/index.tsx
index 4b8c0f68076..31495064a14 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/ActionButton/index.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/ActionButton/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { RUN_STATUS_STOP_REQUESTED } from '@opentrons/api-client'
 import {
   ALIGN_CENTER,
@@ -28,12 +26,13 @@ import { useActionBtnDisabledUtils, useActionButtonProperties } from './hooks'
 import { getFallbackRobotSerialNumber, isRunAgainStatus } from '../../utils'
 import { useIsRobotOnWrongVersionOfSoftware } from '/app/redux/robot-update'
 
+import type { MutableRefObject } from 'react'
 import type { RunHeaderContentProps } from '..'
 
 export type BaseActionButtonProps = RunHeaderContentProps
 
 interface ActionButtonProps extends BaseActionButtonProps {
-  isResetRunLoadingRef: React.MutableRefObject<boolean>
+  isResetRunLoadingRef: MutableRefObject<boolean>
 }
 
 export function ActionButton(props: ActionButtonProps): JSX.Element {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/LabeledValue.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/LabeledValue.tsx
index 135dd72bbae..183f6194a3f 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/LabeledValue.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/LabeledValue.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   DIRECTION_COLUMN,
   COLORS,
@@ -8,9 +6,11 @@ import {
   StyledText,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface LabeledValueProps {
   label: string
-  value: React.ReactNode
+  value: ReactNode
 }
 
 export function LabeledValue(props: LabeledValueProps): JSX.Element {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/index.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/index.tsx
index 51908e4435d..7d653c6f439 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/index.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/index.tsx
@@ -1,16 +1,15 @@
-import type * as React from 'react'
-
 import { RunHeaderSectionUpper } from './RunHeaderSectionUpper'
 import { RunHeaderSectionLower } from './RunHeaderSectionLower'
 
-import type { ProtocolRunHeaderProps } from '..'
+import type { MutableRefObject } from 'react'
 import type { AttachedModule, RunStatus } from '@opentrons/api-client'
+import type { ProtocolRunHeaderProps } from '..'
 import type { RunControls } from '/app/organisms/RunTimeControl'
 import type { UseRunHeaderModalContainerResult } from '../RunHeaderModalContainer'
 
 export type RunHeaderContentProps = ProtocolRunHeaderProps & {
   runStatus: RunStatus | null
-  isResetRunLoadingRef: React.MutableRefObject<boolean>
+  isResetRunLoadingRef: MutableRefObject<boolean>
   attachedModules: AttachedModule[]
   protocolRunControls: RunControls
   runHeaderModalContainerUtils: UseRunHeaderModalContainerResult
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerIsRunningModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerIsRunningModal.test.tsx
index 03b59af1b57..5960c2a39fa 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerIsRunningModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerIsRunningModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 
@@ -12,6 +11,7 @@ import { HeaterShakerModuleCard } from '../HeaterShakerModuleCard'
 import { useAttachedModules } from '/app/resources/modules'
 import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type * as ReactApiClient from '@opentrons/react-api-client'
 
 vi.mock('@opentrons/react-api-client', async importOriginal => {
@@ -69,16 +69,14 @@ const mockMovingHeaterShakerTwo = {
   usbPort: { path: '/dev/ot_module_heatershaker0', port: 1 },
 } as any
 
-const render = (
-  props: React.ComponentProps<typeof HeaterShakerIsRunningModal>
-) => {
+const render = (props: ComponentProps<typeof HeaterShakerIsRunningModal>) => {
   return renderWithProviders(<HeaterShakerIsRunningModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HeaterShakerIsRunningModal', () => {
-  let props: React.ComponentProps<typeof HeaterShakerIsRunningModal>
+  let props: ComponentProps<typeof HeaterShakerIsRunningModal>
   let mockCreateLiveCommand = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerModuleCard.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerModuleCard.test.tsx
index 4cd20822890..8e98d4778fa 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerModuleCard.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerModuleCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { HeaterShakerModuleCard } from '../HeaterShakerModuleCard'
 import { HeaterShakerModuleData } from '/app/organisms/ModuleCard/HeaterShakerModuleData'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/organisms/ModuleCard/HeaterShakerModuleData')
 
-const render = (props: React.ComponentProps<typeof HeaterShakerModuleCard>) => {
+const render = (props: ComponentProps<typeof HeaterShakerModuleCard>) => {
   return renderWithProviders(<HeaterShakerModuleCard {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HeaterShakerModuleCard', () => {
-  let props: React.ComponentProps<typeof HeaterShakerModuleCard>
+  let props: ComponentProps<typeof HeaterShakerModuleCard>
   beforeEach(() => {
     props = {
       module: mockHeaterShaker,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx
index c5028c6a821..8c9c83fcaf9 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { createStore } from 'redux'
@@ -10,6 +9,7 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { useHeaterShakerModuleIdsFromRun } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -57,7 +57,7 @@ describe('useHeaterShakerModuleIdsFromRun', () => {
         },
       ],
     } as any)
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(
@@ -127,7 +127,7 @@ describe('useHeaterShakerModuleIdsFromRun', () => {
       ],
     } as any)
 
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ConfirmCancelModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ConfirmCancelModal.test.tsx
index c6421040e17..08559f181be 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ConfirmCancelModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ConfirmCancelModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
@@ -17,6 +16,7 @@ import { useIsFlex } from '/app/redux-resources/robots'
 import { useTrackEvent } from '/app/redux/analytics'
 import { ConfirmCancelModal } from '../ConfirmCancelModal'
 
+import type { ComponentProps } from 'react'
 import type * as ApiClient from '@opentrons/react-api-client'
 
 vi.mock('@opentrons/react-api-client', async importOriginal => {
@@ -30,7 +30,7 @@ vi.mock('/app/redux/analytics')
 vi.mock('/app/redux-resources/analytics')
 vi.mock('/app/redux-resources/robots')
 
-const render = (props: React.ComponentProps<typeof ConfirmCancelModal>) => {
+const render = (props: ComponentProps<typeof ConfirmCancelModal>) => {
   return renderWithProviders(<ConfirmCancelModal {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -43,7 +43,7 @@ let mockTrackProtocolRunEvent: any
 const ROBOT_NAME = 'otie'
 
 describe('ConfirmCancelModal', () => {
-  let props: React.ComponentProps<typeof ConfirmCancelModal>
+  let props: ComponentProps<typeof ConfirmCancelModal>
   beforeEach(() => {
     mockTrackEvent = vi.fn()
     mockStopRun = vi.fn((_runId, opts) => opts.onSuccess())
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolAnalysisErrorModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolAnalysisErrorModal.test.tsx
index 44fcb0278ad..027f6b76b03 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolAnalysisErrorModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolAnalysisErrorModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 
@@ -6,16 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ProtocolAnalysisErrorModal } from '../ProtocolAnalysisErrorModal'
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolAnalysisErrorModal>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ProtocolAnalysisErrorModal>) => {
   return renderWithProviders(<ProtocolAnalysisErrorModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ProtocolAnalysisErrorModal', () => {
-  let props: React.ComponentProps<typeof ProtocolAnalysisErrorModal>
+  let props: ComponentProps<typeof ProtocolAnalysisErrorModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolDropTipModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolDropTipModal.test.tsx
index 0d95071a969..4e583be0648 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolDropTipModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolDropTipModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { renderHook, act, screen, fireEvent } from '@testing-library/react'
 
@@ -10,6 +9,7 @@ import {
   ProtocolDropTipModal,
 } from '../ProtocolDropTipModal'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/local-resources/instruments')
@@ -104,14 +104,14 @@ describe('useProtocolDropTipModal', () => {
   })
 })
 
-const render = (props: React.ComponentProps<typeof ProtocolDropTipModal>) => {
+const render = (props: ComponentProps<typeof ProtocolDropTipModal>) => {
   return renderWithProviders(<ProtocolDropTipModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ProtocolDropTipModal', () => {
-  let props: React.ComponentProps<typeof ProtocolDropTipModal>
+  let props: ComponentProps<typeof ProtocolDropTipModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/RunFailedModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/RunFailedModal.test.tsx
index d49875a0859..75ea8c0c720 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/RunFailedModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/RunFailedModal.test.tsx
@@ -1,5 +1,5 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect, afterEach } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
@@ -7,8 +7,9 @@ import { useDownloadRunLog } from '../../../../../hooks'
 import { RunFailedModal } from '../RunFailedModal'
 
 import { RUN_STATUS_FAILED } from '@opentrons/api-client'
+
+import type { ComponentProps } from 'react'
 import type { RunError } from '@opentrons/api-client'
-import { fireEvent, screen } from '@testing-library/react'
 
 vi.mock('../../../../../hooks')
 
@@ -25,14 +26,14 @@ const mockError: RunError = {
   wrappedErrors: [],
 }
 
-const render = (props: React.ComponentProps<typeof RunFailedModal>) => {
+const render = (props: ComponentProps<typeof RunFailedModal>) => {
   return renderWithProviders(<RunFailedModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('RunFailedModal - DesktopApp', () => {
-  let props: React.ComponentProps<typeof RunFailedModal>
+  let props: ComponentProps<typeof RunFailedModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/__tests__/ProtocolRunHeader.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/__tests__/ProtocolRunHeader.test.tsx
index e82d58cb75e..f6c88119707 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/__tests__/ProtocolRunHeader.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/__tests__/ProtocolRunHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { useNavigate } from 'react-router-dom'
@@ -26,6 +25,8 @@ import {
   useRunHeaderRunControls,
 } from '../hooks'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('react-router-dom')
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/redux-resources/robots')
@@ -43,7 +44,7 @@ const MOCK_RUN_ID = 'MOCK_RUN_ID'
 const MOCK_ROBOT = 'MOCK_ROBOT'
 
 describe('ProtocolRunHeader', () => {
-  let props: React.ComponentProps<typeof ProtocolRunHeader>
+  let props: ComponentProps<typeof ProtocolRunHeader>
   const mockNavigate = vi.fn()
 
   beforeEach(() => {
@@ -92,7 +93,7 @@ describe('ProtocolRunHeader', () => {
     vi.resetAllMocks()
   })
 
-  const render = (props: React.ComponentProps<typeof ProtocolRunHeader>) => {
+  const render = (props: ComponentProps<typeof ProtocolRunHeader>) => {
     return renderWithProviders(<ProtocolRunHeader {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx
index eabef743182..89622cd7e5e 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { MemoryRouter } from 'react-router-dom'
@@ -21,6 +20,8 @@ import { getLocationInfoNames } from '/app/transformations/commands'
 import { mockLabwareDef } from '/app/organisms/LegacyLabwarePositionCheck/__fixtures__/mockLabwareDef'
 import { SecureLabwareModal } from '../SecureLabwareModal'
 import { LabwareListItem } from '../LabwareListItem'
+
+import type { ComponentProps } from 'react'
 import type {
   LoadLabwareRunTimeCommand,
   ModuleModel,
@@ -78,7 +79,7 @@ const mockThermocyclerModuleDefinition = {
 const mockModuleId = 'moduleId'
 const mockNickName = 'nickName'
 
-const render = (props: React.ComponentProps<typeof LabwareListItem>) => {
+const render = (props: ComponentProps<typeof LabwareListItem>) => {
   return renderWithProviders(
     <MemoryRouter>
       <LabwareListItem {...props} />
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx
index 0204958f0f0..b543c3f27c8 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
@@ -9,9 +8,11 @@ import { mockLabwareDef } from '/app/organisms/LegacyLabwarePositionCheck/__fixt
 import { LabwareListItem } from '../LabwareListItem'
 import { OffDeckLabwareList } from '../OffDeckLabwareList'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../LabwareListItem')
 
-const render = (props: React.ComponentProps<typeof OffDeckLabwareList>) => {
+const render = (props: ComponentProps<typeof OffDeckLabwareList>) => {
   return renderWithProviders(
     <MemoryRouter>
       <OffDeckLabwareList {...props} />
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx
index 80147006dc1..f367e007375 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -6,7 +5,9 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SecureLabwareModal } from '../SecureLabwareModal'
 
-const render = (props: React.ComponentProps<typeof SecureLabwareModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof SecureLabwareModal>) => {
   return renderWithProviders(<SecureLabwareModal {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -15,7 +16,7 @@ const mockTypeMagDeck = 'magneticModuleType'
 const mockTypeTC = 'thermocyclerModuleType'
 
 describe('SecureLabwareModal', () => {
-  let props: React.ComponentProps<typeof SecureLabwareModal>
+  let props: ComponentProps<typeof SecureLabwareModal>
   beforeEach(() => {
     props = { type: mockTypeMagDeck, onCloseClick: vi.fn() }
   })
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareList.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareList.test.tsx
index 85068d39a1b..9f9860de1d4 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -9,13 +8,15 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SetupLabwareList } from '../SetupLabwareList'
 import { LabwareListItem } from '../LabwareListItem'
+
+import type { ComponentProps } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 
 vi.mock('../LabwareListItem')
 
 const protocolWithTC = (multiple_tipacks_with_tc as unknown) as CompletedProtocolAnalysis
 
-const render = (props: React.ComponentProps<typeof SetupLabwareList>) => {
+const render = (props: ComponentProps<typeof SetupLabwareList>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SetupLabwareList {...props} />
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareMap.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareMap.test.tsx
index 40f63cbc170..57a84b1f737 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareMap.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareMap.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -20,6 +19,7 @@ import {
 } from '/app/transformations/analysis'
 import { SetupLabwareMap } from '../SetupLabwareMap'
 
+import type { ComponentProps } from 'react'
 import type {
   CompletedProtocolAnalysis,
   LabwareDefinition2,
@@ -86,7 +86,7 @@ const mockTCModule = {
   type: 'thermocyclerModuleType' as ModuleType,
 }
 
-const render = (props: React.ComponentProps<typeof SetupLabwareMap>) => {
+const render = (props: ComponentProps<typeof SetupLabwareMap>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SetupLabwareMap {...props} />
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/CurrentOffsetsTable.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/CurrentOffsetsTable.test.tsx
index 334d5328cec..db2e5a8b5a1 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/CurrentOffsetsTable.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/CurrentOffsetsTable.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -15,6 +14,7 @@ import { useLPCDisabledReason } from '/app/resources/runs'
 import { getLatestCurrentOffsets } from '/app/transformations/runs'
 import { CurrentOffsetsTable } from '../CurrentOffsetsTable'
 
+import type { ComponentProps } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 import type { LabwareOffset } from '@opentrons/api-client'
 
@@ -31,7 +31,7 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof CurrentOffsetsTable>) => {
+const render = (props: ComponentProps<typeof CurrentOffsetsTable>) => {
   return renderWithProviders(<CurrentOffsetsTable {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -64,7 +64,7 @@ const mockCurrentOffsets: LabwareOffset[] = [
 ]
 
 describe('CurrentOffsetsTable', () => {
-  let props: React.ComponentProps<typeof CurrentOffsetsTable>
+  let props: ComponentProps<typeof CurrentOffsetsTable>
   beforeEach(() => {
     props = {
       currentOffsets: mockCurrentOffsets,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/HowLPCWorksModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/HowLPCWorksModal.test.tsx
index 5dd3d15db69..a12b6948d75 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/HowLPCWorksModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/HowLPCWorksModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { HowLPCWorksModal } from '../HowLPCWorksModal'
 
-const render = (props: React.ComponentProps<typeof HowLPCWorksModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof HowLPCWorksModal>) => {
   return renderWithProviders(<HowLPCWorksModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HowLPCWorksModal', () => {
-  let props: React.ComponentProps<typeof HowLPCWorksModal>
+  let props: ComponentProps<typeof HowLPCWorksModal>
   beforeEach(() => {
     props = { onCloseClick: vi.fn() }
   })
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquids.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquids.test.tsx
index 736d5f5bc85..8436072e2f1 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquids.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquids.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 
@@ -11,6 +10,8 @@ import { SetupLiquidsList } from '../SetupLiquidsList'
 import { SetupLiquidsMap } from '../SetupLiquidsMap'
 import { useRunHasStarted } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/components', async () => {
   const actual = await vi.importActual('@opentrons/components')
   return {
@@ -24,7 +25,7 @@ vi.mock('/app/resources/runs')
 
 describe('SetupLiquids', () => {
   const render = (
-    props: React.ComponentProps<typeof SetupLiquids> & {
+    props: ComponentProps<typeof SetupLiquids> & {
       startConfirmed?: boolean
     }
   ) => {
@@ -47,7 +48,7 @@ describe('SetupLiquids', () => {
     )
   }
 
-  let props: React.ComponentProps<typeof SetupLiquids>
+  let props: ComponentProps<typeof SetupLiquids>
   beforeEach(() => {
     vi.mocked(SetupLiquidsList).mockReturnValue(
       <div>Mock setup liquids list</div>
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx
index 60cb6a759a0..2d96d408044 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
@@ -25,6 +24,7 @@ import {
 import { LiquidsLabwareDetailsModal } from '/app/organisms/LiquidsLabwareDetailsModal'
 import { useNotifyRunQuery } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 import type * as SharedData from '@opentrons/shared-data'
 
@@ -70,7 +70,7 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
 vi.mock('/app/redux/analytics')
 vi.mock('/app/resources/runs')
 
-const render = (props: React.ComponentProps<typeof SetupLiquidsList>) => {
+const render = (props: ComponentProps<typeof SetupLiquidsList>) => {
   return renderWithProviders(<SetupLiquidsList {...props} />, {
     i18nInstance: i18n,
   })
@@ -78,7 +78,7 @@ const render = (props: React.ComponentProps<typeof SetupLiquidsList>) => {
 let mockTrackEvent: Mock
 
 describe('SetupLiquidsList', () => {
-  let props: React.ComponentProps<typeof SetupLiquidsList>
+  let props: ComponentProps<typeof SetupLiquidsList>
   beforeEach(() => {
     props = { runId: '123', robotName: 'test_flex' }
     vi.mocked(getTotalVolumePerLiquidId).mockReturnValue(400)
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsMap.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsMap.test.tsx
index 023e73af09c..97e96232b7e 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsMap.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsMap.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -35,6 +34,7 @@ import { mockFetchModulesSuccessActionPayloadModules } from '/app/redux/modules/
 
 import { SetupLiquidsMap } from '../SetupLiquidsMap'
 
+import type { ComponentProps } from 'react'
 import type {
   ModuleModel,
   ModuleType,
@@ -102,7 +102,7 @@ const mockMagneticModule = {
   quirks: [],
 }
 
-const render = (props: React.ComponentProps<typeof SetupLiquidsMap>) => {
+const render = (props: ComponentProps<typeof SetupLiquidsMap>) => {
   return renderWithProviders(<SetupLiquidsMap {...props} />, {
     i18nInstance: i18n,
   })
@@ -113,7 +113,7 @@ const mockProtocolAnalysis = {
 } as any
 
 describe('SetupLiquidsMap', () => {
-  let props: React.ComponentProps<typeof SetupLiquidsMap>
+  let props: ComponentProps<typeof SetupLiquidsMap>
   beforeEach(() => {
     props = {
       runId: RUN_ID,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx
index 9f371faaa64..fc2b584cf22 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -9,20 +8,21 @@ import { i18n } from '/app/i18n'
 import { NotConfiguredModal } from '../NotConfiguredModal'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { DeckConfiguration } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/deck_configuration')
 
-const render = (props: React.ComponentProps<typeof NotConfiguredModal>) => {
+const render = (props: ComponentProps<typeof NotConfiguredModal>) => {
   return renderWithProviders(<NotConfiguredModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('NotConfiguredModal', () => {
-  let props: React.ComponentProps<typeof NotConfiguredModal>
+  let props: ComponentProps<typeof NotConfiguredModal>
   const mockUpdate = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx
index dd0236ac96d..61708168788 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -16,6 +15,7 @@ import { NotConfiguredModal } from '../NotConfiguredModal'
 import { LocationConflictModal } from '/app/organisms/LocationConflictModal'
 import { DeckFixtureSetupInstructionsModal } from '/app/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal'
 
+import type { ComponentProps } from 'react'
 import type { CutoutConfigAndCompatibility } from '/app/resources/deck_configuration/hooks'
 
 vi.mock('/app/resources/deck_configuration/hooks')
@@ -61,14 +61,14 @@ const mockConflictDeckConfigCompatibility: CutoutConfigAndCompatibility[] = [
   },
 ]
 
-const render = (props: React.ComponentProps<typeof SetupFixtureList>) => {
+const render = (props: ComponentProps<typeof SetupFixtureList>) => {
   return renderWithProviders(<SetupFixtureList {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SetupFixtureList', () => {
-  let props: React.ComponentProps<typeof SetupFixtureList>
+  let props: ComponentProps<typeof SetupFixtureList>
   beforeEach(() => {
     props = {
       deckConfigCompatibility: mockDeckConfigCompatibility,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx
index 21926d3c823..615bb5a487d 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -20,6 +19,8 @@ import { SetupModulesList } from '../SetupModulesList'
 import { SetupModulesMap } from '../SetupModulesMap'
 import { SetupFixtureList } from '../SetupFixtureList'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux-resources/robots')
 vi.mock('../SetupModulesList')
 vi.mock('../SetupModulesMap')
@@ -31,14 +32,14 @@ vi.mock('/app/resources/runs')
 const MOCK_ROBOT_NAME = 'otie'
 const MOCK_RUN_ID = '1'
 
-const render = (props: React.ComponentProps<typeof SetupModuleAndDeck>) => {
+const render = (props: ComponentProps<typeof SetupModuleAndDeck>) => {
   return renderWithProviders(<SetupModuleAndDeck {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('SetupModuleAndDeck', () => {
-  let props: React.ComponentProps<typeof SetupModuleAndDeck>
+  let props: ComponentProps<typeof SetupModuleAndDeck>
   beforeEach(() => {
     props = {
       robotName: MOCK_ROBOT_NAME,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx
index e62d600cea6..95c95fced5a 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
@@ -27,6 +26,7 @@ import { UnMatchedModuleWarning } from '../UnMatchedModuleWarning'
 import { SetupModulesList } from '../SetupModulesList'
 import { LocationConflictModal } from '/app/organisms/LocationConflictModal'
 
+import type { ComponentProps } from 'react'
 import type { ModuleModel, ModuleType } from '@opentrons/shared-data'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 
@@ -77,14 +77,14 @@ const mockCalibratedData = {
   last_modified: '2023-06-01T14:42:20.131798+00:00',
 }
 
-const render = (props: React.ComponentProps<typeof SetupModulesList>) => {
+const render = (props: ComponentProps<typeof SetupModulesList>) => {
   return renderWithProviders(<SetupModulesList {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('SetupModulesList', () => {
-  let props: React.ComponentProps<typeof SetupModulesList>
+  let props: ComponentProps<typeof SetupModulesList>
   let mockChainLiveCommands = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx
index 9d9449283dc..c7619b44f9b 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx
@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -18,6 +16,8 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { ModuleInfo } from '/app/molecules/ModuleInfo'
 import { SetupModulesMap } from '../SetupModulesMap'
 import { getAttachedProtocolModuleMatches } from '/app/transformations/analysis'
+
+import type { ComponentProps } from 'react'
 import type {
   CompletedProtocolAnalysis,
   ModuleModel,
@@ -47,7 +47,7 @@ vi.mock('/app/transformations/analysis')
 vi.mock('/app/molecules/ModuleInfo')
 vi.mock('/app/resources/modules')
 
-const render = (props: React.ComponentProps<typeof SetupModulesMap>) => {
+const render = (props: ComponentProps<typeof SetupModulesMap>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SetupModulesMap {...props} />
@@ -98,7 +98,7 @@ const mockTCModule = {
 }
 
 describe('SetupModulesMap', () => {
-  let props: React.ComponentProps<typeof SetupModulesMap>
+  let props: ComponentProps<typeof SetupModulesMap>
   beforeEach(() => {
     props = {
       runId: MOCK_RUN_ID,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupStep.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupStep.tsx
index 25f2baf1d64..2d5fedf7700 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupStep.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupStep.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import {
@@ -18,19 +17,21 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface SetupStepProps {
   /** whether or not to show the full contents of the step */
   expanded: boolean
   /** always shown text name of the step */
-  title: React.ReactNode
+  title: ReactNode
   /** always shown text that provides a one sentence explanation of the contents */
   description: string
   /** callback that should toggle the expanded state (managed by parent) */
   toggleExpanded: () => void
   /** contents to be shown only when expanded */
-  children: React.ReactNode
+  children: ReactNode
   /** element to be shown (right aligned) regardless of expanded state */
-  rightElement: React.ReactNode
+  rightElement: ReactNode
 }
 
 const EXPANDED_STYLE = css`
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/EmptySetupStep.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/EmptySetupStep.test.tsx
index 673d8b4806c..b716de57f06 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/EmptySetupStep.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/EmptySetupStep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { EmptySetupStep } from '../EmptySetupStep'
 
-const render = (props: React.ComponentProps<typeof EmptySetupStep>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof EmptySetupStep>) => {
   return renderWithProviders(<EmptySetupStep {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EmptySetupStep', () => {
-  let props: React.ComponentProps<typeof EmptySetupStep>
+  let props: ComponentProps<typeof EmptySetupStep>
   beforeEach(() => {
     props = {
       title: 'mockTitle',
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx
index 0198aa9e448..a47f37e1136 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -13,6 +12,8 @@ import { getLabwareLocation } from '/app/transformations/commands'
 import { LabwareInfoOverlay } from '../LabwareInfoOverlay'
 import { getLabwareDefinitionUri } from '/app/transformations/protocols'
 import { useLabwareOffsetForLabware } from '../useLabwareOffsetForLabware'
+
+import type { ComponentProps } from 'react'
 import type {
   LabwareDefinition2,
   ProtocolFile,
@@ -33,7 +34,7 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof LabwareInfoOverlay>) => {
+const render = (props: ComponentProps<typeof LabwareInfoOverlay>) => {
   return renderWithProviders(
     <svg>
       <LabwareInfoOverlay {...props} />
@@ -51,7 +52,7 @@ const MOCK_LABWARE_VECTOR = { x: 1, y: 2, z: 3 }
 const MOCK_RUN_ID = 'fake_run_id'
 
 describe('LabwareInfoOverlay', () => {
-  let props: React.ComponentProps<typeof LabwareInfoOverlay>
+  let props: ComponentProps<typeof LabwareInfoOverlay>
   let labware: LoadedLabware[]
   let labwareDefinitions: ProtocolFile<{}>['labwareDefinitions']
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunModuleControls.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunModuleControls.test.tsx
index 5dd1507f893..1895c2e4eca 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunModuleControls.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunModuleControls.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -15,6 +14,8 @@ import {
   mockThermocycler,
   mockHeaterShaker,
 } from '/app/redux/modules/__fixtures__'
+
+import type { ComponentProps } from 'react'
 import type { ModuleModel, ModuleType } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/react-api-client')
@@ -49,9 +50,7 @@ const mockTCModule = {
 }
 const MOCK_TC_COORDS = [20, 30, 0]
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolRunModuleControls>
-) => {
+const render = (props: ComponentProps<typeof ProtocolRunModuleControls>) => {
   return renderWithProviders(<ProtocolRunModuleControls {...props} />, {
     i18nInstance: i18n,
   })[0]
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx
index 59425f6ff6b..99922644961 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -16,6 +15,7 @@ import {
 } from '/app/resources/runs/__fixtures__'
 import { ProtocolRunRuntimeParameters } from '../ProtocolRunRunTimeParameters'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { Run } from '@opentrons/api-client'
 import type {
@@ -100,16 +100,14 @@ const mockCsvRtp = {
   },
 }
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolRunRuntimeParameters>
-) => {
+const render = (props: ComponentProps<typeof ProtocolRunRuntimeParameters>) => {
   return renderWithProviders(<ProtocolRunRuntimeParameters {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ProtocolRunRuntimeParameters', () => {
-  let props: React.ComponentProps<typeof ProtocolRunRuntimeParameters>
+  let props: ComponentProps<typeof ProtocolRunRuntimeParameters>
   beforeEach(() => {
     props = {
       runId: RUN_ID,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupCalibrationItem.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupCalibrationItem.test.tsx
index e39e5d7c83c..9002eb0da0d 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupCalibrationItem.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupCalibrationItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, afterEach } from 'vitest'
@@ -9,6 +8,8 @@ import { useRunHasStarted } from '/app/resources/runs'
 import { formatTimestamp } from '/app/transformations/runs'
 import { SetupCalibrationItem } from '../SetupCalibrationItem'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/runs')
 vi.mock('/app/transformations/runs')
 
@@ -21,7 +22,7 @@ describe('SetupCalibrationItem', () => {
     title = 'stub title',
     button = <button>stub button</button>,
     runId = RUN_ID,
-  }: Partial<React.ComponentProps<typeof SetupCalibrationItem>> = {}) => {
+  }: Partial<ComponentProps<typeof SetupCalibrationItem>> = {}) => {
     return renderWithProviders(
       <SetupCalibrationItem
         {...{ subText, calibratedDate, title, button, runId }}
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx
index 0719c0c13b6..1a2f9e16959 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach } from 'vitest'
@@ -11,6 +10,8 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { PipetteWizardFlows } from '/app/organisms/PipetteWizardFlows'
 import { SetupFlexPipetteCalibrationItem } from '../SetupFlexPipetteCalibrationItem'
 import { modifiedSimpleV6Protocol as _uncastedModifiedSimpleV6Protocol } from '/app/resources/runs/__fixtures__'
+
+import type { ComponentProps } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/react-api-client')
@@ -33,9 +34,7 @@ describe('SetupFlexPipetteCalibrationItem', () => {
   const render = ({
     mount = 'left',
     runId = RUN_ID,
-  }: Partial<
-    React.ComponentProps<typeof SetupFlexPipetteCalibrationItem>
-  > = {}) => {
+  }: Partial<ComponentProps<typeof SetupFlexPipetteCalibrationItem>> = {}) => {
     return renderWithProviders(
       <MemoryRouter>
         <SetupFlexPipetteCalibrationItem
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupPipetteCalibrationItem.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupPipetteCalibrationItem.test.tsx
index effcb32b60f..14528465289 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupPipetteCalibrationItem.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupPipetteCalibrationItem.test.tsx
@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
@@ -9,7 +9,8 @@ import { mockDeckCalData } from '/app/redux/calibration/__fixtures__'
 import { mockPipetteInfo } from '/app/redux/pipettes/__fixtures__'
 import { useDeckCalibrationData } from '../../hooks'
 import { SetupPipetteCalibrationItem } from '../SetupPipetteCalibrationItem'
-import { MemoryRouter } from 'react-router-dom'
+
+import type { ComponentProps } from 'react'
 
 vi.mock('../../hooks')
 vi.mock('/app/redux-resources/robots')
@@ -23,9 +24,7 @@ describe('SetupPipetteCalibrationItem', () => {
     mount = 'left',
     robotName = ROBOT_NAME,
     runId = RUN_ID,
-  }: Partial<
-    React.ComponentProps<typeof SetupPipetteCalibrationItem>
-  > = {}) => {
+  }: Partial<ComponentProps<typeof SetupPipetteCalibrationItem>> = {}) => {
     return renderWithProviders(
       <MemoryRouter>
         <SetupPipetteCalibrationItem
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupRobotCalibration.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupRobotCalibration.test.tsx
index 8d737f26452..0f8ec67e8dd 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupRobotCalibration.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupRobotCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -19,6 +18,8 @@ import { SetupInstrumentCalibration } from '../SetupInstrumentCalibration'
 import { SetupTipLengthCalibration } from '../SetupTipLengthCalibration'
 import { SetupRobotCalibration } from '../SetupRobotCalibration'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/analytics')
 vi.mock('../../hooks')
 vi.mock('/app/resources/runs')
@@ -40,7 +41,7 @@ describe('SetupRobotCalibration', () => {
     nextStep = 'module_setup_step',
     calibrationStatus = { complete: true },
     expandStep = mockExpandStep,
-  }: Partial<React.ComponentProps<typeof SetupRobotCalibration>> = {}) => {
+  }: Partial<ComponentProps<typeof SetupRobotCalibration>> = {}) => {
     return renderWithProviders(
       <SetupRobotCalibration
         {...{
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupStep.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupStep.test.tsx
index 705866c51b2..4772a33f2bc 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupStep.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupStep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SetupStep } from '../SetupStep'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 describe('SetupStep', () => {
@@ -16,7 +16,7 @@ describe('SetupStep', () => {
     toggleExpanded = toggleExpandedMock,
     children = <button>stub children</button>,
     rightElement = <div>right element</div>,
-  }: Partial<React.ComponentProps<typeof SetupStep>> = {}) => {
+  }: Partial<ComponentProps<typeof SetupStep>> = {}) => {
     return renderWithProviders(
       <SetupStep
         {...{
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx
index 4dac2e3c8d5..c32efdf6565 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { screen, fireEvent } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -15,6 +14,7 @@ import { useRunHasStarted } from '/app/resources/runs'
 import { useDashboardCalibrateTipLength } from '/app/pages/Desktop/Devices/CalibrationDashboard/hooks/useDashboardCalibrateTipLength'
 import { SetupTipLengthCalibrationButton } from '../SetupTipLengthCalibrationButton'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/components/src/hooks')
@@ -39,9 +39,7 @@ describe('SetupTipLengthCalibrationButton', () => {
     hasCalibrated = false,
     tipRackDefinition = fixtureTiprack300ul as LabwareDefinition2,
     isExtendedPipOffset = false,
-  }: Partial<
-    React.ComponentProps<typeof SetupTipLengthCalibrationButton>
-  > = {}) => {
+  }: Partial<ComponentProps<typeof SetupTipLengthCalibrationButton>> = {}) => {
     return renderWithProviders(
       <SetupTipLengthCalibrationButton
         {...{
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/DeviceResetModal.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/DeviceResetModal.test.tsx
index a5a3a91d219..78e5427bfd5 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/DeviceResetModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/DeviceResetModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
@@ -9,6 +8,7 @@ import { resetConfig } from '/app/redux/robot-admin'
 import { useDispatchApiRequest } from '/app/redux/robot-api'
 import { DeviceResetModal } from '../DeviceResetModal'
 
+import type { ComponentProps } from 'react'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
 
 vi.mock('/app/redux-resources/robots')
@@ -18,7 +18,7 @@ vi.mock('/app/redux/robot-api')
 const mockResetOptions = {}
 const mockCloseModal = vi.fn()
 const ROBOT_NAME = 'otie'
-const render = (props: React.ComponentProps<typeof DeviceResetModal>) => {
+const render = (props: ComponentProps<typeof DeviceResetModal>) => {
   return renderWithProviders(
     <MemoryRouter>
       <DeviceResetModal {...props} />
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx
index 2249e453fe6..b9cd537894a 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -14,6 +13,8 @@ import {
 
 import { TertiaryButton } from '/app/atoms/buttons'
 
+import type { MouseEventHandler } from 'react'
+
 interface DeviceResetProps {
   updateIsExpanded: (
     isExpanded: boolean,
@@ -28,7 +29,7 @@ export function DeviceReset({
 }: DeviceResetProps): JSX.Element {
   const { t } = useTranslation('device_settings')
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
     if (!isRobotBusy) {
       updateIsExpanded(true, 'deviceReset')
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx
index c6a380cd6e5..7f1d51022b4 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -14,6 +13,8 @@ import {
 } from '@opentrons/components'
 
 import { TertiaryButton } from '/app/atoms/buttons'
+
+import type { MouseEventHandler } from 'react'
 interface DisplayRobotNameProps {
   robotName: string
   updateIsExpanded: (
@@ -30,7 +31,7 @@ export function DisplayRobotName({
 }: DisplayRobotNameProps): JSX.Element {
   const { t } = useTranslation('device_settings')
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
     if (!isRobotBusy) {
       updateIsExpanded(true, 'renameRobot')
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/FactoryMode.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/FactoryMode.tsx
index 14cb3766040..8fea7e0f82d 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/FactoryMode.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/FactoryMode.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -14,9 +13,11 @@ import {
 
 import { TertiaryButton } from '/app/atoms/buttons'
 
+import type { Dispatch, SetStateAction } from 'react'
+
 interface FactoryModeProps {
   isRobotBusy: boolean
-  setShowFactoryModeSlideout: React.Dispatch<React.SetStateAction<boolean>>
+  setShowFactoryModeSlideout: Dispatch<SetStateAction<boolean>>
   sn: string | null
 }
 
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/GantryHoming.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/GantryHoming.tsx
index 96ea82a59cf..6537d1fdf1a 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/GantryHoming.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/GantryHoming.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -15,6 +14,7 @@ import {
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -34,7 +34,7 @@ export function GantryHoming({
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'disableHomeOnBoot'
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx
index 5ea0ae6e5ec..7947243d13f 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -15,6 +14,7 @@ import {
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -34,7 +34,7 @@ export function LegacySettings({
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'deckCalibrationDots'
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx
index 5bc00476406..6152163c223 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -15,6 +14,7 @@ import {
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -34,7 +34,7 @@ export function ShortTrashBin({
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'shortTrashBin'
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx
index e8843af6019..c44f573f7a2 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -15,6 +14,7 @@ import {
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -34,7 +34,7 @@ export function UsageSettings({
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'enableDoorSafetySwitch'
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx
index c3496621f18..c12941a12a0 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -15,6 +14,7 @@ import {
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -34,7 +34,7 @@ export function UseOlderAspirateBehavior({
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'useOldAspirationFunctions'
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableErrorRecoveryMode.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableErrorRecoveryMode.test.tsx
index 9406e38f768..b3ff80c9341 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableErrorRecoveryMode.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableErrorRecoveryMode.test.tsx
@@ -5,21 +5,19 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useErrorRecoverySettingsToggle } from '/app/resources/errorRecovery'
 import { EnableErrorRecoveryMode } from '../EnableErrorRecoveryMode'
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
 vi.mock('/app/resources/errorRecovery')
 
 const mockToggleERSettings = vi.fn()
-const render = (
-  props: React.ComponentProps<typeof EnableErrorRecoveryMode>
-) => {
+const render = (props: ComponentProps<typeof EnableErrorRecoveryMode>) => {
   return renderWithProviders(<EnableErrorRecoveryMode {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('EnableErrorRecoveryMode', () => {
-  let props: React.ComponentProps<typeof EnableErrorRecoveryMode>
+  let props: ComponentProps<typeof EnableErrorRecoveryMode>
 
   beforeEach(() => {
     props = { isRobotBusy: false }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableStatusLight.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableStatusLight.test.tsx
index 2e2cc956bde..c36d79a04db 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableStatusLight.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableStatusLight.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -8,18 +7,20 @@ import { i18n } from '/app/i18n'
 import { useLEDLights } from '/app/resources/robot-settings'
 import { EnableStatusLight } from '../EnableStatusLight'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/robot-settings')
 
 const ROBOT_NAME = 'otie'
 const mockToggleLights = vi.fn()
-const render = (props: React.ComponentProps<typeof EnableStatusLight>) => {
+const render = (props: ComponentProps<typeof EnableStatusLight>) => {
   return renderWithProviders(<EnableStatusLight {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('EnableStatusLight', () => {
-  let props: React.ComponentProps<typeof EnableStatusLight>
+  let props: ComponentProps<typeof EnableStatusLight>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx
index 57a01e25680..b6c5b2d9be4 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -8,6 +7,8 @@ import { i18n } from '/app/i18n'
 import { useTrackEvent, ANALYTICS_JUPYTER_OPEN } from '/app/redux/analytics'
 import { OpenJupyterControl } from '../OpenJupyterControl'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/analytics')
 
 const mockIpAddress = '1.1.1.1'
@@ -18,7 +19,7 @@ global.window = Object.create(window)
 Object.defineProperty(window, 'open', { writable: true, configurable: true })
 window.open = vi.fn()
 
-const render = (props: React.ComponentProps<typeof OpenJupyterControl>) => {
+const render = (props: ComponentProps<typeof OpenJupyterControl>) => {
   return renderWithProviders(
     <MemoryRouter>
       <OpenJupyterControl {...props} />
@@ -28,7 +29,7 @@ const render = (props: React.ComponentProps<typeof OpenJupyterControl>) => {
 }
 
 describe('RobotSettings OpenJupyterControl', () => {
-  let props: React.ComponentProps<typeof OpenJupyterControl>
+  let props: ComponentProps<typeof OpenJupyterControl>
   beforeEach(() => {
     props = {
       robotIp: mockIpAddress,
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx
index a5f28ee7da2..ef9cc7ff185 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { act, waitFor, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -16,6 +15,7 @@ import {
 import { useRobot } from '/app/redux-resources/robots'
 import { Troubleshooting } from '../Troubleshooting'
 
+import type { ComponentProps } from 'react'
 import type { HostConfig } from '@opentrons/api-client'
 import type { ToasterContextType } from '/app/organisms/ToasterOven/ToasterContext'
 
@@ -29,7 +29,7 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' }
 const MOCK_MAKE_TOAST = vi.fn()
 const MOCK_EAT_TOAST = vi.fn()
 
-const render = (props: React.ComponentProps<typeof Troubleshooting>) => {
+const render = (props: ComponentProps<typeof Troubleshooting>) => {
   return renderWithProviders(
     <MemoryRouter>
       <Troubleshooting {...props} />
@@ -39,7 +39,7 @@ const render = (props: React.ComponentProps<typeof Troubleshooting>) => {
 }
 
 describe('RobotSettings Troubleshooting', () => {
-  let props: React.ComponentProps<typeof Troubleshooting>
+  let props: ComponentProps<typeof Troubleshooting>
   beforeEach(() => {
     props = {
       robotName: ROBOT_NAME,
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormRow.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormRow.tsx
index 1481d3f40f9..fddda5bc96a 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormRow.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormRow.tsx
@@ -1,12 +1,13 @@
 // presentational components for the wifi connect form
-import type * as React from 'react'
 import styled from 'styled-components'
 import { FONT_WEIGHT_SEMIBOLD, SPACING } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 export interface FormRowProps {
   label: string
   labelFor: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const StyledRow = styled.div`
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/SelectSsid/index.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/SelectSsid/index.tsx
index a8b04feba4b..02de4cfabaa 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/SelectSsid/index.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/SelectSsid/index.tsx
@@ -1,12 +1,11 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { CONTEXT_MENU } from '@opentrons/components'
 import { SelectField } from '/app/atoms/SelectField'
 import { NetworkOptionLabel, NetworkActionLabel } from './NetworkOptionLabel'
 
+import type { ComponentProps } from 'react'
 import type { TFunction } from 'i18next'
 import type { SelectOptionOrGroup } from '@opentrons/components'
-
 import type { WifiNetwork } from '../types'
 
 export interface SelectSsidProps {
@@ -51,7 +50,7 @@ export function SelectSsid(props: SelectSsidProps): JSX.Element {
     }
   }
 
-  const formatOptionLabel: React.ComponentProps<
+  const formatOptionLabel: ComponentProps<
     typeof SelectField
   >['formatOptionLabel'] = (option, { context }): JSX.Element | null => {
     const { value, label } = option
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/types.ts b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/types.ts
index 050d26c08c3..ccfa37a7a44 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/types.ts
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/types.ts
@@ -1,3 +1,4 @@
+import type { ChangeEventHandler, FocusEventHandler } from 'react'
 import type { FieldError } from 'react-hook-form'
 import type {
   WifiNetwork,
@@ -80,8 +81,8 @@ export type ConnectFormField =
 export type ConnectFormFieldProps = Readonly<{
   value: string | null
   error: string | null
-  onChange: React.ChangeEventHandler
-  onBlur: React.FocusEventHandler
+  onChange: ChangeEventHandler
+  onBlur: FocusEventHandler
   setValue: (value: string) => unknown
   setTouched: (touched: boolean) => unknown
 }>
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/SettingToggle.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/SettingToggle.tsx
index 4407779d888..bb5b3c0d824 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/SettingToggle.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/SettingToggle.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 
 import {
@@ -13,6 +12,8 @@ import {
 
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
+
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -38,7 +39,7 @@ export function SettingToggle({
 
   if (id == null) return null
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     dispatch(updateSetting(robotName, id, !value))
   }
 
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx
index 176388a5527..927c1acfdc8 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { i18n } from '/app/i18n'
 import { act, fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -21,6 +20,7 @@ import {
   INIT_STATUS,
 } from '/app/resources/health/hooks'
 
+import type { ComponentProps } from 'react'
 import type { SetStatusBarCreateCommand } from '@opentrons/shared-data'
 import type { RobotUpdateSession } from '/app/redux/robot-update/types'
 
@@ -30,9 +30,7 @@ vi.mock('/app/redux/robot-update')
 vi.mock('/app/redux/robot-update/hooks')
 vi.mock('/app/resources/health/hooks')
 
-const render = (
-  props: React.ComponentProps<typeof RobotUpdateProgressModal>
-) => {
+const render = (props: ComponentProps<typeof RobotUpdateProgressModal>) => {
   return renderWithProviders(<RobotUpdateProgressModal {...props} />, {
     i18nInstance: i18n,
   })
@@ -50,7 +48,7 @@ describe('DownloadUpdateModal', () => {
     error: null,
   }
 
-  let props: React.ComponentProps<typeof RobotUpdateProgressModal>
+  let props: ComponentProps<typeof RobotUpdateProgressModal>
   const mockCreateLiveCommand = vi.fn()
   const mockDispatchStartRobotUpdate = vi.fn()
 
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateRobotModal.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateRobotModal.test.tsx
index e77a0df9533..e4c6b7bfb12 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateRobotModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateRobotModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createStore } from 'redux'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -14,6 +13,7 @@ import { getDiscoverableRobotByName } from '/app/redux/discovery'
 import { UpdateRobotModal, RELEASE_NOTES_URL_BASE } from '../UpdateRobotModal'
 import { useIsRobotBusy } from '/app/redux-resources/robots'
 
+import type { ComponentProps } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -21,14 +21,14 @@ vi.mock('/app/redux/robot-update')
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux-resources/robots')
 
-const render = (props: React.ComponentProps<typeof UpdateRobotModal>) => {
+const render = (props: ComponentProps<typeof UpdateRobotModal>) => {
   return renderWithProviders(<UpdateRobotModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('UpdateRobotModal', () => {
-  let props: React.ComponentProps<typeof UpdateRobotModal>
+  let props: ComponentProps<typeof UpdateRobotModal>
   let store: Store<State>
   beforeEach(() => {
     store = createStore(vi.fn(), {})
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx
index 2897110aacc..e81d61f1d5c 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { renderHook } from '@testing-library/react'
 import { createStore } from 'redux'
 import { I18nextProvider } from 'react-i18next'
@@ -9,6 +8,7 @@ import { i18n } from '/app/i18n'
 import { useRobotUpdateInfo } from '../useRobotUpdateInfo'
 import { getRobotUpdateDownloadProgress } from '/app/redux/robot-update'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 import type {
@@ -21,7 +21,7 @@ vi.mock('/app/redux/robot-update')
 
 describe('useRobotUpdateInfo', () => {
   let store: Store<State>
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
 
   const MOCK_ROBOT_NAME = 'testRobot'
   const mockRobotUpdateSession: RobotUpdateSession | null = {
diff --git a/app/src/organisms/Desktop/Devices/RobotStatusHeader.tsx b/app/src/organisms/Desktop/Devices/RobotStatusHeader.tsx
index 77cad0933ea..abeeceddc0b 100644
--- a/app/src/organisms/Desktop/Devices/RobotStatusHeader.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotStatusHeader.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { Link, useNavigate } from 'react-router-dom'
@@ -35,6 +34,7 @@ import {
 import { getNetworkInterfaces, fetchStatus } from '/app/redux/networking'
 import { useNotifyRunQuery, useCurrentRunId } from '/app/resources/runs'
 
+import type { MouseEvent } from 'react'
 import type { IconName, StyleProps } from '@opentrons/components'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 import type { Dispatch, State } from '/app/redux/types'
@@ -79,7 +79,7 @@ export function RobotStatusHeader(props: RobotStatusHeaderProps): JSX.Element {
     currentRunId != null && currentRunStatus != null && displayName != null ? (
       <Flex
         alignItems={ALIGN_CENTER}
-        onClick={(e: React.MouseEvent) => {
+        onClick={(e: MouseEvent) => {
           e.stopPropagation()
         }}
       >
diff --git a/app/src/organisms/Desktop/Devices/RunPreview/index.tsx b/app/src/organisms/Desktop/Devices/RunPreview/index.tsx
index c2a48aba59a..c217833593e 100644
--- a/app/src/organisms/Desktop/Devices/RunPreview/index.tsx
+++ b/app/src/organisms/Desktop/Devices/RunPreview/index.tsx
@@ -33,9 +33,11 @@ import { Divider } from '/app/atoms/structure'
 import { NAV_BAR_WIDTH } from '/app/App/constants'
 import { getLabwareDefinitionsFromCommands } from '/app/local-resources/labware'
 
+import type { ForwardedRef } from 'react'
+import type { ViewportListRef } from 'react-viewport-list'
 import type { RunStatus } from '@opentrons/api-client'
 import type { RobotType } from '@opentrons/shared-data'
-import type { ViewportListRef } from 'react-viewport-list'
+
 const COLOR_FADE_MS = 500
 const LIVE_RUN_COMMANDS_POLL_MS = 3000
 // arbitrary large number of commands
@@ -49,7 +51,7 @@ interface RunPreviewProps {
 }
 export const RunPreviewComponent = (
   { runId, jumpedIndex, makeHandleScrollToStep, robotType }: RunPreviewProps,
-  ref: React.ForwardedRef<ViewportListRef>
+  ref: ForwardedRef<ViewportListRef>
 ): JSX.Element | null => {
   const { t } = useTranslation(['run_details', 'protocol_setup'])
   const robotSideAnalysis = useMostRecentCompletedAnalysis(runId)
diff --git a/app/src/organisms/Desktop/Devices/__tests__/CalibrationStatusBanner.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/CalibrationStatusBanner.test.tsx
index fd50c5185ae..316315515b5 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/CalibrationStatusBanner.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/CalibrationStatusBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -8,11 +7,11 @@ import { i18n } from '/app/i18n'
 import { CalibrationStatusBanner } from '../CalibrationStatusBanner'
 import { useCalibrationTaskList } from '../hooks'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../hooks')
 
-const render = (
-  props: React.ComponentProps<typeof CalibrationStatusBanner>
-) => {
+const render = (props: ComponentProps<typeof CalibrationStatusBanner>) => {
   return renderWithProviders(
     <MemoryRouter>
       <CalibrationStatusBanner {...props} />
@@ -24,7 +23,7 @@ const render = (
 }
 
 describe('CalibrationStatusBanner', () => {
-  let props: React.ComponentProps<typeof CalibrationStatusBanner>
+  let props: ComponentProps<typeof CalibrationStatusBanner>
   beforeEach(() => {
     props = { robotName: 'otie' }
   })
diff --git a/app/src/organisms/Desktop/Devices/__tests__/ConnectionTroubleshootingModal.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/ConnectionTroubleshootingModal.test.tsx
index d725929a081..a810d459f12 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/ConnectionTroubleshootingModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/ConnectionTroubleshootingModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,8 +5,10 @@ import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '/app/i18n'
 import { ConnectionTroubleshootingModal } from '../ConnectionTroubleshootingModal'
 
+import type { ComponentProps } from 'react'
+
 const render = (
-  props: React.ComponentProps<typeof ConnectionTroubleshootingModal>
+  props: ComponentProps<typeof ConnectionTroubleshootingModal>
 ) => {
   return renderWithProviders(<ConnectionTroubleshootingModal {...props} />, {
     i18nInstance: i18n,
@@ -15,7 +16,7 @@ const render = (
 }
 
 describe('ConnectionTroubleshootingModal', () => {
-  let props: React.ComponentProps<typeof ConnectionTroubleshootingModal>
+  let props: ComponentProps<typeof ConnectionTroubleshootingModal>
   beforeEach(() => {
     props = {
       onClose: vi.fn(),
diff --git a/app/src/organisms/Desktop/Devices/__tests__/EstopBanner.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/EstopBanner.test.tsx
index 7d052568378..4e9f74b6310 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/EstopBanner.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/EstopBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,11 +5,13 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { EstopBanner } from '../EstopBanner'
 
-const render = (props: React.ComponentProps<typeof EstopBanner>) =>
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof EstopBanner>) =>
   renderWithProviders(<EstopBanner {...props} />, { i18nInstance: i18n })
 
 describe('EstopBanner', () => {
-  let props: React.ComponentProps<typeof EstopBanner>
+  let props: ComponentProps<typeof EstopBanner>
   beforeEach(() => {
     props = {
       status: 'physicallyEngaged',
diff --git a/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRun.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRun.test.tsx
index 070f1c614de..1b9ec0cde4e 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRun.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRun.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -10,6 +9,7 @@ import { useRunStatus, useRunTimestamps } from '/app/resources/runs'
 import { HistoricalProtocolRun } from '../HistoricalProtocolRun'
 import { HistoricalProtocolRunOverflowMenu } from '../HistoricalProtocolRunOverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { RunStatus, RunData } from '@opentrons/api-client'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
@@ -25,14 +25,14 @@ const run = {
   runTimeParameters: [] as RunTimeParameter[],
 } as RunData
 
-const render = (props: React.ComponentProps<typeof HistoricalProtocolRun>) => {
+const render = (props: ComponentProps<typeof HistoricalProtocolRun>) => {
   return renderWithProviders(<HistoricalProtocolRun {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RecentProtocolRuns', () => {
-  let props: React.ComponentProps<typeof HistoricalProtocolRun>
+  let props: ComponentProps<typeof HistoricalProtocolRun>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRunOverflowMenu.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRunOverflowMenu.test.tsx
index 2b2706c9645..72148f614bf 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRunOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRunOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { when } from 'vitest-when'
@@ -23,6 +22,7 @@ import { useIsEstopNotDisengaged } from '/app/resources/devices'
 import { HistoricalProtocolRunOverflowMenu } from '../HistoricalProtocolRunOverflowMenu'
 import { useNotifyAllCommandsQuery } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { CommandsData } from '@opentrons/api-client'
 
@@ -40,7 +40,7 @@ vi.mock('/app/redux-resources/analytics')
 vi.mock('@opentrons/react-api-client')
 
 const render = (
-  props: React.ComponentProps<typeof HistoricalProtocolRunOverflowMenu>
+  props: ComponentProps<typeof HistoricalProtocolRunOverflowMenu>
 ) => {
   return renderWithProviders(
     <MemoryRouter>
@@ -59,7 +59,7 @@ let mockTrackProtocolRunEvent: any
 const mockDownloadRunLog = vi.fn()
 
 describe('HistoricalProtocolRunOverflowMenu', () => {
-  let props: React.ComponentProps<typeof HistoricalProtocolRunOverflowMenu>
+  let props: ComponentProps<typeof HistoricalProtocolRunOverflowMenu>
   beforeEach(() => {
     mockTrackEvent = vi.fn()
     vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent)
diff --git a/app/src/organisms/Desktop/Devices/__tests__/RobotCard.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/RobotCard.test.tsx
index 89d59c47cf8..f2814630b2b 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/RobotCard.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/RobotCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
@@ -37,6 +36,7 @@ import {
   useErrorRecoveryBanner,
 } from '../ErrorRecoveryBanner'
 
+import type { ComponentProps } from 'react'
 import type { State } from '/app/redux/types'
 
 vi.mock('/app/redux/robot-update/selectors')
@@ -94,7 +94,7 @@ const MOCK_STATE: State = {
   },
 } as any
 
-const render = (props: React.ComponentProps<typeof RobotCard>) => {
+const render = (props: ComponentProps<typeof RobotCard>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotCard {...props} />
@@ -107,7 +107,7 @@ const render = (props: React.ComponentProps<typeof RobotCard>) => {
 }
 
 describe('RobotCard', () => {
-  let props: React.ComponentProps<typeof RobotCard>
+  let props: ComponentProps<typeof RobotCard>
 
   beforeEach(() => {
     props = { robot: mockConnectableRobot }
diff --git a/app/src/organisms/Desktop/Devices/__tests__/RobotOverflowMenu.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/RobotOverflowMenu.test.tsx
index b3735e72a77..7f8ce943211 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/RobotOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/RobotOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -16,6 +15,8 @@ import {
   mockConnectedRobot,
 } from '/app/redux/discovery/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/robot-update/hooks')
 vi.mock('/app/resources/runs')
 vi.mock('/app/organisms/Desktop/ChooseProtocolSlideout')
@@ -23,7 +24,7 @@ vi.mock('../hooks')
 vi.mock('/app/redux-resources/robots')
 vi.mock('/app/resources/devices/hooks/useIsEstopNotDisengaged')
 
-const render = (props: React.ComponentProps<typeof RobotOverflowMenu>) => {
+const render = (props: ComponentProps<typeof RobotOverflowMenu>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotOverflowMenu {...props} />
@@ -35,7 +36,7 @@ const render = (props: React.ComponentProps<typeof RobotOverflowMenu>) => {
 }
 
 describe('RobotOverflowMenu', () => {
-  let props: React.ComponentProps<typeof RobotOverflowMenu>
+  let props: ComponentProps<typeof RobotOverflowMenu>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/__tests__/RobotOverview.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/RobotOverview.test.tsx
index 5d2513bec23..6f262e0a094 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/RobotOverview.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/RobotOverview.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { when } from 'vitest-when'
 import { screen, fireEvent } from '@testing-library/react'
@@ -48,10 +47,11 @@ import {
   useErrorRecoveryBanner,
 } from '../ErrorRecoveryBanner'
 
+import type { ComponentProps } from 'react'
+import type * as ReactApiClient from '@opentrons/react-api-client'
 import type { Config } from '/app/redux/config/types'
 import type { DiscoveryClientRobotAddress } from '/app/redux/discovery/types'
 import type { State } from '/app/redux/types'
-import type * as ReactApiClient from '@opentrons/react-api-client'
 
 vi.mock('@opentrons/react-api-client', async importOriginal => {
   const actual = await importOriginal<typeof ReactApiClient>()
@@ -104,7 +104,7 @@ const MOCK_STATE: State = {
 
 const mockToggleLights = vi.fn()
 
-const render = (props: React.ComponentProps<typeof RobotOverview>) => {
+const render = (props: ComponentProps<typeof RobotOverview>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotOverview robotName={props.robotName} />
@@ -117,7 +117,7 @@ const render = (props: React.ComponentProps<typeof RobotOverview>) => {
 }
 
 describe('RobotOverview', () => {
-  let props: React.ComponentProps<typeof RobotOverview>
+  let props: ComponentProps<typeof RobotOverview>
 
   beforeEach(() => {
     props = { robotName: mockConnectableRobot.name }
diff --git a/app/src/organisms/Desktop/Devices/__tests__/RobotOverviewOverflowMenu.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/RobotOverviewOverflowMenu.test.tsx
index c4d384d0805..21d8e13b666 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/RobotOverviewOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/RobotOverviewOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -24,6 +23,8 @@ import { handleUpdateBuildroot } from '../RobotSettings/UpdateBuildroot'
 import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstopNotDisengaged'
 import { RobotOverviewOverflowMenu } from '../RobotOverviewOverflowMenu'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/robot-controls')
 vi.mock('/app/redux/robot-admin')
 vi.mock('../hooks')
@@ -36,9 +37,7 @@ vi.mock('../RobotSettings/UpdateBuildroot')
 vi.mock('/app/resources/devices/hooks/useIsEstopNotDisengaged')
 vi.mock('/app/redux-resources/robots')
 
-const render = (
-  props: React.ComponentProps<typeof RobotOverviewOverflowMenu>
-) => {
+const render = (props: ComponentProps<typeof RobotOverviewOverflowMenu>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotOverviewOverflowMenu {...props} />
@@ -50,7 +49,7 @@ const render = (
 }
 
 describe('RobotOverviewOverflowMenu', () => {
-  let props: React.ComponentProps<typeof RobotOverviewOverflowMenu>
+  let props: ComponentProps<typeof RobotOverviewOverflowMenu>
   vi.useFakeTimers()
 
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/Devices/__tests__/RobotStatusHeader.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/RobotStatusHeader.test.tsx
index 465c46cc566..af05d9ce131 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/RobotStatusHeader.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/RobotStatusHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { RUN_STATUS_RUNNING } from '@opentrons/api-client'
 import { when } from 'vitest-when'
@@ -20,6 +19,7 @@ import { useIsFlex } from '/app/redux-resources/robots'
 import { RobotStatusHeader } from '../RobotStatusHeader'
 import { useNotifyRunQuery, useCurrentRunId } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type { DiscoveryClientRobotAddress } from '/app/redux/discovery/types'
 import type { SimpleInterfaceStatus } from '/app/redux/networking/types'
 import type { State } from '/app/redux/types'
@@ -45,7 +45,7 @@ const MOCK_BUZZ = {
 const WIFI_IP = 'wifi-ip'
 const ETHERNET_IP = 'ethernet-ip'
 
-const render = (props: React.ComponentProps<typeof RobotStatusHeader>) => {
+const render = (props: ComponentProps<typeof RobotStatusHeader>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotStatusHeader {...props} />
@@ -56,7 +56,7 @@ const render = (props: React.ComponentProps<typeof RobotStatusHeader>) => {
   )
 }
 describe('RobotStatusHeader', () => {
-  let props: React.ComponentProps<typeof RobotStatusHeader>
+  let props: ComponentProps<typeof RobotStatusHeader>
 
   beforeEach(() => {
     props = MOCK_OTIE
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx
index 9d675c77f7e..1ca9c1741c2 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createStore } from 'redux'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
@@ -30,6 +29,7 @@ import {
 } from '../__fixtures__/taskListFixtures'
 import { i18n } from '/app/i18n'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -41,7 +41,7 @@ const mockTipLengthCalLauncher = vi.fn()
 const mockDeckCalLauncher = vi.fn()
 
 describe('useCalibrationTaskList hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let store: Store<State>
   const mockDeleteCalibration = vi.fn()
 
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx
index c08f0e3e1e5..1aef843c8ef 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { Provider } from 'react-redux'
@@ -15,13 +14,13 @@ import {
 import { getDiscoverableRobotByName } from '/app/redux/discovery'
 import { mockDeckCalData } from '/app/redux/calibration/__fixtures__'
 import { useDispatchApiRequest } from '/app/redux/robot-api'
+import { useDeckCalibrationData } from '..'
+import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
 
-import { useDeckCalibrationData } from '..'
-import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
-
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/redux/calibration')
 vi.mock('/app/redux/robot-api')
@@ -31,7 +30,7 @@ const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useDeckCalibrationData hook', () => {
   let dispatchApiRequest: DispatchApiRequestType
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     dispatchApiRequest = vi.fn()
     const queryClient = new QueryClient()
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx
index 2c23dcb0f61..50db68fe850 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { Provider } from 'react-redux'
@@ -15,6 +14,7 @@ import { useDispatchApiRequest } from '/app/redux/robot-api'
 import { useRobot } from '/app/redux-resources/robots'
 import { usePipetteOffsetCalibration } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
@@ -32,7 +32,7 @@ const MOUNT = 'left' as Mount
 
 describe('usePipetteOffsetCalibration hook', () => {
   let dispatchApiRequest: DispatchApiRequestType
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     dispatchApiRequest = vi.fn()
     const queryClient = new QueryClient()
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx
index 9305b34af38..de390322d11 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { renderHook } from '@testing-library/react'
@@ -11,12 +10,14 @@ import {
 } from '/app/redux/calibration/pipette-offset/__fixtures__'
 import { usePipetteOffsetCalibrations } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
 const CALIBRATION_DATA_POLL_MS = 5000
 
 describe('usePipetteOffsetCalibrations hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useSyncRobotClock.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/useSyncRobotClock.test.tsx
index 02b593fbaab..1ab5c1f55cb 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useSyncRobotClock.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useSyncRobotClock.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
@@ -7,6 +6,8 @@ import { QueryClient, QueryClientProvider } from 'react-query'
 
 import { syncSystemTime } from '/app/redux/robot-admin'
 import { useSyncRobotClock } from '..'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/discovery')
@@ -14,7 +15,7 @@ vi.mock('/app/redux/discovery')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useSyncRobotClock hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     store.dispatch = vi.fn()
     const queryClient = new QueryClient()
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx
index 7281b009b5c..d2cec816973 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -11,12 +10,14 @@ import {
 } from '/app/redux/calibration/tip-length/__fixtures__'
 import { useTipLengthCalibrations } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
 const CALIBRATIONS_FETCH_MS = 5000
 
 describe('useTipLengthCalibrations hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx
index b8cf7fd9896..1f7eb5041fa 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -12,6 +11,7 @@ import { parseProtocolAnalysisOutput } from '/app/transformations/analysis'
 import { useTrackEvent } from '/app/redux/analytics'
 import { storedProtocolData } from '/app/redux/protocol-storage/__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Mock } from 'vitest'
 import type { Store } from 'redux'
 import type { ProtocolAnalyticsData } from '/app/redux/analytics/types'
@@ -28,7 +28,7 @@ const PROTOCOL_PROPERTIES = { protocolType: 'python' } as ProtocolAnalyticsData
 
 let mockTrackEvent: Mock
 let mockGetProtocolRunAnalyticsData: Mock
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 let store: Store<any> = createStore(vi.fn(), {})
 
 describe('useTrackCreateProtocolRunEvent hook', () => {
diff --git a/app/src/organisms/Desktop/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx b/app/src/organisms/Desktop/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx
index 8eee1543c5a..dfa8ae09955 100644
--- a/app/src/organisms/Desktop/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx
+++ b/app/src/organisms/Desktop/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -6,16 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { HowCalibrationWorksModal } from '..'
 
-const render = (
-  props: React.ComponentProps<typeof HowCalibrationWorksModal>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof HowCalibrationWorksModal>) => {
   return renderWithProviders(<HowCalibrationWorksModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HowCalibrationWorksModal', () => {
-  let props: React.ComponentProps<typeof HowCalibrationWorksModal>
+  let props: ComponentProps<typeof HowCalibrationWorksModal>
   beforeEach(() => {
     props = { onCloseClick: vi.fn() }
   })
diff --git a/app/src/organisms/Desktop/Labware/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx b/app/src/organisms/Desktop/Labware/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx
index 1a4fef0be5c..9d67949e289 100644
--- a/app/src/organisms/Desktop/Labware/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx
+++ b/app/src/organisms/Desktop/Labware/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -10,6 +9,8 @@ import {
 import { renderWithProviders } from '/app/__testing-utils__'
 import { AddCustomLabwareSlideout } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/custom-labware')
 vi.mock('/app/local-resources/labware')
 vi.mock('/app/redux/analytics')
@@ -21,9 +22,7 @@ vi.mock('/app/redux/shell/remote', () => ({
 
 let mockTrackEvent: any
 
-const render = (
-  props: React.ComponentProps<typeof AddCustomLabwareSlideout>
-) => {
+const render = (props: ComponentProps<typeof AddCustomLabwareSlideout>) => {
   return renderWithProviders(
     <MemoryRouter>
       <AddCustomLabwareSlideout {...props} />
@@ -35,7 +34,7 @@ const render = (
 }
 
 describe('AddCustomLabwareSlideout', () => {
-  const props: React.ComponentProps<typeof AddCustomLabwareSlideout> = {
+  const props: ComponentProps<typeof AddCustomLabwareSlideout> = {
     isExpanded: true,
     onCloseClick: vi.fn(() => null),
   }
diff --git a/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/CustomLabwareOverflowMenu.test.tsx b/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/CustomLabwareOverflowMenu.test.tsx
index 588b47ecea3..5e47b3432f4 100644
--- a/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/CustomLabwareOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/CustomLabwareOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest'
 
@@ -9,6 +8,7 @@ import { i18n } from '/app/i18n'
 import { useTrackEvent } from '/app/redux/analytics'
 import { CustomLabwareOverflowMenu } from '../CustomLabwareOverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 import type * as OpentronsComponents from '@opentrons/components'
 
@@ -31,7 +31,7 @@ vi.mock('@opentrons/components', async importOriginal => {
 })
 
 const render = (
-  props: React.ComponentProps<typeof CustomLabwareOverflowMenu>
+  props: ComponentProps<typeof CustomLabwareOverflowMenu>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<CustomLabwareOverflowMenu {...props} />, {
     i18nInstance: i18n,
@@ -39,7 +39,7 @@ const render = (
 }
 
 describe('CustomLabwareOverflowMenu', () => {
-  let props: React.ComponentProps<typeof CustomLabwareOverflowMenu>
+  let props: ComponentProps<typeof CustomLabwareOverflowMenu>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/LabwareCard.test.tsx b/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/LabwareCard.test.tsx
index 76abb51c72f..2431472e274 100644
--- a/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/LabwareCard.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/LabwareCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { renderWithProviders, nestedTextMatcher } from '/app/__testing-utils__'
@@ -8,6 +7,7 @@ import { mockDefinition } from '/app/redux/custom-labware/__fixtures__'
 import { CustomLabwareOverflowMenu } from '../CustomLabwareOverflowMenu'
 import { LabwareCard } from '..'
 
+import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 
 vi.mock('/app/local-resources/labware')
@@ -21,14 +21,14 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof LabwareCard>) => {
+const render = (props: ComponentProps<typeof LabwareCard>) => {
   return renderWithProviders(<LabwareCard {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('LabwareCard', () => {
-  let props: React.ComponentProps<typeof LabwareCard>
+  let props: ComponentProps<typeof LabwareCard>
   beforeEach(() => {
     vi.mocked(CustomLabwareOverflowMenu).mockReturnValue(
       <div>Mock CustomLabwareOverflowMenu</div>
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/ExpandingTitle.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/ExpandingTitle.test.tsx
index 6ee44619bc8..b7a872e9a1b 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/ExpandingTitle.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/ExpandingTitle.test.tsx
@@ -1,11 +1,12 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { getFootprintDiagram } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ExpandingTitle } from '../ExpandingTitle'
 
-const render = (props: React.ComponentProps<typeof ExpandingTitle>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ExpandingTitle>) => {
   return renderWithProviders(<ExpandingTitle {...props} />)
 }
 
@@ -13,7 +14,7 @@ const diagram = getFootprintDiagram({})
 const DIAGRAM_TEST_ID = 'expanding_title_diagram'
 
 describe('ExpandingTitle', () => {
-  let props: React.ComponentProps<typeof ExpandingTitle>
+  let props: ComponentProps<typeof ExpandingTitle>
   beforeEach(() => {
     props = {
       label: 'Title',
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/LabeledValue.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/LabeledValue.test.tsx
index c3a73771f52..196d85cb707 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/LabeledValue.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/LabeledValue.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { LabeledValue } from '../LabeledValue'
 
-const render = (props: React.ComponentProps<typeof LabeledValue>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof LabeledValue>) => {
   return renderWithProviders(<LabeledValue {...props} />)
 }
 
 describe('LabeledValue', () => {
-  let props: React.ComponentProps<typeof LabeledValue>
+  let props: ComponentProps<typeof LabeledValue>
   beforeEach(() => {
     props = {
       label: 'height',
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Dimensions.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Dimensions.test.tsx
index 32de832214c..2afc92ad6cf 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Dimensions.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Dimensions.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { mockDefinition } from '/app/redux/custom-labware/__fixtures__'
 import { Dimensions } from '../Dimensions'
 
-const render = (props: React.ComponentProps<typeof Dimensions>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Dimensions>) => {
   return renderWithProviders(<Dimensions {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Dimensions', () => {
-  let props: React.ComponentProps<typeof Dimensions>
+  let props: ComponentProps<typeof Dimensions>
   beforeEach(() => {
     props = {
       definition: mockDefinition,
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Gallery.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Gallery.test.tsx
index 344981336b0..5a61aa4684c 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Gallery.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Gallery.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,12 +5,14 @@ import { mockDefinition } from '/app/redux/custom-labware/__fixtures__'
 import { labwareImages } from '../labware-images'
 import { Gallery } from '../Gallery'
 
-const render = (props: React.ComponentProps<typeof Gallery>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Gallery>) => {
   return renderWithProviders(<Gallery {...props} />)
 }
 
 describe('Gallery', () => {
-  let props: React.ComponentProps<typeof Gallery>
+  let props: ComponentProps<typeof Gallery>
   beforeEach(() => {
     labwareImages.mock_definition = ['image1']
     props = {
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/LabwareDetails.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/LabwareDetails.test.tsx
index 78c98c50a46..10602db9f9f 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/LabwareDetails.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/LabwareDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, afterEach, vi, expect } from 'vitest'
 
@@ -17,6 +16,8 @@ import { WellSpacing } from '../WellSpacing'
 
 import { LabwareDetails } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/local-resources/labware')
 vi.mock('../../LabwareCard/CustomLabwareOverflowMenu')
 vi.mock('../Dimensions')
@@ -28,7 +29,7 @@ vi.mock('../WellDimensions')
 vi.mock('../WellSpacing')
 
 const render = (
-  props: React.ComponentProps<typeof LabwareDetails>
+  props: ComponentProps<typeof LabwareDetails>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<LabwareDetails {...props} />, {
     i18nInstance: i18n,
@@ -36,7 +37,7 @@ const render = (
 }
 
 describe('LabwareDetails', () => {
-  let props: React.ComponentProps<typeof LabwareDetails>
+  let props: ComponentProps<typeof LabwareDetails>
   beforeEach(() => {
     vi.mocked(CustomLabwareOverflowMenu).mockReturnValue(
       <div>Mock CustomLabwareOverflowMenu</div>
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/ManufacturerDetails.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/ManufacturerDetails.test.tsx
index 21dc8c8f1a2..9d50aa61500 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/ManufacturerDetails.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/ManufacturerDetails.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ManufacturerDetails } from '../ManufacturerDetails'
 
-const render = (props: React.ComponentProps<typeof ManufacturerDetails>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ManufacturerDetails>) => {
   return renderWithProviders(<ManufacturerDetails {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ManufacturerDetails', () => {
-  let props: React.ComponentProps<typeof ManufacturerDetails>
+  let props: ComponentProps<typeof ManufacturerDetails>
   beforeEach(() => {
     props = {
       brand: { brand: 'Opentrons' },
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellCount.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellCount.test.tsx
index f833c0c6e3f..6d94737a9c4 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellCount.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellCount.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { WellCount } from '../WellCount'
 
-const render = (props: React.ComponentProps<typeof WellCount>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WellCount>) => {
   return renderWithProviders(<WellCount {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WellCount', () => {
-  let props: React.ComponentProps<typeof WellCount>
+  let props: ComponentProps<typeof WellCount>
   beforeEach(() => {
     props = {
       count: 1,
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellDimensions.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellDimensions.test.tsx
index 3269c3ec241..78af2ac24b2 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellDimensions.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellDimensions.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -10,14 +9,16 @@ import {
 } from '/app/redux/custom-labware/__fixtures__'
 import { WellDimensions } from '../WellDimensions'
 
-const render = (props: React.ComponentProps<typeof WellDimensions>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WellDimensions>) => {
   return renderWithProviders(<WellDimensions {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WellDimensions', () => {
-  let props: React.ComponentProps<typeof WellDimensions>
+  let props: ComponentProps<typeof WellDimensions>
   beforeEach(() => {
     props = {
       labwareParams: mockDefinition.parameters,
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellProperties.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellProperties.test.tsx
index 3d21e01f4df..40b17b3b31f 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellProperties.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellProperties.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { mockCircularLabwareWellGroupProperties } from '/app/redux/custom-labware/__fixtures__'
 import { WellProperties } from '../WellProperties'
 
-const render = (props: React.ComponentProps<typeof WellProperties>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WellProperties>) => {
   return renderWithProviders(<WellProperties {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WellProperties', () => {
-  let props: React.ComponentProps<typeof WellProperties>
+  let props: ComponentProps<typeof WellProperties>
   beforeEach(() => {
     props = {
       wellProperties: mockCircularLabwareWellGroupProperties,
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellSpacing.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellSpacing.test.tsx
index 5496bbe33f1..59115886e02 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellSpacing.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellSpacing.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { mockCircularLabwareWellGroupProperties } from '/app/redux/custom-labware/__fixtures__'
 import { WellSpacing } from '../WellSpacing'
 
-const render = (props: React.ComponentProps<typeof WellSpacing>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WellSpacing>) => {
   return renderWithProviders(<WellSpacing {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WellSpacing', () => {
-  let props: React.ComponentProps<typeof WellSpacing>
+  let props: ComponentProps<typeof WellSpacing>
   beforeEach(() => {
     props = {
       wellProperties: mockCircularLabwareWellGroupProperties,
diff --git a/app/src/organisms/Desktop/ProtocolAnalysisFailure/ProtocolAnalysisStale.tsx b/app/src/organisms/Desktop/ProtocolAnalysisFailure/ProtocolAnalysisStale.tsx
index 9b3a7c00d14..4daa1b24c80 100644
--- a/app/src/organisms/Desktop/ProtocolAnalysisFailure/ProtocolAnalysisStale.tsx
+++ b/app/src/organisms/Desktop/ProtocolAnalysisFailure/ProtocolAnalysisStale.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation, Trans } from 'react-i18next'
 
@@ -13,9 +12,11 @@ import {
   TYPOGRAPHY,
   WRAP_REVERSE,
 } from '@opentrons/components'
+import { analyzeProtocol } from '/app/redux/protocol-storage'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
-import { analyzeProtocol } from '/app/redux/protocol-storage'
+
 interface ProtocolAnalysisStaleProps {
   protocolKey: string
 }
@@ -27,7 +28,7 @@ export function ProtocolAnalysisStale(
   const { t } = useTranslation(['protocol_list', 'shared'])
   const dispatch = useDispatch<Dispatch>()
 
-  const handleClickReanalyze: React.MouseEventHandler = e => {
+  const handleClickReanalyze: MouseEventHandler = e => {
     e.preventDefault()
     e.stopPropagation()
     dispatch(analyzeProtocol(protocolKey))
diff --git a/app/src/organisms/Desktop/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx b/app/src/organisms/Desktop/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx
index fbdec0a45ec..becdabef509 100644
--- a/app/src/organisms/Desktop/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect } from 'vitest'
@@ -9,8 +8,10 @@ import { i18n } from '/app/i18n'
 import { ProtocolAnalysisFailure } from '..'
 import { analyzeProtocol } from '/app/redux/protocol-storage'
 
+import type { ComponentProps } from 'react'
+
 const render = (
-  props: Partial<React.ComponentProps<typeof ProtocolAnalysisFailure>> = {}
+  props: Partial<ComponentProps<typeof ProtocolAnalysisFailure>> = {}
 ) => {
   return renderWithProviders(
     <MemoryRouter>
diff --git a/app/src/organisms/Desktop/ProtocolDetails/ProtocolParameters/__tests__/ProtocolParameters.test.tsx b/app/src/organisms/Desktop/ProtocolDetails/ProtocolParameters/__tests__/ProtocolParameters.test.tsx
index e52803cc054..78f8184f7a1 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/ProtocolParameters/__tests__/ProtocolParameters.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/ProtocolParameters/__tests__/ProtocolParameters.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ProtocolParameters } from '..'
 
+import type { ComponentProps } from 'react'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 import type * as Components from '@opentrons/components'
 
@@ -80,14 +80,14 @@ const mockRunTimeParameter: RunTimeParameter[] = [
   },
 ]
 
-const render = (props: React.ComponentProps<typeof ProtocolParameters>) => {
+const render = (props: ComponentProps<typeof ProtocolParameters>) => {
   return renderWithProviders(<ProtocolParameters {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ProtocolParameters', () => {
-  let props: React.ComponentProps<typeof ProtocolParameters>
+  let props: ComponentProps<typeof ProtocolParameters>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolDetails.test.tsx b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolDetails.test.tsx
index f613c108b77..e9a75149199 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolDetails.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { act, screen, waitFor } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, beforeEach, vi, expect, afterEach } from 'vitest'
@@ -26,6 +25,7 @@ import {
 import { storedProtocolData } from '/app/redux/protocol-storage/__fixtures__'
 import { ProtocolDetails } from '..'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'
 
@@ -37,7 +37,7 @@ vi.mock('/app/organisms/Desktop/ChooseRobotToRunProtocolSlideout')
 vi.mock('/app/organisms/Desktop/SendProtocolToFlexSlideout')
 
 const render = (
-  props: Partial<React.ComponentProps<typeof ProtocolDetails>> = {}
+  props: Partial<ComponentProps<typeof ProtocolDetails>> = {}
 ) => {
   return renderWithProviders(
     <MemoryRouter>
diff --git a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx
index 93c215643cf..bc25bcb5569 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx
@@ -1,10 +1,10 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ProtocolLabwareDetails } from '../ProtocolLabwareDetails'
 
+import type { ComponentProps } from 'react'
 import type { LoadLabwareRunTimeCommand } from '@opentrons/shared-data'
 import type { InfoScreen } from '@opentrons/components'
 
@@ -67,14 +67,14 @@ const mockRequiredLabwareDetails = [
   } as LoadLabwareRunTimeCommand,
 ]
 
-const render = (props: React.ComponentProps<typeof ProtocolLabwareDetails>) => {
+const render = (props: ComponentProps<typeof ProtocolLabwareDetails>) => {
   return renderWithProviders(<ProtocolLabwareDetails {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ProtocolLabwareDetails', () => {
-  let props: React.ComponentProps<typeof ProtocolLabwareDetails>
+  let props: ComponentProps<typeof ProtocolLabwareDetails>
   beforeEach(() => {
     props = {
       requiredLabwareDetails: mockRequiredLabwareDetails,
diff --git a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLiquidsDetails.test.tsx b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLiquidsDetails.test.tsx
index 69e55cc1097..9a6f233b312 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLiquidsDetails.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLiquidsDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { parseLiquidsInLoadOrder } from '@opentrons/shared-data'
@@ -7,6 +6,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ProtocolLiquidsDetails } from '../ProtocolLiquidsDetails'
 
+import type { ComponentProps } from 'react'
 import type * as SharedData from '@opentrons/shared-data'
 
 vi.mock('../../Desktop/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList')
@@ -18,14 +18,14 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ProtocolLiquidsDetails>) => {
+const render = (props: ComponentProps<typeof ProtocolLiquidsDetails>) => {
   return renderWithProviders(<ProtocolLiquidsDetails {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ProtocolLiquidsDetails', () => {
-  let props: React.ComponentProps<typeof ProtocolLiquidsDetails>
+  let props: ComponentProps<typeof ProtocolLiquidsDetails>
   beforeEach(() => {
     props = {
       commands: [],
diff --git a/app/src/organisms/Desktop/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx b/app/src/organisms/Desktop/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx
index b823732ce95..65ce7d6d24d 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, afterEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -7,6 +6,8 @@ import { OT2_STANDARD_MODEL, FLEX_STANDARD_MODEL } from '@opentrons/shared-data'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { RobotConfigurationDetails } from '../RobotConfigurationDetails'
+
+import type { ComponentProps } from 'react'
 import type { LoadModuleRunTimeCommand } from '@opentrons/shared-data'
 
 const mockRequiredModuleDetails = [
@@ -57,16 +58,14 @@ const mockRequiredModuleDetails = [
   } as LoadModuleRunTimeCommand,
 ]
 
-const render = (
-  props: React.ComponentProps<typeof RobotConfigurationDetails>
-) => {
+const render = (props: ComponentProps<typeof RobotConfigurationDetails>) => {
   return renderWithProviders(<RobotConfigurationDetails {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RobotConfigurationDetails', () => {
-  let props: React.ComponentProps<typeof RobotConfigurationDetails>
+  let props: ComponentProps<typeof RobotConfigurationDetails>
 
   afterEach(() => {
     vi.clearAllMocks()
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx b/app/src/organisms/Desktop/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx
index 14d75238bcc..439d48a9f0d 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   AlertPrimaryButton,
@@ -14,9 +13,11 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { MouseEventHandler } from 'react'
+
 interface ConfirmDeleteProtocolModalProps {
-  cancelDeleteProtocol: React.MouseEventHandler<HTMLAnchorElement> | undefined
-  handleClickDelete: React.MouseEventHandler<HTMLButtonElement>
+  cancelDeleteProtocol: MouseEventHandler<HTMLAnchorElement> | undefined
+  handleClickDelete: MouseEventHandler<HTMLButtonElement>
 }
 
 export function ConfirmDeleteProtocolModal(
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/ProtocolOverflowMenu.tsx b/app/src/organisms/Desktop/ProtocolsLanding/ProtocolOverflowMenu.tsx
index 0bcc71f8cc0..eacddbdaca3 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/ProtocolOverflowMenu.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/ProtocolOverflowMenu.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
@@ -35,6 +34,7 @@ import {
 } from '/app/redux/protocol-storage'
 import { ConfirmDeleteProtocolModal } from './ConfirmDeleteProtocolModal'
 
+import type { MouseEvent, MouseEventHandler } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { StoredProtocolData } from '/app/redux/protocol-storage'
 import type { Dispatch } from '/app/redux/types'
@@ -77,13 +77,13 @@ export function ProtocolOverflowMenu(
   const robotType =
     mostRecentAnalysis != null ? mostRecentAnalysis?.robotType ?? null : null
 
-  const handleClickShowInFolder: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickShowInFolder: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     dispatch(viewProtocolSourceFolder(protocolKey))
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickRun: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickRun: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     trackEvent({
@@ -93,25 +93,25 @@ export function ProtocolOverflowMenu(
     handleRunProtocol(storedProtocolData)
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickSendToOT3: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickSendToOT3: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     handleSendProtocolToFlex(storedProtocolData)
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickDelete: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickDelete: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     confirmDeleteProtocol()
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickReanalyze: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickReanalyze: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     dispatch(analyzeProtocol(protocolKey))
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickTimeline: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickTimeline: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     navigate(`/protocols/${protocolKey}/timeline`)
     setShowOverflowMenu(prevShowOverflowMenu => !prevShowOverflowMenu)
@@ -121,7 +121,7 @@ export function ProtocolOverflowMenu(
     <Flex
       flexDirection={DIRECTION_COLUMN}
       position={POSITION_RELATIVE}
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.stopPropagation()
       }}
     >
@@ -195,7 +195,7 @@ export function ProtocolOverflowMenu(
       {showDeleteConfirmation
         ? createPortal(
             <ConfirmDeleteProtocolModal
-              cancelDeleteProtocol={(e: React.MouseEvent) => {
+              cancelDeleteProtocol={(e: MouseEvent) => {
                 e.preventDefault()
                 e.stopPropagation()
                 cancelDeleteProtocol()
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ConfirmDeleteProtocolModal.test.tsx b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ConfirmDeleteProtocolModal.test.tsx
index dd19a80d133..8d040851a56 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ConfirmDeleteProtocolModal.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ConfirmDeleteProtocolModal.test.tsx
@@ -1,20 +1,19 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmDeleteProtocolModal } from '../ConfirmDeleteProtocolModal'
 
-const render = (
-  props: React.ComponentProps<typeof ConfirmDeleteProtocolModal>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConfirmDeleteProtocolModal>) => {
   return renderWithProviders(<ConfirmDeleteProtocolModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ConfirmDeleteProtocolModal', () => {
-  let props: React.ComponentProps<typeof ConfirmDeleteProtocolModal>
+  let props: ComponentProps<typeof ConfirmDeleteProtocolModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ProtocolList.test.tsx b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ProtocolList.test.tsx
index 59271bc279c..6f3190712c4 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ProtocolList.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ProtocolList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
@@ -16,13 +15,15 @@ import { useSortedProtocols } from '../hooks'
 import { EmptyStateLinks } from '../EmptyStateLinks'
 import { ProtocolCard } from '../ProtocolCard'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../hooks')
 vi.mock('/app/redux/protocol-storage')
 vi.mock('/app/redux/config')
 vi.mock('../EmptyStateLinks')
 vi.mock('../ProtocolCard')
 
-const render = (props: React.ComponentProps<typeof ProtocolList>) => {
+const render = (props: ComponentProps<typeof ProtocolList>) => {
   return renderWithProviders(
     <BrowserRouter>
       <ProtocolList {...props} />
@@ -34,7 +35,7 @@ const render = (props: React.ComponentProps<typeof ProtocolList>) => {
 }
 
 describe('ProtocolList', () => {
-  let props: React.ComponentProps<typeof ProtocolList>
+  let props: ComponentProps<typeof ProtocolList>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/hooks.test.tsx b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/hooks.test.tsx
index 5d1485fe795..0c10c8fb1ef 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/hooks.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import { renderHook } from '@testing-library/react'
@@ -8,6 +7,7 @@ import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 
 import { useSortedProtocols } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'
 import type { StoredProtocolData } from '/app/redux/protocol-storage'
@@ -294,7 +294,7 @@ describe('useSortedProtocols', () => {
   })
 
   it('should return an object with protocols sorted alphabetically', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -318,7 +318,7 @@ describe('useSortedProtocols', () => {
   })
 
   it('should return an object with protocols sorted reverse alphabetically', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -342,7 +342,7 @@ describe('useSortedProtocols', () => {
   })
 
   it('should return an object with protocols sorted by most recent modified data', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -366,7 +366,7 @@ describe('useSortedProtocols', () => {
   })
 
   it('should return an object with protocols sorted by oldest modified data', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -390,7 +390,7 @@ describe('useSortedProtocols', () => {
   })
 
   it('should return an object with protocols sorted by flex then ot-2', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -413,7 +413,7 @@ describe('useSortedProtocols', () => {
     )
   })
   it('should return an object with protocols sorted by ot-2 then flex', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDataDownload.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDataDownload.tsx
index 83aeddf3e35..47058491684 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDataDownload.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDataDownload.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { saveAs } from 'file-saver'
 import { useTranslation, Trans } from 'react-i18next'
 
@@ -32,6 +31,8 @@ import {
 import { useRobot, useIsFlex } from '/app/redux-resources/robots'
 import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstopNotDisengaged'
 
+import type { MouseEventHandler } from 'react'
+
 // TODO(bc, 2022-02-08): replace with support article when available
 const FLEX_CALIBRATION_SUPPORT_URL = 'https://support.opentrons.com'
 
@@ -70,7 +71,7 @@ export function CalibrationDataDownload({
     tipLengthCalibrations != null &&
     tipLengthCalibrations.length > 0
 
-  const onClickSaveAs: React.MouseEventHandler = e => {
+  const onClickSaveAs: MouseEventHandler = e => {
     e.preventDefault()
     doTrackEvent({
       name: ANALYTICS_CALIBRATION_DATA_DOWNLOADED,
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationItems.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationItems.test.tsx
index 8cb0dd62dc6..ee0529a1c4e 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationItems.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationItems.test.tsx
@@ -1,6 +1,6 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ABSORBANCE_READER_TYPE } from '@opentrons/shared-data'
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { mockFetchModulesSuccessActionPayloadModules } from '/app/redux/modules/__fixtures__'
@@ -8,8 +8,8 @@ import { ModuleCalibrationOverflowMenu } from '../ModuleCalibrationOverflowMenu'
 import { formatLastCalibrated } from '../utils'
 import { ModuleCalibrationItems } from '../ModuleCalibrationItems'
 
+import type { ComponentProps } from 'react'
 import type { AttachedModule } from '@opentrons/api-client'
-import { ABSORBANCE_READER_TYPE } from '@opentrons/shared-data'
 
 vi.mock('../ModuleCalibrationOverflowMenu')
 
@@ -55,7 +55,7 @@ const mockCalibratedModule = {
 const ROBOT_NAME = 'mockRobot'
 
 const render = (
-  props: React.ComponentProps<typeof ModuleCalibrationItems>
+  props: ComponentProps<typeof ModuleCalibrationItems>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<ModuleCalibrationItems {...props} />, {
     i18nInstance: i18n,
@@ -63,7 +63,7 @@ const render = (
 }
 
 describe('ModuleCalibrationItems', () => {
-  let props: React.ComponentProps<typeof ModuleCalibrationItems>
+  let props: ComponentProps<typeof ModuleCalibrationItems>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx
index 47b5dbec249..2807269794b 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -11,6 +10,7 @@ import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstop
 
 import { ModuleCalibrationOverflowMenu } from '../ModuleCalibrationOverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { Mount } from '@opentrons/components'
 
 vi.mock('@opentrons/react-api-client')
@@ -87,7 +87,7 @@ const mockTCHeating = {
 } as any
 
 const render = (
-  props: React.ComponentProps<typeof ModuleCalibrationOverflowMenu>
+  props: ComponentProps<typeof ModuleCalibrationOverflowMenu>
 ) => {
   return renderWithProviders(<ModuleCalibrationOverflowMenu {...props} />, {
     i18nInstance: i18n,
@@ -97,7 +97,7 @@ const render = (
 const ROBOT_NAME = 'mockRobot'
 
 describe('ModuleCalibrationOverflowMenu', () => {
-  let props: React.ComponentProps<typeof ModuleCalibrationOverflowMenu>
+  let props: ComponentProps<typeof ModuleCalibrationOverflowMenu>
   let mockChainLiveCommands = vi.fn()
 
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/OverflowMenu.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/OverflowMenu.test.tsx
index a0d2ff20096..cf106ccc6b3 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/OverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/OverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import '@testing-library/jest-dom/vitest'
@@ -26,10 +25,11 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { useIsEstopNotDisengaged } from '/app/resources/devices'
 import { OverflowMenu } from '../OverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { Mount } from '@opentrons/components'
 
 const render = (
-  props: React.ComponentProps<typeof OverflowMenu>
+  props: ComponentProps<typeof OverflowMenu>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<OverflowMenu {...props} />, {
     i18nInstance: i18n,
@@ -81,7 +81,7 @@ const RUN_STATUSES = {
 const mockUpdateRobotStatus = vi.fn()
 
 describe('OverflowMenu', () => {
-  let props: React.ComponentProps<typeof OverflowMenu>
+  let props: ComponentProps<typeof OverflowMenu>
   const mockDeleteCalibration = vi.fn()
 
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/PipetteOffsetCalibrationItems.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/PipetteOffsetCalibrationItems.test.tsx
index 2a6cf82726f..bca259d41c5 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/PipetteOffsetCalibrationItems.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/PipetteOffsetCalibrationItems.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -19,11 +18,12 @@ import { PipetteOffsetCalibrationItems } from '../PipetteOffsetCalibrationItems'
 import { OverflowMenu } from '../OverflowMenu'
 import { formatLastCalibrated } from '../utils'
 
+import type { ComponentProps } from 'react'
 import type { Mount } from '@opentrons/components'
 import type { AttachedPipettesByMount } from '/app/redux/pipettes/types'
 
 const render = (
-  props: React.ComponentProps<typeof PipetteOffsetCalibrationItems>
+  props: ComponentProps<typeof PipetteOffsetCalibrationItems>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<PipetteOffsetCalibrationItems {...props} />, {
     i18nInstance: i18n,
@@ -73,7 +73,7 @@ const mockAttachedPipettes: AttachedPipettesByMount = {
 const mockUpdateRobotStatus = vi.fn()
 
 describe('PipetteOffsetCalibrationItems', () => {
-  let props: React.ComponentProps<typeof PipetteOffsetCalibrationItems>
+  let props: ComponentProps<typeof PipetteOffsetCalibrationItems>
 
   beforeEach(() => {
     vi.mocked(useAttachedPipettesFromInstrumentsQuery).mockReturnValue({
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/TipLengthCalibrationItems.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/TipLengthCalibrationItems.test.tsx
index 014ec28ee2c..19270615a06 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/TipLengthCalibrationItems.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/TipLengthCalibrationItems.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,6 +5,8 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { TipLengthCalibrationItems } from '../TipLengthCalibrationItems'
 import { OverflowMenu } from '../OverflowMenu'
+
+import type { ComponentProps } from 'react'
 import type { Mount } from '@opentrons/components'
 
 vi.mock('/app/redux/custom-labware/selectors')
@@ -54,14 +55,14 @@ const mockTipLengthCalibrations = [
 const mockUpdateRobotStatus = vi.fn()
 
 const render = (
-  props: React.ComponentProps<typeof TipLengthCalibrationItems>
+  props: ComponentProps<typeof TipLengthCalibrationItems>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<TipLengthCalibrationItems {...props} />, {
     i18nInstance: i18n,
   })
 }
 describe('TipLengthCalibrationItems', () => {
-  let props: React.ComponentProps<typeof TipLengthCalibrationItems>
+  let props: ComponentProps<typeof TipLengthCalibrationItems>
 
   beforeEach(() => {
     vi.mocked(OverflowMenu).mockReturnValue(<div>mock overflow menu</div>)
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx
index ee965c9d042..c434f6c1392 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import userEvent from '@testing-library/user-event'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -20,14 +19,13 @@ import {
 } from '/app/redux/calibration/tip-length/__fixtures__'
 import { mockAttachedPipette } from '/app/redux/pipettes/__fixtures__'
 import { useRunStatuses } from '/app/resources/runs'
-
 import {
   useAttachedPipettes,
   useAttachedPipetteCalibrations,
 } from '/app/resources/instruments'
-
 import { CalibrationHealthCheck } from '../CalibrationHealthCheck'
 
+import type { ComponentProps } from 'react'
 import type {
   AttachedPipettesByMount,
   PipetteCalibrationsByMount,
@@ -66,7 +64,7 @@ let mockTrackEvent: any
 const mockDispatchRequests = vi.fn()
 
 const render = (
-  props?: Partial<React.ComponentProps<typeof CalibrationHealthCheck>>
+  props?: Partial<ComponentProps<typeof CalibrationHealthCheck>>
 ) => {
   return renderWithProviders(
     <CalibrationHealthCheck
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsDeckCalibration.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsDeckCalibration.test.tsx
index 2c46916fc3c..8c7b4951054 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsDeckCalibration.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsDeckCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 
@@ -17,6 +16,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { RobotSettingsDeckCalibration } from '../RobotSettingsDeckCalibration'
 
+import type { ComponentProps } from 'react'
 import type { AttachedPipettesByMount } from '/app/redux/pipettes/types'
 
 vi.mock('../..//CalibrationStatusCard')
@@ -31,7 +31,7 @@ const mockAttachedPipettes: AttachedPipettesByMount = {
 } as any
 
 const render = (
-  props?: Partial<React.ComponentProps<typeof RobotSettingsDeckCalibration>>
+  props?: Partial<ComponentProps<typeof RobotSettingsDeckCalibration>>
 ) => {
   return renderWithProviders(
     <RobotSettingsDeckCalibration robotName="otie" {...props} />,
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsGripperCalibration.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsGripperCalibration.test.tsx
index e4a4d48eea1..ff0570443d1 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsGripperCalibration.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsGripperCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -10,6 +9,7 @@ import { formatLastCalibrated } from '../CalibrationDetails/utils'
 import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstopNotDisengaged'
 import { RobotSettingsGripperCalibration } from '../RobotSettingsGripperCalibration'
 
+import type { ComponentProps } from 'react'
 import type { GripperData } from '@opentrons/api-client'
 
 vi.mock('/app/organisms/GripperWizardFlows')
@@ -35,7 +35,7 @@ const mockNotCalibratedGripper = {
 const ROBOT_NAME = 'mockRobot'
 
 const render = (
-  props: React.ComponentProps<typeof RobotSettingsGripperCalibration>
+  props: ComponentProps<typeof RobotSettingsGripperCalibration>
 ) => {
   return renderWithProviders(<RobotSettingsGripperCalibration {...props} />, {
     i18nInstance: i18n,
@@ -43,7 +43,7 @@ const render = (
 }
 
 describe('RobotSettingsGripperCalibration', () => {
-  let props: React.ComponentProps<typeof RobotSettingsGripperCalibration>
+  let props: ComponentProps<typeof RobotSettingsGripperCalibration>
   beforeEach(() => {
     vi.mocked(formatLastCalibrated).mockReturnValue('last calibrated 1/2/3')
     vi.mocked(GripperWizardFlows).mockReturnValue(<>Mock Wizard Flow</>)
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsModuleCalibration.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsModuleCalibration.test.tsx
index 95b71a450af..63d5014da79 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsModuleCalibration.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsModuleCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { i18n } from '/app/i18n'
@@ -7,10 +6,12 @@ import { mockFetchModulesSuccessActionPayloadModules } from '/app/redux/modules/
 import { RobotSettingsModuleCalibration } from '../RobotSettingsModuleCalibration'
 import { ModuleCalibrationItems } from '../CalibrationDetails/ModuleCalibrationItems'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../CalibrationDetails/ModuleCalibrationItems')
 
 const render = (
-  props: React.ComponentProps<typeof RobotSettingsModuleCalibration>
+  props: ComponentProps<typeof RobotSettingsModuleCalibration>
 ) => {
   return renderWithProviders(<RobotSettingsModuleCalibration {...props} />, {
     i18nInstance: i18n,
@@ -20,7 +21,7 @@ const render = (
 const ROBOT_NAME = 'mockRobot'
 
 describe('RobotSettingsModuleCalibration', () => {
-  let props: React.ComponentProps<typeof RobotSettingsModuleCalibration>
+  let props: ComponentProps<typeof RobotSettingsModuleCalibration>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx
index 0f628dddfef..6b883499831 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -18,6 +17,7 @@ import { useIsFlex } from '/app/redux-resources/robots'
 import { RobotSettingsPipetteOffsetCalibration } from '../RobotSettingsPipetteOffsetCalibration'
 import { PipetteOffsetCalibrationItems } from '../CalibrationDetails/PipetteOffsetCalibrationItems'
 
+import type { ComponentProps } from 'react'
 import type { FormattedPipetteOffsetCalibration } from '..'
 
 vi.mock('/app/organisms/Desktop/Devices/hooks')
@@ -29,9 +29,7 @@ const mockFormattedPipetteOffsetCalibrations: FormattedPipetteOffsetCalibration[
 const mockUpdateRobotStatus = vi.fn()
 
 const render = (
-  props?: Partial<
-    React.ComponentProps<typeof RobotSettingsPipetteOffsetCalibration>
-  >
+  props?: Partial<ComponentProps<typeof RobotSettingsPipetteOffsetCalibration>>
 ) => {
   return renderWithProviders(
     <RobotSettingsPipetteOffsetCalibration
diff --git a/app/src/organisms/Desktop/RunProgressMeter/__tests__/InterventionTicks.test.tsx b/app/src/organisms/Desktop/RunProgressMeter/__tests__/InterventionTicks.test.tsx
index c6562476818..b9ae7cd3c01 100644
--- a/app/src/organisms/Desktop/RunProgressMeter/__tests__/InterventionTicks.test.tsx
+++ b/app/src/organisms/Desktop/RunProgressMeter/__tests__/InterventionTicks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -7,16 +6,18 @@ import { i18n } from '/app/i18n'
 import { InterventionTicks } from '../InterventionTicks'
 import { Tick } from '../Tick'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../Tick')
 
-const render = (props: React.ComponentProps<typeof InterventionTicks>) => {
+const render = (props: ComponentProps<typeof InterventionTicks>) => {
   return renderWithProviders(<InterventionTicks {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InterventionTicks', () => {
-  let props: React.ComponentProps<typeof InterventionTicks>
+  let props: ComponentProps<typeof InterventionTicks>
   beforeEach(() => {
     vi.mocked(Tick).mockImplementation(({ index }) => (
       <div>MOCK TICK at index: {index}</div>
diff --git a/app/src/organisms/Desktop/RunProgressMeter/__tests__/RunProgressMeter.test.tsx b/app/src/organisms/Desktop/RunProgressMeter/__tests__/RunProgressMeter.test.tsx
index 928bd2572a9..469c056c087 100644
--- a/app/src/organisms/Desktop/RunProgressMeter/__tests__/RunProgressMeter.test.tsx
+++ b/app/src/organisms/Desktop/RunProgressMeter/__tests__/RunProgressMeter.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -37,6 +36,7 @@ import { RunProgressMeter } from '..'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { useRunningStepCounts } from '/app/resources/protocols/hooks'
 
+import type { ComponentProps } from 'react'
 import type { RunCommandSummary } from '@opentrons/api-client'
 import type * as ApiClient from '@opentrons/react-api-client'
 
@@ -55,7 +55,7 @@ vi.mock('../../Devices/hooks')
 vi.mock('/app/resources/protocols/hooks')
 vi.mock('/app/redux-resources/robots')
 
-const render = (props: React.ComponentProps<typeof RunProgressMeter>) => {
+const render = (props: ComponentProps<typeof RunProgressMeter>) => {
   return renderWithProviders(<RunProgressMeter {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -65,7 +65,7 @@ const NON_DETERMINISTIC_RUN_ID = 'nonDeterministicID'
 const ROBOT_NAME = 'otie'
 
 describe('RunProgressMeter', () => {
-  let props: React.ComponentProps<typeof RunProgressMeter>
+  let props: ComponentProps<typeof RunProgressMeter>
   beforeEach(() => {
     vi.mocked(ProgressBar).mockReturnValue(<div>MOCK PROGRESS BAR</div>)
     vi.mocked(InterventionModal).mockReturnValue(
diff --git a/app/src/organisms/Desktop/RunProgressMeter/hooks/useRunProgressCopy.tsx b/app/src/organisms/Desktop/RunProgressMeter/hooks/useRunProgressCopy.tsx
index 65e2f27d6b3..aaa90997167 100644
--- a/app/src/organisms/Desktop/RunProgressMeter/hooks/useRunProgressCopy.tsx
+++ b/app/src/organisms/Desktop/RunProgressMeter/hooks/useRunProgressCopy.tsx
@@ -4,7 +4,6 @@ import {
   RUN_STATUS_BLOCKED_BY_OPEN_DOOR,
   RUN_STATUS_IDLE,
 } from '@opentrons/api-client'
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { getCommandTextData } from '/app/local-resources/commands'
@@ -13,6 +12,7 @@ import { LegacyStyledText } from '@opentrons/components'
 import { CommandText } from '/app/molecules/Command'
 import { TERMINAL_RUN_STATUSES } from '../constants'
 
+import type { ReactNode } from 'react'
 import type { CommandDetail, RunStatus } from '@opentrons/api-client'
 import type {
   CompletedProtocolAnalysis,
@@ -21,7 +21,7 @@ import type {
 } from '@opentrons/shared-data'
 
 interface UseRunProgressResult {
-  currentStepContents: React.ReactNode
+  currentStepContents: ReactNode
   stepCountStr: string | null
   progressPercentage: number
 }
diff --git a/app/src/organisms/Desktop/RunProgressMeter/index.tsx b/app/src/organisms/Desktop/RunProgressMeter/index.tsx
index fb158f5d686..ecf38cd31f6 100644
--- a/app/src/organisms/Desktop/RunProgressMeter/index.tsx
+++ b/app/src/organisms/Desktop/RunProgressMeter/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
@@ -49,6 +48,8 @@ import { useRobotType } from '/app/redux-resources/robots'
 import { useRunningStepCounts } from '/app/resources/protocols/hooks'
 import { useRunProgressCopy } from './hooks'
 
+import type { MouseEventHandler } from 'react'
+
 interface RunProgressMeterProps {
   runId: string
   robotName: string
@@ -92,7 +93,7 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element {
 
   const { downloadRunLog } = useDownloadRunLog(robotName, runId)
 
-  const onDownloadClick: React.MouseEventHandler<HTMLAnchorElement> = e => {
+  const onDownloadClick: MouseEventHandler<HTMLAnchorElement> = e => {
     if (downloadIsDisabled) return false
     e.preventDefault()
     e.stopPropagation()
diff --git a/app/src/organisms/Desktop/SendProtocolToFlexSlideout/__tests__/SendProtocolToFlexSlideout.test.tsx b/app/src/organisms/Desktop/SendProtocolToFlexSlideout/__tests__/SendProtocolToFlexSlideout.test.tsx
index 5ed8f96fb1a..08e60f84729 100644
--- a/app/src/organisms/Desktop/SendProtocolToFlexSlideout/__tests__/SendProtocolToFlexSlideout.test.tsx
+++ b/app/src/organisms/Desktop/SendProtocolToFlexSlideout/__tests__/SendProtocolToFlexSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -36,6 +35,7 @@ import { storedProtocolData as storedProtocolDataFixture } from '/app/redux/prot
 import { SendProtocolToFlexSlideout } from '..'
 import { useNotifyAllRunsQuery } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type * as ApiClient from '@opentrons/react-api-client'
 
 vi.mock('@opentrons/react-api-client', async importOriginal => {
@@ -53,9 +53,7 @@ vi.mock('/app/redux/custom-labware')
 vi.mock('/app/redux/protocol-storage/selectors')
 vi.mock('/app/resources/runs')
 
-const render = (
-  props: React.ComponentProps<typeof SendProtocolToFlexSlideout>
-) => {
+const render = (props: ComponentProps<typeof SendProtocolToFlexSlideout>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SendProtocolToFlexSlideout {...props} />
diff --git a/app/src/organisms/Desktop/UpdateAppModal/__tests__/UpdateAppModal.test.tsx b/app/src/organisms/Desktop/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
index 3131bee25a3..4469abc159a 100644
--- a/app/src/organisms/Desktop/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
+++ b/app/src/organisms/Desktop/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen, fireEvent } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -9,10 +8,11 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { useRemoveActiveAppUpdateToast } from '../../Alerts'
 import { UpdateAppModal, RELEASE_NOTES_URL_BASE } from '..'
 
+import type { ComponentProps } from 'react'
+import type * as Dom from 'react-router-dom'
 import type { State } from '/app/redux/types'
 import type { ShellUpdateState } from '/app/redux/shell/types'
 import type * as ShellState from '/app/redux/shell'
-import type * as Dom from 'react-router-dom'
 import type { UpdateAppModalProps } from '..'
 
 vi.mock('/app/redux/shell/update', async importOriginal => {
@@ -35,7 +35,7 @@ vi.mock('../../Alerts')
 
 const getShellUpdateState = Shell.getShellUpdateState
 
-const render = (props: React.ComponentProps<typeof UpdateAppModal>) => {
+const render = (props: ComponentProps<typeof UpdateAppModal>) => {
   return renderWithProviders(<UpdateAppModal {...props} />, {
     i18nInstance: i18n,
     initialState: {
@@ -45,7 +45,7 @@ const render = (props: React.ComponentProps<typeof UpdateAppModal>) => {
 }
 
 describe('UpdateAppModal', () => {
-  let props: React.ComponentProps<typeof UpdateAppModal>
+  let props: ComponentProps<typeof UpdateAppModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx b/app/src/organisms/Desktop/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx
index e7d90f70ea3..e1b67d7c9dc 100644
--- a/app/src/organisms/Desktop/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx
+++ b/app/src/organisms/Desktop/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -12,19 +11,21 @@ import {
 import { handleUpdateBuildroot } from '../../Devices/RobotSettings/UpdateBuildroot'
 import { UpdateRobotBanner } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/robot-update')
 vi.mock('../../Devices/RobotSettings/UpdateBuildroot')
 
 const getUpdateDisplayInfo = Buildroot.getRobotUpdateDisplayInfo
 
-const render = (props: React.ComponentProps<typeof UpdateRobotBanner>) => {
+const render = (props: ComponentProps<typeof UpdateRobotBanner>) => {
   return renderWithProviders(<UpdateRobotBanner {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('UpdateRobotBanner', () => {
-  let props: React.ComponentProps<typeof UpdateRobotBanner>
+  let props: ComponentProps<typeof UpdateRobotBanner>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/UpdateRobotBanner/index.tsx b/app/src/organisms/Desktop/UpdateRobotBanner/index.tsx
index e5d7d2d0e85..390f4bc3ac1 100644
--- a/app/src/organisms/Desktop/UpdateRobotBanner/index.tsx
+++ b/app/src/organisms/Desktop/UpdateRobotBanner/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
@@ -13,6 +12,7 @@ import {
 import { getRobotUpdateDisplayInfo } from '/app/redux/robot-update'
 import { handleUpdateBuildroot } from '../Devices/RobotSettings/UpdateBuildroot'
 
+import type { MouseEvent } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { State } from '/app/redux/types'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
@@ -35,7 +35,7 @@ export function UpdateRobotBanner(
     robot !== null &&
     robot.healthStatus === 'ok' ? (
     <Flex
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.stopPropagation()
       }}
       flexDirection={DIRECTION_COLUMN}
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx
index 450a64cc0e6..955c9e0f86b 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect, afterEach } from 'vitest'
 
@@ -16,6 +15,7 @@ import { i18n } from '/app/i18n'
 import { AddFixtureModal } from '../AddFixtureModal'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { DeckConfiguration } from '@opentrons/shared-data'
 import type { Modules } from '@opentrons/api-client'
@@ -26,14 +26,14 @@ vi.mock('/app/resources/deck_configuration')
 const mockCloseModal = vi.fn()
 const mockUpdateDeckConfiguration = vi.fn()
 
-const render = (props: React.ComponentProps<typeof AddFixtureModal>) => {
+const render = (props: ComponentProps<typeof AddFixtureModal>) => {
   return renderWithProviders(<AddFixtureModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Touchscreen AddFixtureModal', () => {
-  let props: React.ComponentProps<typeof AddFixtureModal>
+  let props: ComponentProps<typeof AddFixtureModal>
 
   beforeEach(() => {
     props = {
@@ -88,7 +88,7 @@ describe('Touchscreen AddFixtureModal', () => {
 })
 
 describe('Desktop AddFixtureModal', () => {
-  let props: React.ComponentProps<typeof AddFixtureModal>
+  let props: ComponentProps<typeof AddFixtureModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckConfigurationDiscardChangesModal.test.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckConfigurationDiscardChangesModal.test.tsx
index fd0e56ffa4d..b0b213170dc 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckConfigurationDiscardChangesModal.test.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckConfigurationDiscardChangesModal.test.tsx
@@ -1,10 +1,11 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { DeckConfigurationDiscardChangesModal } from '../DeckConfigurationDiscardChangesModal'
+
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockFunc = vi.fn()
@@ -19,7 +20,7 @@ vi.mock('react-router-dom', async importOriginal => {
 })
 
 const render = (
-  props: React.ComponentProps<typeof DeckConfigurationDiscardChangesModal>
+  props: ComponentProps<typeof DeckConfigurationDiscardChangesModal>
 ) => {
   return renderWithProviders(
     <DeckConfigurationDiscardChangesModal {...props} />,
@@ -30,7 +31,7 @@ const render = (
 }
 
 describe('DeckConfigurationDiscardChangesModal', () => {
-  let props: React.ComponentProps<typeof DeckConfigurationDiscardChangesModal>
+  let props: ComponentProps<typeof DeckConfigurationDiscardChangesModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx
index ddc9ff33194..bfd218f5e97 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -6,12 +5,14 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { DeckFixtureSetupInstructionsModal } from '../DeckFixtureSetupInstructionsModal'
 
+import type { ComponentProps } from 'react'
+
 const mockFunc = vi.fn()
 const PNG_FILE_NAME =
   '/app/src/assets/images/on-device-display/deck_fixture_setup_qrcode.png'
 
 const render = (
-  props: React.ComponentProps<typeof DeckFixtureSetupInstructionsModal>
+  props: ComponentProps<typeof DeckFixtureSetupInstructionsModal>
 ) => {
   return renderWithProviders(<DeckFixtureSetupInstructionsModal {...props} />, {
     i18nInstance: i18n,
@@ -19,7 +20,7 @@ const render = (
 }
 
 describe('Touchscreen DeckFixtureSetupInstructionsModal', () => {
-  let props: React.ComponentProps<typeof DeckFixtureSetupInstructionsModal>
+  let props: ComponentProps<typeof DeckFixtureSetupInstructionsModal>
 
   beforeEach(() => {
     props = {
@@ -49,7 +50,7 @@ describe('Touchscreen DeckFixtureSetupInstructionsModal', () => {
 })
 
 describe('Desktop DeckFixtureSetupInstructionsModal', () => {
-  let props: React.ComponentProps<typeof DeckFixtureSetupInstructionsModal>
+  let props: ComponentProps<typeof DeckFixtureSetupInstructionsModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx
index 16ef3db90a7..409f0d3f452 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, afterEach } from 'vitest'
@@ -23,6 +22,7 @@ import {
   useNotifyDeckConfigurationQuery,
 } from '/app/resources/deck_configuration'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { MaintenanceRun } from '@opentrons/api-client'
 import type { DeckConfiguration } from '@opentrons/shared-data'
@@ -62,7 +62,7 @@ const mockCurrnetMaintenanceRun = {
 } as MaintenanceRun
 
 const render = (
-  props: React.ComponentProps<typeof DeviceDetailsDeckConfiguration>
+  props: ComponentProps<typeof DeviceDetailsDeckConfiguration>
 ) => {
   return renderWithProviders(<DeviceDetailsDeckConfiguration {...props} />, {
     i18nInstance: i18n,
@@ -70,7 +70,7 @@ const render = (
 }
 
 describe('DeviceDetailsDeckConfiguration', () => {
-  let props: React.ComponentProps<typeof DeviceDetailsDeckConfiguration>
+  let props: ComponentProps<typeof DeviceDetailsDeckConfiguration>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizard.test.tsx b/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizard.test.tsx
index d1108fc3c18..9ea6a6f2363 100644
--- a/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizard.test.tsx
+++ b/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -31,6 +30,8 @@ import {
   CONFIRM_POSITION,
 } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/InProgressModal')
 vi.mock('../ExitConfirmation')
 vi.mock('../steps')
@@ -38,7 +39,7 @@ vi.mock('../ErrorInfo')
 vi.mock('../DropTipWizardHeader')
 
 const renderDropTipWizardContainer = (
-  props: React.ComponentProps<typeof DropTipWizardContainer>
+  props: ComponentProps<typeof DropTipWizardContainer>
 ) => {
   return renderWithProviders(<DropTipWizardContainer {...props} />, {
     i18nInstance: i18n,
@@ -46,7 +47,7 @@ const renderDropTipWizardContainer = (
 }
 
 describe('DropTipWizardContainer', () => {
-  let props: React.ComponentProps<typeof DropTipWizardContainer>
+  let props: ComponentProps<typeof DropTipWizardContainer>
 
   beforeEach(() => {
     props = mockDropTipWizardContainerProps
@@ -75,7 +76,7 @@ describe('DropTipWizardContainer', () => {
 })
 
 const renderDropTipWizardContent = (
-  props: React.ComponentProps<typeof DropTipWizardContent>
+  props: ComponentProps<typeof DropTipWizardContent>
 ) => {
   return renderWithProviders(<DropTipWizardContent {...props} />, {
     i18nInstance: i18n,
@@ -83,7 +84,7 @@ const renderDropTipWizardContent = (
 }
 
 describe('DropTipWizardContent', () => {
-  let props: React.ComponentProps<typeof DropTipWizardContent>
+  let props: ComponentProps<typeof DropTipWizardContent>
 
   beforeEach(() => {
     props = mockDropTipWizardContainerProps
diff --git a/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizardHeader.test.tsx b/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizardHeader.test.tsx
index c5720adf4ab..74bb70f6a8e 100644
--- a/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizardHeader.test.tsx
+++ b/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizardHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -10,17 +9,18 @@ import {
   DropTipWizardHeader,
 } from '../DropTipWizardHeader'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 import type { UseWizardExitHeaderProps } from '../DropTipWizardHeader'
 
-const render = (props: React.ComponentProps<typeof DropTipWizardHeader>) => {
+const render = (props: ComponentProps<typeof DropTipWizardHeader>) => {
   return renderWithProviders(<DropTipWizardHeader {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('DropTipWizardHeader', () => {
-  let props: React.ComponentProps<typeof DropTipWizardHeader>
+  let props: ComponentProps<typeof DropTipWizardHeader>
 
   beforeEach(() => {
     props = mockDropTipWizardContainerProps
diff --git a/app/src/organisms/EmergencyStop/__tests__/EstopMissingModal.test.tsx b/app/src/organisms/EmergencyStop/__tests__/EstopMissingModal.test.tsx
index c2ce7cea0e1..c71c0a146ee 100644
--- a/app/src/organisms/EmergencyStop/__tests__/EstopMissingModal.test.tsx
+++ b/app/src/organisms/EmergencyStop/__tests__/EstopMissingModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { getIsOnDevice } from '/app/redux/config'
 import { EstopMissingModal } from '../EstopMissingModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof EstopMissingModal>) => {
+const render = (props: ComponentProps<typeof EstopMissingModal>) => {
   return renderWithProviders(<EstopMissingModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('EstopMissingModal - Touchscreen', () => {
-  let props: React.ComponentProps<typeof EstopMissingModal>
+  let props: ComponentProps<typeof EstopMissingModal>
 
   beforeEach(() => {
     props = {
@@ -40,7 +41,7 @@ describe('EstopMissingModal - Touchscreen', () => {
 })
 
 describe('EstopMissingModal - Desktop', () => {
-  let props: React.ComponentProps<typeof EstopMissingModal>
+  let props: ComponentProps<typeof EstopMissingModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/EmergencyStop/__tests__/EstopPressedModal.test.tsx b/app/src/organisms/EmergencyStop/__tests__/EstopPressedModal.test.tsx
index 067211c4c06..6d259bd6acb 100644
--- a/app/src/organisms/EmergencyStop/__tests__/EstopPressedModal.test.tsx
+++ b/app/src/organisms/EmergencyStop/__tests__/EstopPressedModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -10,18 +9,20 @@ import { getIsOnDevice } from '/app/redux/config'
 import { EstopPressedModal } from '../EstopPressedModal'
 import { usePlacePlateReaderLid } from '/app/resources/modules'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/redux/config')
 vi.mock('/app/resources/modules')
 
-const render = (props: React.ComponentProps<typeof EstopPressedModal>) => {
+const render = (props: ComponentProps<typeof EstopPressedModal>) => {
   return renderWithProviders(<EstopPressedModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('EstopPressedModal - Touchscreen', () => {
-  let props: React.ComponentProps<typeof EstopPressedModal>
+  let props: ComponentProps<typeof EstopPressedModal>
 
   beforeEach(() => {
     props = {
@@ -85,7 +86,7 @@ describe('EstopPressedModal - Touchscreen', () => {
 })
 
 describe('EstopPressedModal - Desktop', () => {
-  let props: React.ComponentProps<typeof EstopPressedModal>
+  let props: ComponentProps<typeof EstopPressedModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/EmergencyStop/__tests__/EstopTakeover.test.tsx b/app/src/organisms/EmergencyStop/__tests__/EstopTakeover.test.tsx
index 3ff0503dc69..4ffd822fb80 100644
--- a/app/src/organisms/EmergencyStop/__tests__/EstopTakeover.test.tsx
+++ b/app/src/organisms/EmergencyStop/__tests__/EstopTakeover.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -19,6 +18,8 @@ import { getLocalRobot } from '/app/redux/discovery'
 import { mockConnectedRobot } from '/app/redux/discovery/__fixtures__'
 import { EstopTakeover } from '../EstopTakeover'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 vi.mock('../EstopMissingModal')
 vi.mock('../EstopPressedModal')
@@ -33,14 +34,14 @@ const mockPressed = {
   },
 }
 
-const render = (props: React.ComponentProps<typeof EstopTakeover>) => {
+const render = (props: ComponentProps<typeof EstopTakeover>) => {
   return renderWithProviders(<EstopTakeover {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('EstopTakeover', () => {
-  let props: React.ComponentProps<typeof EstopTakeover>
+  let props: ComponentProps<typeof EstopTakeover>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx
index 16cb755d4da..2f8f7016773 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx
@@ -27,6 +27,7 @@ import {
   SkipStepInfo,
 } from '../shared'
 
+import type { ChangeEvent } from 'react'
 import type { RecoveryContentProps } from '../types'
 
 export function IgnoreErrorSkipStep(props: RecoveryContentProps): JSX.Element {
@@ -143,7 +144,7 @@ export function IgnoreErrorStepHome({
       >
         <RecoveryRadioGroup
           value={selectedOption}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
             setSelectedOption(e.currentTarget.value as IgnoreOption)
           }}
           options={IGNORE_OPTIONS_IN_ORDER.map(option => {
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/CancelRun.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/CancelRun.test.tsx
index cbf8126e353..06923d65492 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/CancelRun.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/CancelRun.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { screen, waitFor } from '@testing-library/react'
 
@@ -9,11 +8,13 @@ import { CancelRun } from '../CancelRun'
 import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
+
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('../SelectRecoveryOption')
 
-const render = (props: React.ComponentProps<typeof CancelRun>) => {
+const render = (props: ComponentProps<typeof CancelRun>) => {
   return renderWithProviders(<CancelRun {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -21,7 +22,7 @@ const render = (props: React.ComponentProps<typeof CancelRun>) => {
 
 describe('RecoveryFooterButtons', () => {
   const { CANCEL_RUN, ROBOT_CANCELING, DROP_TIP_FLOWS } = RECOVERY_MAP
-  let props: React.ComponentProps<typeof CancelRun>
+  let props: ComponentProps<typeof CancelRun>
   let mockGoBackPrevStep: Mock
   let mockhandleMotionRouting: Mock
   let mockProceedToRouteAndStep: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/FillWellAndSkip.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/FillWellAndSkip.test.tsx
index 3c7675ec21c..6f0145a9ef3 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/FillWellAndSkip.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/FillWellAndSkip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen, waitFor } from '@testing-library/react'
 
@@ -11,6 +10,7 @@ import { CancelRun } from '../CancelRun'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('../../shared', async () => {
@@ -32,28 +32,26 @@ vi.mock('../CancelRun')
 vi.mock('../SelectRecoveryOption')
 vi.mock('/app/molecules/Command')
 
-const render = (props: React.ComponentProps<typeof FillWellAndSkip>) => {
+const render = (props: ComponentProps<typeof FillWellAndSkip>) => {
   return renderWithProviders(<FillWellAndSkip {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
-const renderFillWell = (props: React.ComponentProps<typeof FillWell>) => {
+const renderFillWell = (props: ComponentProps<typeof FillWell>) => {
   return renderWithProviders(<FillWell {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
-const renderSkipToNextStep = (
-  props: React.ComponentProps<typeof SkipToNextStep>
-) => {
+const renderSkipToNextStep = (props: ComponentProps<typeof SkipToNextStep>) => {
   return renderWithProviders(<SkipToNextStep {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FillWellAndSkip', () => {
-  let props: React.ComponentProps<typeof FillWellAndSkip>
+  let props: ComponentProps<typeof FillWellAndSkip>
 
   beforeEach(() => {
     props = {
@@ -118,7 +116,7 @@ describe('FillWellAndSkip', () => {
 })
 
 describe('FillWell', () => {
-  let props: React.ComponentProps<typeof FillWell>
+  let props: ComponentProps<typeof FillWell>
 
   beforeEach(() => {
     props = {
@@ -136,7 +134,7 @@ describe('FillWell', () => {
 })
 
 describe('SkipToNextStep', () => {
-  let props: React.ComponentProps<typeof SkipToNextStep>
+  let props: ComponentProps<typeof SkipToNextStep>
   let mockhandleMotionRouting: Mock
   let mockGoBackPrevStep: Mock
   let mockProceedToRouteAndStep: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/HomeAndRetry.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/HomeAndRetry.test.tsx
index 3286041b7fb..aae543bc559 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/HomeAndRetry.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/HomeAndRetry.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -10,17 +9,19 @@ import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { HomeAndRetry } from '../HomeAndRetry'
 import { TipSelection } from '../../shared/TipSelection'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../SelectRecoveryOption')
 vi.mock('../../shared/TipSelection')
 
-const render = (props: React.ComponentProps<typeof HomeAndRetry>) => {
+const render = (props: ComponentProps<typeof HomeAndRetry>) => {
   return renderWithProviders(<HomeAndRetry {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HomeAndRetry', () => {
-  let props: React.ComponentProps<typeof HomeAndRetry>
+  let props: ComponentProps<typeof HomeAndRetry>
   beforeEach(() => {
     props = {
       ...mockRecoveryContentProps,
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx
index 547334f77c4..a1655ae57b2 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen, fireEvent, waitFor } from '@testing-library/react'
 
@@ -15,6 +14,7 @@ import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
 import { SkipStepInfo } from '/app/organisms/ErrorRecoveryFlows/shared'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/organisms/ErrorRecoveryFlows/shared', async () => {
@@ -31,14 +31,14 @@ vi.mock('/app/organisms/ErrorRecoveryFlows/shared', async () => {
 })
 vi.mock('../SelectRecoveryOption')
 
-const render = (props: React.ComponentProps<typeof IgnoreErrorSkipStep>) => {
+const render = (props: ComponentProps<typeof IgnoreErrorSkipStep>) => {
   return renderWithProviders(<IgnoreErrorSkipStep {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 const renderIgnoreErrorStepHome = (
-  props: React.ComponentProps<typeof IgnoreErrorStepHome>
+  props: ComponentProps<typeof IgnoreErrorStepHome>
 ) => {
   return renderWithProviders(<IgnoreErrorStepHome {...props} />, {
     i18nInstance: i18n,
@@ -46,7 +46,7 @@ const renderIgnoreErrorStepHome = (
 }
 
 describe('IgnoreErrorSkipStep', () => {
-  let props: React.ComponentProps<typeof IgnoreErrorSkipStep>
+  let props: ComponentProps<typeof IgnoreErrorSkipStep>
 
   beforeEach(() => {
     props = {
@@ -98,7 +98,7 @@ describe('IgnoreErrorSkipStep', () => {
 })
 
 describe('IgnoreErrorStepHome', () => {
-  let props: React.ComponentProps<typeof IgnoreErrorStepHome>
+  let props: ComponentProps<typeof IgnoreErrorStepHome>
   let mockIgnoreErrorKindThisRun: Mock
   let mockProceedToRouteAndStep: Mock
   let mockGoBackPrevStep: Mock
@@ -184,7 +184,7 @@ describe('IgnoreErrorStepHome', () => {
 })
 
 describe('IgnoreOptions', () => {
-  let props: React.ComponentProps<typeof IgnoreOptions>
+  let props: ComponentProps<typeof IgnoreOptions>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManageTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManageTips.test.tsx
index 941b19081c7..b047f7a463b 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManageTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManageTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import {
   screen,
@@ -18,6 +17,7 @@ import { DT_ROUTES } from '/app/organisms/DropTipWizardFlows/constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 import type { PipetteModelSpecs } from '@opentrons/shared-data'
 
@@ -34,14 +34,14 @@ const MOCK_ACTUAL_PIPETTE = {
   },
 } as PipetteModelSpecs
 
-const render = (props: React.ComponentProps<typeof ManageTips>) => {
+const render = (props: ComponentProps<typeof ManageTips>) => {
   return renderWithProviders(<ManageTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ManageTips', () => {
-  let props: React.ComponentProps<typeof ManageTips>
+  let props: ComponentProps<typeof ManageTips>
   let mockProceedNextStep: Mock
   let mockProceedToRouteAndStep: Mock
   let mockhandleMotionRouting: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualMoveLwAndSkip.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualMoveLwAndSkip.test.tsx
index 48f8615cf81..8cc5285e31a 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualMoveLwAndSkip.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualMoveLwAndSkip.test.tsx
@@ -6,7 +6,7 @@ import { i18n } from '/app/i18n'
 import { ManualMoveLwAndSkip } from '../ManualMoveLwAndSkip'
 import { RECOVERY_MAP } from '../../constants'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
 vi.mock('../../shared', () => ({
   GripperIsHoldingLabware: vi.fn(() => (
@@ -23,7 +23,7 @@ vi.mock('../SelectRecoveryOption', () => ({
 }))
 
 describe('ManualMoveLwAndSkip', () => {
-  let props: React.ComponentProps<typeof ManualMoveLwAndSkip>
+  let props: ComponentProps<typeof ManualMoveLwAndSkip>
 
   beforeEach(() => {
     props = {
@@ -34,7 +34,7 @@ describe('ManualMoveLwAndSkip', () => {
     } as any
   })
 
-  const render = (props: React.ComponentProps<typeof ManualMoveLwAndSkip>) => {
+  const render = (props: ComponentProps<typeof ManualMoveLwAndSkip>) => {
     return renderWithProviders(<ManualMoveLwAndSkip {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualReplaceLwAndRetry.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualReplaceLwAndRetry.test.tsx
index fb47ccb5f2f..0d25fcda029 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualReplaceLwAndRetry.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualReplaceLwAndRetry.test.tsx
@@ -6,7 +6,7 @@ import { i18n } from '/app/i18n'
 import { ManualReplaceLwAndRetry } from '../ManualReplaceLwAndRetry'
 import { RECOVERY_MAP } from '../../constants'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
 vi.mock('../../shared', () => ({
   GripperIsHoldingLabware: vi.fn(() => (
@@ -23,7 +23,7 @@ vi.mock('../SelectRecoveryOption', () => ({
 }))
 
 describe('ManualReplaceLwAndRetry', () => {
-  let props: React.ComponentProps<typeof ManualReplaceLwAndRetry>
+  let props: ComponentProps<typeof ManualReplaceLwAndRetry>
 
   beforeEach(() => {
     props = {
@@ -35,9 +35,7 @@ describe('ManualReplaceLwAndRetry', () => {
     } as any
   })
 
-  const render = (
-    props: React.ComponentProps<typeof ManualReplaceLwAndRetry>
-  ) => {
+  const render = (props: ComponentProps<typeof ManualReplaceLwAndRetry>) => {
     return renderWithProviders(<ManualReplaceLwAndRetry {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryNewTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryNewTips.test.tsx
index dcee4c10c56..cfd55c45d77 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryNewTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryNewTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest'
 import { screen, waitFor } from '@testing-library/react'
 
@@ -10,6 +9,7 @@ import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/molecules/Command')
@@ -23,14 +23,14 @@ vi.mock('../../shared', async () => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof RetryNewTips>) => {
+const render = (props: ComponentProps<typeof RetryNewTips>) => {
   return renderWithProviders(<RetryNewTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 const renderRetryWithNewTips = (
-  props: React.ComponentProps<typeof RetryWithNewTips>
+  props: ComponentProps<typeof RetryWithNewTips>
 ) => {
   return renderWithProviders(<RetryWithNewTips {...props} />, {
     i18nInstance: i18n,
@@ -38,7 +38,7 @@ const renderRetryWithNewTips = (
 }
 
 describe('RetryNewTips', () => {
-  let props: React.ComponentProps<typeof RetryNewTips>
+  let props: ComponentProps<typeof RetryNewTips>
   let mockProceedToRouteAndStep: Mock
 
   beforeEach(() => {
@@ -121,7 +121,7 @@ describe('RetryNewTips', () => {
 })
 
 describe('RetryWithNewTips', () => {
-  let props: React.ComponentProps<typeof RetryWithNewTips>
+  let props: ComponentProps<typeof RetryWithNewTips>
   let mockhandleMotionRouting: Mock
   let mockRetryFailedCommand: Mock
   let mockResumeRun: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetrySameTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetrySameTips.test.tsx
index 4514c9cc350..7457b50f824 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetrySameTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetrySameTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest'
 import { screen, waitFor } from '@testing-library/react'
 
@@ -10,19 +9,20 @@ import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/molecules/Command')
 vi.mock('../SelectRecoveryOption')
 
-const render = (props: React.ComponentProps<typeof RetrySameTips>) => {
+const render = (props: ComponentProps<typeof RetrySameTips>) => {
   return renderWithProviders(<RetrySameTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 const renderRetrySameTipsInfo = (
-  props: React.ComponentProps<typeof RetrySameTipsInfo>
+  props: ComponentProps<typeof RetrySameTipsInfo>
 ) => {
   return renderWithProviders(<RetrySameTipsInfo {...props} />, {
     i18nInstance: i18n,
@@ -30,7 +30,7 @@ const renderRetrySameTipsInfo = (
 }
 
 describe('RetrySameTips', () => {
-  let props: React.ComponentProps<typeof RetrySameTips>
+  let props: ComponentProps<typeof RetrySameTips>
 
   beforeEach(() => {
     props = {
@@ -72,7 +72,7 @@ describe('RetrySameTips', () => {
 })
 
 describe('RetrySameTipsInfo', () => {
-  let props: React.ComponentProps<typeof RetrySameTipsInfo>
+  let props: ComponentProps<typeof RetrySameTipsInfo>
   let mockhandleMotionRouting: Mock
   let mockRetryFailedCommand: Mock
   let mockResumeRun: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryStep.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryStep.test.tsx
index ec39f5b7c18..f972275c224 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryStep.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryStep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -9,17 +8,19 @@ import { RetryStep } from '../RetryStep'
 import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/Command')
 vi.mock('../SelectRecoveryOption')
 
-const render = (props: React.ComponentProps<typeof RetryStep>) => {
+const render = (props: ComponentProps<typeof RetryStep>) => {
   return renderWithProviders(<RetryStep {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RetryStep', () => {
-  let props: React.ComponentProps<typeof RetryStep>
+  let props: ComponentProps<typeof RetryStep>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SelectRecoveryOptions.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SelectRecoveryOptions.test.tsx
index 62fe8eea3c8..caa67196866 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SelectRecoveryOptions.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SelectRecoveryOptions.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -23,10 +22,11 @@ import {
 import { RECOVERY_MAP, ERROR_KINDS } from '../../constants'
 import { clickButtonLabeled } from '../../__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 const renderSelectRecoveryOption = (
-  props: React.ComponentProps<typeof SelectRecoveryOption>
+  props: ComponentProps<typeof SelectRecoveryOption>
 ) => {
   return renderWithProviders(
     <SelectRecoveryOption {...{ ...mockRecoveryContentProps, ...props }} />,
@@ -37,7 +37,7 @@ const renderSelectRecoveryOption = (
 }
 
 const renderRecoveryOptions = (
-  props: React.ComponentProps<typeof RecoveryOptions>
+  props: ComponentProps<typeof RecoveryOptions>
 ) => {
   return renderWithProviders(<RecoveryOptions {...props} />, {
     i18nInstance: i18n,
@@ -45,7 +45,7 @@ const renderRecoveryOptions = (
 }
 describe('SelectRecoveryOption', () => {
   const { RETRY_STEP, RETRY_NEW_TIPS } = RECOVERY_MAP
-  let props: React.ComponentProps<typeof SelectRecoveryOption>
+  let props: ComponentProps<typeof SelectRecoveryOption>
   let mockProceedToRouteAndStep: Mock
   let mockSetSelectedRecoveryOption: Mock
   let mockGetRecoveryOptionCopy: Mock
@@ -253,7 +253,7 @@ describe('SelectRecoveryOption', () => {
   })
 })
 describe('RecoveryOptions', () => {
-  let props: React.ComponentProps<typeof RecoveryOptions>
+  let props: ComponentProps<typeof RecoveryOptions>
   let mockSetSelectedRoute: Mock
   let mockGetRecoveryOptionCopy: Mock
 
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepNewTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepNewTips.test.tsx
index 09afa086dca..a492184cbc7 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepNewTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepNewTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -9,6 +8,7 @@ import { SkipStepNewTips } from '../SkipStepNewTips'
 import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/molecules/Command')
@@ -23,14 +23,14 @@ vi.mock('../../shared', async () => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SkipStepNewTips>) => {
+const render = (props: ComponentProps<typeof SkipStepNewTips>) => {
   return renderWithProviders(<SkipStepNewTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('SkipStepNewTips', () => {
-  let props: React.ComponentProps<typeof SkipStepNewTips>
+  let props: ComponentProps<typeof SkipStepNewTips>
   let mockProceedToRouteAndStep: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepSameTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepSameTips.test.tsx
index 157825b3322..eb716694d68 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepSameTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepSameTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -10,18 +9,20 @@ import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { SkipStepInfo } from '/app/organisms/ErrorRecoveryFlows/shared'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/Command')
 vi.mock('/app/organisms/ErrorRecoveryFlows/shared')
 vi.mock('../SelectRecoveryOption')
 
-const render = (props: React.ComponentProps<typeof SkipStepSameTips>) => {
+const render = (props: ComponentProps<typeof SkipStepSameTips>) => {
   return renderWithProviders(<SkipStepSameTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('SkipStepSameTips', () => {
-  let props: React.ComponentProps<typeof SkipStepSameTips>
+  let props: ComponentProps<typeof SkipStepSameTips>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryFlows.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryFlows.test.tsx
index 2e425b73495..53bc8c15a8b 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryFlows.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryFlows.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, expect, it, beforeEach } from 'vitest'
 import { screen, renderHook } from '@testing-library/react'
 
@@ -24,6 +23,7 @@ import { useERWizard, ErrorRecoveryWizard } from '../ErrorRecoveryWizard'
 import { useRecoverySplash, RecoverySplash } from '../RecoverySplash'
 import { useRunLoadedLabwareDefinitionsByUri } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type { RunStatus } from '@opentrons/api-client'
 
 vi.mock('../ErrorRecoveryWizard')
@@ -128,14 +128,14 @@ describe('useErrorRecoveryFlows', () => {
   })
 })
 
-const render = (props: React.ComponentProps<typeof ErrorRecoveryFlows>) => {
+const render = (props: ComponentProps<typeof ErrorRecoveryFlows>) => {
   return renderWithProviders(<ErrorRecoveryFlows {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ErrorRecoveryFlows', () => {
-  let props: React.ComponentProps<typeof ErrorRecoveryFlows>
+  let props: ComponentProps<typeof ErrorRecoveryFlows>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryWizard.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryWizard.test.tsx
index d97072e45f3..1f358fc574c 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryWizard.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryWizard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { renderHook, act, screen } from '@testing-library/react'
 
@@ -35,6 +34,8 @@ import {
   RecoveryDoorOpenSpecial,
 } from '../shared'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../RecoveryOptions')
 vi.mock('../RecoveryInProgress')
 vi.mock('../RecoveryError')
@@ -96,7 +97,7 @@ describe('useERWizard', () => {
 })
 
 const renderRecoveryComponent = (
-  props: React.ComponentProps<typeof ErrorRecoveryComponent>
+  props: ComponentProps<typeof ErrorRecoveryComponent>
 ) => {
   return renderWithProviders(<ErrorRecoveryComponent {...props} />, {
     i18nInstance: i18n,
@@ -104,7 +105,7 @@ const renderRecoveryComponent = (
 }
 
 describe('ErrorRecoveryComponent', () => {
-  let props: React.ComponentProps<typeof ErrorRecoveryComponent>
+  let props: ComponentProps<typeof ErrorRecoveryComponent>
 
   beforeEach(() => {
     props = mockRecoveryContentProps
@@ -158,7 +159,7 @@ describe('ErrorRecoveryComponent', () => {
 })
 
 const renderRecoveryContent = (
-  props: React.ComponentProps<typeof ErrorRecoveryContent>
+  props: ComponentProps<typeof ErrorRecoveryContent>
 ) => {
   return renderWithProviders(<ErrorRecoveryContent {...props} />, {
     i18nInstance: i18n,
@@ -192,7 +193,7 @@ describe('ErrorRecoveryContent', () => {
     HOME_AND_RETRY,
   } = RECOVERY_MAP
 
-  let props: React.ComponentProps<typeof ErrorRecoveryContent>
+  let props: ComponentProps<typeof ErrorRecoveryContent>
 
   beforeEach(() => {
     props = mockRecoveryContentProps
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryDoorOpen.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryDoorOpen.test.tsx
index a9fc92e1b84..57b0eff70a9 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryDoorOpen.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryDoorOpen.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
 import { screen } from '@testing-library/react'
@@ -10,16 +9,17 @@ import { i18n } from '/app/i18n'
 import { RecoveryDoorOpen } from '../RecoveryDoorOpen'
 import { clickButtonLabeled } from './util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
-const render = (props: React.ComponentProps<typeof RecoveryDoorOpen>) => {
+const render = (props: ComponentProps<typeof RecoveryDoorOpen>) => {
   return renderWithProviders(<RecoveryDoorOpen {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RecoveryDoorOpen', () => {
-  let props: React.ComponentProps<typeof RecoveryDoorOpen>
+  let props: ComponentProps<typeof RecoveryDoorOpen>
   let mockResumeRecovery: Mock
   let mockProceedToRouteAndStep: Mock
 
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx
index f46f3f949ba..9d19b32d788 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable testing-library/prefer-presence-queries */
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen, fireEvent, waitFor } from '@testing-library/react'
 
@@ -9,9 +8,10 @@ import { i18n } from '/app/i18n'
 import { RecoveryError } from '../RecoveryError'
 import { RECOVERY_MAP } from '../constants'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
-const render = (props: React.ComponentProps<typeof RecoveryError>) => {
+const render = (props: ComponentProps<typeof RecoveryError>) => {
   return renderWithProviders(<RecoveryError {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -20,7 +20,7 @@ const render = (props: React.ComponentProps<typeof RecoveryError>) => {
 const { ERROR_WHILE_RECOVERING } = RECOVERY_MAP
 
 describe('RecoveryError', () => {
-  let props: React.ComponentProps<typeof RecoveryError>
+  let props: ComponentProps<typeof RecoveryError>
   let proceedToRouteAndStepMock: Mock
   let getRecoverOptionCopyMock: Mock
   let handleMotionRoutingMock: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryInProgress.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryInProgress.test.tsx
index 2dfa5711644..b9c6149a696 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryInProgress.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryInProgress.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { beforeEach, describe, it, vi, afterEach, expect } from 'vitest'
 import { act, renderHook, screen } from '@testing-library/react'
 
@@ -12,7 +11,9 @@ import {
 } from '../RecoveryInProgress'
 import { RECOVERY_MAP } from '../constants'
 
-const render = (props: React.ComponentProps<typeof RecoveryInProgress>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof RecoveryInProgress>) => {
   return renderWithProviders(<RecoveryInProgress {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -28,7 +29,7 @@ describe('RecoveryInProgress', () => {
     ROBOT_SKIPPING_STEP,
     ROBOT_RELEASING_LABWARE,
   } = RECOVERY_MAP
-  let props: React.ComponentProps<typeof RecoveryInProgress>
+  let props: ComponentProps<typeof RecoveryInProgress>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoverySplash.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoverySplash.test.tsx
index 901ab22e158..17b7f9fd24d 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoverySplash.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoverySplash.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, screen, waitFor, renderHook } from '@testing-library/react'
@@ -21,6 +20,7 @@ import { StepInfo } from '../shared'
 import { useToaster } from '../../ToasterOven'
 import { clickButtonLabeled } from './util'
 
+import type { ComponentProps, FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/config')
@@ -30,7 +30,7 @@ vi.mock('../../ToasterOven')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useRunPausedSplash', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     vi.mocked(getIsOnDevice).mockReturnValue(true)
     const queryClient = new QueryClient()
@@ -65,7 +65,7 @@ describe('useRunPausedSplash', () => {
   })
 })
 
-const render = (props: React.ComponentProps<typeof RecoverySplash>) => {
+const render = (props: ComponentProps<typeof RecoverySplash>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RecoverySplash {...props} />
@@ -77,7 +77,7 @@ const render = (props: React.ComponentProps<typeof RecoverySplash>) => {
 }
 
 describe('RecoverySplash', () => {
-  let props: React.ComponentProps<typeof RecoverySplash>
+  let props: ComponentProps<typeof RecoverySplash>
   const mockToggleERWiz = vi.fn(() => Promise.resolve())
   const mockProceedToRouteAndStep = vi.fn()
   const mockHandleMotionRouting = vi.fn(() => Promise.resolve())
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryTakeover.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryTakeover.test.tsx
index 1eec7782713..6a71c84ba3c 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryTakeover.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryTakeover.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -14,18 +13,19 @@ import { RecoveryTakeover, RecoveryTakeoverDesktop } from '../RecoveryTakeover'
 import { useUpdateClientDataRecovery } from '/app/resources/client_data'
 import { clickButtonLabeled } from './util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/resources/client_data')
 
-const render = (props: React.ComponentProps<typeof RecoveryTakeover>) => {
+const render = (props: ComponentProps<typeof RecoveryTakeover>) => {
   return renderWithProviders(<RecoveryTakeover {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RecoveryTakeover', () => {
-  let props: React.ComponentProps<typeof RecoveryTakeover>
+  let props: ComponentProps<typeof RecoveryTakeover>
   let mockClearClientData: Mock
 
   beforeEach(() => {
@@ -91,7 +91,7 @@ describe('RecoveryTakeover', () => {
 })
 
 describe('RecoveryTakeoverDesktop', () => {
-  let props: React.ComponentProps<typeof RecoveryTakeoverDesktop>
+  let props: ComponentProps<typeof RecoveryTakeoverDesktop>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryOptionCopy.test.tsx b/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryOptionCopy.test.tsx
index 11e8a574246..0ec262c3f41 100644
--- a/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryOptionCopy.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryOptionCopy.test.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { describe, it } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -10,6 +8,8 @@ import type { ErrorKind, RecoveryRoute } from '../../types'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 
+import type { ComponentProps } from 'react'
+
 function MockRenderCmpt({
   route,
   errorKind,
@@ -26,7 +26,7 @@ function MockRenderCmpt({
   )
 }
 
-const render = (props: React.ComponentProps<typeof MockRenderCmpt>) => {
+const render = (props: ComponentProps<typeof MockRenderCmpt>) => {
   return renderWithProviders(<MockRenderCmpt {...props} />, {
     i18nInstance: i18n,
   })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryToasts.test.tsx b/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryToasts.test.tsx
index 085551f42e7..1ce852e86aa 100644
--- a/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryToasts.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryToasts.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { I18nextProvider } from 'react-i18next'
 import { i18n } from '/app/i18n'
@@ -16,6 +15,7 @@ import { RECOVERY_MAP } from '../../constants'
 import { useToaster } from '../../../ToasterOven'
 import { useCommandTextString } from '/app/local-resources/commands'
 
+import type { ReactElement } from 'react'
 import type { Mock } from 'vitest'
 import type { BuildToast } from '../useRecoveryToasts'
 
@@ -42,7 +42,7 @@ const DEFAULT_PROPS: BuildToast = {
 }
 
 // Utility function for rendering with I18nextProvider
-const renderWithI18n = (component: React.ReactElement) => {
+const renderWithI18n = (component: ReactElement) => {
   return render(<I18nextProvider i18n={i18n}>{component}</I18nextProvider>)
 }
 
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx
index 87cdac57255..c6fa3623cf4 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx
@@ -1,11 +1,11 @@
 import { InterventionContent } from '/app/molecules/InterventionModal/InterventionContent'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type { RecoveryContentProps } from '../types'
 
 type LeftColumnLabwareInfoProps = RecoveryContentProps & {
   title: string
-  type: React.ComponentProps<typeof InterventionContent>['infoProps']['type']
+  type: ComponentProps<typeof InterventionContent>['infoProps']['type']
   /* Renders a warning InlineNotification if provided. */
   bannerText?: string
 }
@@ -24,7 +24,7 @@ export function LeftColumnLabwareInfo({
   } = failedLabwareUtils
   const { displayNameNewLoc, displayNameCurrentLoc } = failedLabwareLocations
 
-  const buildNewLocation = (): React.ComponentProps<
+  const buildNewLocation = (): ComponentProps<
     typeof InterventionContent
   >['infoProps']['newLocationProps'] =>
     displayNameNewLoc != null
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx
index 9274079897f..d7c2abd900f 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx
@@ -1,7 +1,6 @@
 // TODO: replace this by making these props true of interventionmodal content wrappers
 // once error recovery uses interventionmodal consistently
 
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   DIRECTION_COLUMN,
@@ -18,19 +17,21 @@ import {
 } from '/app/molecules/InterventionModal'
 import { RecoveryFooterButtons } from './RecoveryFooterButtons'
 
+import type { ComponentProps, ReactNode } from 'react'
+
 interface SingleColumnContentWrapperProps {
-  children: React.ReactNode
-  footerDetails?: React.ComponentProps<typeof RecoveryFooterButtons>
+  children: ReactNode
+  footerDetails?: ComponentProps<typeof RecoveryFooterButtons>
 }
 
 interface TwoColumnContentWrapperProps {
-  children: [React.ReactNode, React.ReactNode]
-  footerDetails?: React.ComponentProps<typeof RecoveryFooterButtons>
+  children: [ReactNode, ReactNode]
+  footerDetails?: ComponentProps<typeof RecoveryFooterButtons>
 }
 
 interface OneOrTwoColumnContentWrapperProps {
-  children: [React.ReactNode, React.ReactNode]
-  footerDetails?: React.ComponentProps<typeof RecoveryFooterButtons>
+  children: [ReactNode, ReactNode]
+  footerDetails?: ComponentProps<typeof RecoveryFooterButtons>
 }
 // For flex-direction: column recovery content with one column only.
 export function RecoverySingleColumnContentWrapper({
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx
index 82974023805..73ac8497deb 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createPortal } from 'react-dom'
 import { css } from 'styled-components'
 
@@ -13,11 +12,12 @@ import {
 import { InterventionModal } from '/app/molecules/InterventionModal'
 import { getModalPortalEl, getTopPortalEl } from '/app/App/portal'
 
+import type { ComponentProps } from 'react'
 import type { ModalType } from '/app/molecules/InterventionModal'
 import type { DesktopSizeType } from '../types'
 
 export type RecoveryInterventionModalProps = Omit<
-  React.ComponentProps<typeof InterventionModal>,
+  ComponentProps<typeof InterventionModal>,
   'type'
 > & {
   /* If on desktop, specifies the hard-coded dimensions height of the modal. */
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/StepInfo.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/StepInfo.tsx
index bbc12ce0429..ba68ee88507 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/StepInfo.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/StepInfo.tsx
@@ -1,11 +1,10 @@
-import type * as React from 'react'
-
 import { useTranslation } from 'react-i18next'
 
 import { Flex, DISPLAY_INLINE, StyledText } from '@opentrons/components'
 
 import { CommandText } from '/app/molecules/Command'
 
+import type { ComponentProps } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { RecoveryContentProps } from '../types'
 
@@ -15,8 +14,8 @@ interface StepInfoProps extends StyleProps {
   robotType: RecoveryContentProps['robotType']
   protocolAnalysis: RecoveryContentProps['protocolAnalysis']
   allRunDefs: RecoveryContentProps['allRunDefs']
-  desktopStyle?: React.ComponentProps<typeof StyledText>['desktopStyle']
-  oddStyle?: React.ComponentProps<typeof StyledText>['oddStyle']
+  desktopStyle?: ComponentProps<typeof StyledText>['desktopStyle']
+  oddStyle?: ComponentProps<typeof StyledText>['oddStyle']
 }
 
 export function StepInfo({
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx
index 9bf8f12bc22..ad7ac489d7c 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx
@@ -1,9 +1,9 @@
 import {
-  Flex,
-  MoveLabwareOnDeck,
   COLORS,
-  Module,
+  Flex,
   LabwareRender,
+  Module,
+  MoveLabwareOnDeck,
 } from '@opentrons/components'
 import { inferModuleOrientationFromXCoordinate } from '@opentrons/shared-data'
 
@@ -14,7 +14,7 @@ import { RecoveryFooterButtons } from './RecoveryFooterButtons'
 import { LeftColumnLabwareInfo } from './LeftColumnLabwareInfo'
 import { RECOVERY_MAP } from '../constants'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type { RecoveryContentProps } from '../types'
 import type { InterventionContent } from '/app/molecules/InterventionModal/InterventionContent'
 
@@ -100,7 +100,7 @@ export function TwoColLwInfoAndDeck(
     }
   }
 
-  const buildType = (): React.ComponentProps<
+  const buildType = (): ComponentProps<
     typeof InterventionContent
   >['infoProps']['type'] => {
     switch (selectedRecoveryOption) {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx
index ce754df9cfa..da76c3e09d9 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 import { screen, act, renderHook } from '@testing-library/react'
 
@@ -17,6 +16,8 @@ import {
   StallErrorBanner,
 } from '../ErrorDetailsModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('react-dom', () => ({
   ...vi.importActual('react-dom'),
   createPortal: vi.fn((element, container) => element),
@@ -47,14 +48,14 @@ describe('useErrorDetailsModal', () => {
   })
 })
 
-const render = (props: React.ComponentProps<typeof ErrorDetailsModal>) => {
+const render = (props: ComponentProps<typeof ErrorDetailsModal>) => {
   return renderWithProviders(<ErrorDetailsModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ErrorDetailsModal', () => {
-  let props: React.ComponentProps<typeof ErrorDetailsModal>
+  let props: ComponentProps<typeof ErrorDetailsModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperIsHoldingLabware.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperIsHoldingLabware.test.tsx
index 95af112fa58..adedca04009 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperIsHoldingLabware.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperIsHoldingLabware.test.tsx
@@ -10,13 +10,12 @@ import {
   GripperIsHoldingLabware,
   HOLDING_LABWARE_OPTIONS,
 } from '../GripperIsHoldingLabware'
+import { RECOVERY_MAP } from '/app/organisms/ErrorRecoveryFlows/constants'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
-import { RECOVERY_MAP } from '/app/organisms/ErrorRecoveryFlows/constants'
 
-const render = (
-  props: React.ComponentProps<typeof GripperIsHoldingLabware>
-) => {
+const render = (props: ComponentProps<typeof GripperIsHoldingLabware>) => {
   return renderWithProviders(<GripperIsHoldingLabware {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -26,7 +25,7 @@ let mockProceedToRouteAndStep: Mock
 let mockProceedNextStep: Mock
 
 describe('GripperIsHoldingLabware', () => {
-  let props: React.ComponentProps<typeof GripperIsHoldingLabware>
+  let props: ComponentProps<typeof GripperIsHoldingLabware>
   beforeEach(() => {
     mockProceedToRouteAndStep = vi.fn(() => Promise.resolve())
     mockProceedNextStep = vi.fn(() => Promise.resolve())
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperReleaseLabware.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperReleaseLabware.test.tsx
index 3bdd9f97819..91fdc3d6a9e 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperReleaseLabware.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperReleaseLabware.test.tsx
@@ -7,20 +7,21 @@ import { i18n } from '/app/i18n'
 import { mockRecoveryContentProps } from '/app/organisms/ErrorRecoveryFlows/__fixtures__'
 import { clickButtonLabeled } from '/app/organisms/ErrorRecoveryFlows/__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/assets/videos/error-recovery/Gripper_Release.webm', () => ({
   default: 'mocked-animation-path.webm',
 }))
 
-const render = (props: React.ComponentProps<typeof GripperReleaseLabware>) => {
+const render = (props: ComponentProps<typeof GripperReleaseLabware>) => {
   return renderWithProviders(<GripperReleaseLabware {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('GripperReleaseLabware', () => {
-  let props: React.ComponentProps<typeof GripperReleaseLabware>
+  let props: ComponentProps<typeof GripperReleaseLabware>
   let mockHandleMotionRouting: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx
index f38e1e06922..c8ab8bc4ad6 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { LeftColumnLabwareInfo } from '../LeftColumnLabwareInfo'
 import { InterventionContent } from '/app/molecules/InterventionModal/InterventionContent'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/InterventionModal/InterventionContent')
 
-const render = (props: React.ComponentProps<typeof LeftColumnLabwareInfo>) => {
+const render = (props: ComponentProps<typeof LeftColumnLabwareInfo>) => {
   return renderWithProviders(<LeftColumnLabwareInfo {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('LeftColumnLabwareInfo', () => {
-  let props: React.ComponentProps<typeof LeftColumnLabwareInfo>
+  let props: ComponentProps<typeof LeftColumnLabwareInfo>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryDoorOpenSpecial.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryDoorOpenSpecial.test.tsx
index 5cc4ae74b87..b54ccc649d7 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryDoorOpenSpecial.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryDoorOpenSpecial.test.tsx
@@ -11,11 +11,11 @@ import { i18n } from '/app/i18n'
 import { RecoveryDoorOpenSpecial } from '../RecoveryDoorOpenSpecial'
 import { RECOVERY_MAP } from '../../constants'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import { clickButtonLabeled } from '/app/organisms/ErrorRecoveryFlows/__tests__/util'
 
 describe('RecoveryDoorOpenSpecial', () => {
-  let props: React.ComponentProps<typeof RecoveryDoorOpenSpecial>
+  let props: ComponentProps<typeof RecoveryDoorOpenSpecial>
 
   beforeEach(() => {
     props = {
@@ -39,9 +39,7 @@ describe('RecoveryDoorOpenSpecial', () => {
     } as any
   })
 
-  const render = (
-    props: React.ComponentProps<typeof RecoveryDoorOpenSpecial>
-  ) => {
+  const render = (props: ComponentProps<typeof RecoveryDoorOpenSpecial>) => {
     return renderWithProviders(<RecoveryDoorOpenSpecial {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryFooterButtons.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryFooterButtons.test.tsx
index 6381d2b579a..6643dcf8021 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryFooterButtons.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryFooterButtons.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 
@@ -8,16 +7,17 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { RecoveryFooterButtons } from '../RecoveryFooterButtons'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
-const render = (props: React.ComponentProps<typeof RecoveryFooterButtons>) => {
+const render = (props: ComponentProps<typeof RecoveryFooterButtons>) => {
   return renderWithProviders(<RecoveryFooterButtons {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RecoveryFooterButtons', () => {
-  let props: React.ComponentProps<typeof RecoveryFooterButtons>
+  let props: ComponentProps<typeof RecoveryFooterButtons>
   let mockPrimaryBtnOnClick: Mock
   let mockSecondaryBtnOnClick: Mock
   let mockTertiaryBtnOnClick: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RetryStepInfo.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RetryStepInfo.test.tsx
index 94f77910657..810cf1c00f1 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RetryStepInfo.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RetryStepInfo.test.tsx
@@ -7,10 +7,11 @@ import { RetryStepInfo } from '../RetryStepInfo'
 import { ERROR_KINDS, RECOVERY_MAP } from '../../constants'
 import { clickButtonLabeled } from '/app/organisms/ErrorRecoveryFlows/__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 describe('RetryStepInfo', () => {
-  let props: React.ComponentProps<typeof RetryStepInfo>
+  let props: ComponentProps<typeof RetryStepInfo>
   let mockHandleMotionRouting: Mock
   let mockRetryFailedCommand: Mock
   let mockResumeRun: Mock
@@ -33,7 +34,7 @@ describe('RetryStepInfo', () => {
     } as any
   })
 
-  const render = (props: React.ComponentProps<typeof RetryStepInfo>) => {
+  const render = (props: ComponentProps<typeof RetryStepInfo>) => {
     return renderWithProviders(<RetryStepInfo {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SelectTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SelectTips.test.tsx
index 08db6269c4d..425bf68b264 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SelectTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SelectTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen, fireEvent, waitFor } from '@testing-library/react'
 
@@ -9,19 +8,20 @@ import { SelectTips } from '../SelectTips'
 import { RECOVERY_MAP } from '../../constants'
 import { TipSelectionModal } from '../TipSelectionModal'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('../TipSelectionModal')
 vi.mock('../TipSelection')
 
-const render = (props: React.ComponentProps<typeof SelectTips>) => {
+const render = (props: ComponentProps<typeof SelectTips>) => {
   return renderWithProviders(<SelectTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('SelectTips', () => {
-  let props: React.ComponentProps<typeof SelectTips>
+  let props: ComponentProps<typeof SelectTips>
   let mockGoBackPrevStep: Mock
   let mockhandleMotionRouting: Mock
   let mockProceedNextStep: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SkipStepInfo.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SkipStepInfo.test.tsx
index 28ef4177648..0bd7b1a5a72 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SkipStepInfo.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SkipStepInfo.test.tsx
@@ -7,10 +7,11 @@ import { SkipStepInfo } from '../SkipStepInfo'
 import { RECOVERY_MAP } from '../../constants'
 import { clickButtonLabeled } from '/app/organisms/ErrorRecoveryFlows/__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 describe('SkipStepInfo', () => {
-  let props: React.ComponentProps<typeof SkipStepInfo>
+  let props: ComponentProps<typeof SkipStepInfo>
   let mockHandleMotionRouting: Mock
   let mockSkipFailedCommand: Mock
 
@@ -32,7 +33,7 @@ describe('SkipStepInfo', () => {
     } as any
   })
 
-  const render = (props: React.ComponentProps<typeof SkipStepInfo>) => {
+  const render = (props: ComponentProps<typeof SkipStepInfo>) => {
     return renderWithProviders(<SkipStepInfo {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/StepInfo.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/StepInfo.test.tsx
index d6fbb50c345..aefd143aee1 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/StepInfo.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/StepInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { StepInfo } from '../StepInfo'
 import { CommandText } from '/app/molecules/Command'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/Command')
 
-const render = (props: React.ComponentProps<typeof StepInfo>) => {
+const render = (props: ComponentProps<typeof StepInfo>) => {
   return renderWithProviders(<StepInfo {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('StepInfo', () => {
-  let props: React.ComponentProps<typeof StepInfo>
+  let props: ComponentProps<typeof StepInfo>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelection.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelection.test.tsx
index 9df7f8e02ec..c6bee4f8d55 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelection.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelection.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { TipSelection } from '../TipSelection'
 import { WellSelection } from '../../../WellSelection'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../WellSelection')
 
-const render = (props: React.ComponentProps<typeof TipSelection>) => {
+const render = (props: ComponentProps<typeof TipSelection>) => {
   return renderWithProviders(<TipSelection {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TipSelection', () => {
-  let props: React.ComponentProps<typeof TipSelection>
+  let props: ComponentProps<typeof TipSelection>
   beforeEach(() => {
     props = {
       ...mockRecoveryContentProps,
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelectionModal.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelectionModal.test.tsx
index fed5a44d4ce..32711ec9762 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelectionModal.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelectionModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { TipSelectionModal } from '../TipSelectionModal'
 import { TipSelection } from '../TipSelection'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../TipSelection')
 
-const render = (props: React.ComponentProps<typeof TipSelectionModal>) => {
+const render = (props: ComponentProps<typeof TipSelectionModal>) => {
   return renderWithProviders(<TipSelectionModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TipSelectionModal', () => {
-  let props: React.ComponentProps<typeof TipSelectionModal>
+  let props: ComponentProps<typeof TipSelectionModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TwoColLwInfoAndDeck.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TwoColLwInfoAndDeck.test.tsx
index 0629038f800..e151cb11d7a 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TwoColLwInfoAndDeck.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TwoColLwInfoAndDeck.test.tsx
@@ -11,7 +11,7 @@ import { RECOVERY_MAP } from '../../constants'
 import { LeftColumnLabwareInfo } from '../LeftColumnLabwareInfo'
 import { getSlotNameAndLwLocFrom } from '../../hooks/useDeckMapUtils'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('@opentrons/components', async () => {
@@ -26,14 +26,14 @@ vi.mock('../../hooks/useDeckMapUtils')
 
 let mockProceedNextStep: Mock
 
-const render = (props: React.ComponentProps<typeof TwoColLwInfoAndDeck>) => {
+const render = (props: ComponentProps<typeof TwoColLwInfoAndDeck>) => {
   return renderWithProviders(<TwoColLwInfoAndDeck {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TwoColLwInfoAndDeck', () => {
-  let props: React.ComponentProps<typeof TwoColLwInfoAndDeck>
+  let props: ComponentProps<typeof TwoColLwInfoAndDeck>
 
   beforeEach(() => {
     mockProceedNextStep = vi.fn()
diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx
index bb205f3f852..16aa35ec87d 100644
--- a/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { act, screen, waitFor } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -10,6 +9,8 @@ import {
 } from '@opentrons/react-api-client'
 import { i18n } from '/app/i18n'
 import { FirmwareUpdateModal } from '..'
+
+import type { ComponentProps } from 'react'
 import type {
   BadPipette,
   PipetteData,
@@ -18,14 +19,14 @@ import type {
 
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof FirmwareUpdateModal>) => {
+const render = (props: ComponentProps<typeof FirmwareUpdateModal>) => {
   return renderWithProviders(<FirmwareUpdateModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FirmwareUpdateModal', () => {
-  let props: React.ComponentProps<typeof FirmwareUpdateModal>
+  let props: ComponentProps<typeof FirmwareUpdateModal>
   const refetch = vi.fn(() => Promise.resolve())
   const updateSubsystem = vi.fn(() => Promise.resolve())
   beforeEach(() => {
diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx
index f2ce6047481..2e237468b3d 100644
--- a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { UpdateInProgressModal } from '../UpdateInProgressModal'
 
-const render = (props: React.ComponentProps<typeof UpdateInProgressModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof UpdateInProgressModal>) => {
   return renderWithProviders(<UpdateInProgressModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('UpdateInProgressModal', () => {
-  let props: React.ComponentProps<typeof UpdateInProgressModal>
+  let props: ComponentProps<typeof UpdateInProgressModal>
   beforeEach(() => {
     props = {
       subsystem: 'pipette_right',
diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateNeededModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateNeededModal.test.tsx
index 53c91223b47..eb8e1cdcc5b 100644
--- a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateNeededModal.test.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateNeededModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -12,6 +11,7 @@ import { UpdateNeededModal } from '../UpdateNeededModal'
 import { UpdateInProgressModal } from '../UpdateInProgressModal'
 import { UpdateResultsModal } from '../UpdateResultsModal'
 
+import type { ComponentProps } from 'react'
 import type {
   BadPipette,
   SubsystemUpdateProgressData,
@@ -21,14 +21,14 @@ vi.mock('@opentrons/react-api-client')
 vi.mock('../UpdateInProgressModal')
 vi.mock('../UpdateResultsModal')
 
-const render = (props: React.ComponentProps<typeof UpdateNeededModal>) => {
+const render = (props: ComponentProps<typeof UpdateNeededModal>) => {
   return renderWithProviders(<UpdateNeededModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('UpdateNeededModal', () => {
-  let props: React.ComponentProps<typeof UpdateNeededModal>
+  let props: ComponentProps<typeof UpdateNeededModal>
   const refetch = vi.fn(() => Promise.resolve())
   const updateSubsystem = vi.fn(() =>
     Promise.resolve({
diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateResultsModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateResultsModal.test.tsx
index 29c5233db45..5c4f3f02473 100644
--- a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateResultsModal.test.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateResultsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { UpdateResultsModal } from '../UpdateResultsModal'
 
-const render = (props: React.ComponentProps<typeof UpdateResultsModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof UpdateResultsModal>) => {
   return renderWithProviders(<UpdateResultsModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('UpdateResultsModal', () => {
-  let props: React.ComponentProps<typeof UpdateResultsModal>
+  let props: ComponentProps<typeof UpdateResultsModal>
   beforeEach(() => {
     props = {
       isSuccess: true,
diff --git a/app/src/organisms/GripperWizardFlows/MovePin.tsx b/app/src/organisms/GripperWizardFlows/MovePin.tsx
index 1cf5153eaa5..b4cb6ebcf25 100644
--- a/app/src/organisms/GripperWizardFlows/MovePin.tsx
+++ b/app/src/organisms/GripperWizardFlows/MovePin.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 import { EXTENSION } from '@opentrons/shared-data'
 import {
@@ -25,6 +24,7 @@ import movePinRearToStorage from '/app/assets/videos/gripper-wizards/PIN_FROM_RE
 import calibratingFrontJaw from '/app/assets/videos/gripper-wizards/CALIBRATING_FRONT_JAW.webm'
 import calibratingRearJaw from '/app/assets/videos/gripper-wizards/CALIBRATING_REAR_JAW.webm'
 
+import type { ReactNode } from 'react'
 import type { Coordinates } from '@opentrons/shared-data'
 import type { CreateMaintenanceCommand } from '/app/resources/runs'
 import type { GripperWizardStepProps, MovePinStep } from './types'
@@ -137,10 +137,10 @@ export const MovePin = (props: MovePinProps): JSX.Element | null => {
     [m in typeof movement]: {
       inProgressText: string
       header: string
-      body: React.ReactNode
+      body: ReactNode
       buttonText: string
-      prepImage: React.ReactNode
-      inProgressImage?: React.ReactNode
+      prepImage: ReactNode
+      inProgressImage?: ReactNode
     }
   } = {
     [MOVE_PIN_TO_FRONT_JAW]: {
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/BeforeBeginning.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/BeforeBeginning.test.tsx
index 888e6ba30b2..da3b45eec62 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/BeforeBeginning.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/BeforeBeginning.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -8,15 +7,17 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { BeforeBeginning } from '../BeforeBeginning'
 import { GRIPPER_FLOW_TYPES } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/InProgressModal/InProgressModal')
 
-const render = (props: React.ComponentProps<typeof BeforeBeginning>) => {
+const render = (props: ComponentProps<typeof BeforeBeginning>) => {
   return renderWithProviders(<BeforeBeginning {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('BeforeBeginning', () => {
-  let props: React.ComponentProps<typeof BeforeBeginning>
+  let props: ComponentProps<typeof BeforeBeginning>
   beforeEach(() => {
     props = {
       goBack: vi.fn(),
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx
index 4b20f234bfb..871a58d1ba9 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -7,12 +6,14 @@ import { i18n } from '/app/i18n'
 import { ExitConfirmation } from '../ExitConfirmation'
 import { GRIPPER_FLOW_TYPES } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 describe('ExitConfirmation', () => {
   const mockBack = vi.fn()
   const mockExit = vi.fn()
 
   const render = (
-    props: Partial<React.ComponentProps<typeof ExitConfirmation>> = {}
+    props: Partial<ComponentProps<typeof ExitConfirmation>> = {}
   ) => {
     return renderWithProviders(
       <ExitConfirmation
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx
index cb2020c5bfe..f08462126cd 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -9,6 +8,8 @@ import { i18n } from '/app/i18n'
 import { MountGripper } from '../MountGripper'
 import { GRIPPER_FLOW_TYPES } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
 const mockRunId = 'fakeRunId'
@@ -19,9 +20,7 @@ describe('MountGripper', () => {
   let mockChainRunCommands: any
   let mockSetErrorMessage: any
 
-  const render = (
-    props: Partial<React.ComponentProps<typeof MountGripper>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof MountGripper>> = {}) => {
     return renderWithProviders(
       <MountGripper
         maintenanceRunId={mockRunId}
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx
index ecf3ef6f3c0..950a47655ef 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect, afterEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -13,6 +12,8 @@ import {
   REMOVE_PIN_FROM_REAR_JAW,
   SECTIONS,
 } from '../constants'
+
+import type { ComponentProps } from 'react'
 import type { CommandData } from '@opentrons/api-client'
 
 describe('MovePin', () => {
@@ -25,9 +26,7 @@ describe('MovePin', () => {
   const mockSetFrontJawOffset = vi.fn()
   const mockRunId = 'fakeRunId'
 
-  const render = (
-    props: Partial<React.ComponentProps<typeof MovePin>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof MovePin>> = {}) => {
     return renderWithProviders(
       <MovePin
         maintenanceRunId={mockRunId}
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx
index d071fda3c69..f4dfe01250f 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -13,11 +12,11 @@ import {
   SUCCESSFULLY_DETACHED,
 } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 describe('Success', () => {
   const mockProceed = vi.fn()
-  const render = (
-    props: Partial<React.ComponentProps<typeof Success>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof Success>> = {}) => {
     return renderWithProviders(
       <Success
         proceed={mockProceed}
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx
index 73c2d863366..88be05067b6 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 
@@ -11,6 +10,8 @@ import { i18n } from '/app/i18n'
 import { UnmountGripper } from '../UnmountGripper'
 import { GRIPPER_FLOW_TYPES } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
 const mockRunId = 'fakeRunId'
@@ -21,7 +22,7 @@ describe('UnmountGripper', () => {
   let mockChainRunCommands: any
   let mockSetErrorMessage: any
   const render = (
-    props: Partial<React.ComponentProps<typeof UnmountGripper>> = {}
+    props: Partial<ComponentProps<typeof UnmountGripper>> = {}
   ) => {
     return renderWithProviders(
       <UnmountGripper
diff --git a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleDesktopModalBody.test.tsx b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleDesktopModalBody.test.tsx
index 41edc4439c6..a4bb0f1e1f8 100644
--- a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleDesktopModalBody.test.tsx
+++ b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleDesktopModalBody.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { when } from 'vitest-when'
@@ -9,13 +8,13 @@ import { IncompatibleModuleDesktopModalBody } from '../IncompatibleModuleDesktop
 import { useIsFlex } from '/app/redux-resources/robots'
 import * as Fixtures from '../__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux-resources/robots')
 
 const getRenderer = (isFlex: boolean) => {
   when(useIsFlex).calledWith('otie').thenReturn(isFlex)
-  return (
-    props: React.ComponentProps<typeof IncompatibleModuleDesktopModalBody>
-  ) => {
+  return (props: ComponentProps<typeof IncompatibleModuleDesktopModalBody>) => {
     return renderWithProviders(
       <IncompatibleModuleDesktopModalBody {...props} />,
       {
@@ -26,7 +25,7 @@ const getRenderer = (isFlex: boolean) => {
 }
 
 describe('IncompatibleModuleDesktopModalBody', () => {
-  let props: React.ComponentProps<typeof IncompatibleModuleDesktopModalBody>
+  let props: ComponentProps<typeof IncompatibleModuleDesktopModalBody>
   beforeEach(() => {
     props = {
       modules: [],
diff --git a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleODDModalBody.test.tsx b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleODDModalBody.test.tsx
index e2d4e1a2af0..9c59e9a821a 100644
--- a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleODDModalBody.test.tsx
+++ b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleODDModalBody.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -7,8 +6,10 @@ import { i18n } from '/app/i18n'
 import { IncompatibleModuleODDModalBody } from '../IncompatibleModuleODDModalBody'
 import * as Fixtures from '../__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 const render = (
-  props: React.ComponentProps<typeof IncompatibleModuleODDModalBody>
+  props: ComponentProps<typeof IncompatibleModuleODDModalBody>
 ) => {
   return renderWithProviders(<IncompatibleModuleODDModalBody {...props} />, {
     i18nInstance: i18n,
@@ -16,7 +17,7 @@ const render = (
 }
 
 describe('IncompatibleModuleODDModalBody', () => {
-  let props: React.ComponentProps<typeof IncompatibleModuleODDModalBody>
+  let props: ComponentProps<typeof IncompatibleModuleODDModalBody>
   beforeEach(() => {
     props = {
       modules: [],
diff --git a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx
index d3da5d17958..24e35265621 100644
--- a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx
+++ b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest'
 import { when } from 'vitest-when'
@@ -18,6 +17,8 @@ import {
 } from '/app/App/portal'
 import * as Fixtures from '../__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../hooks')
 vi.mock('../IncompatibleModuleODDModalBody')
 vi.mock('../IncompatibleModuleDesktopModalBody')
@@ -32,7 +33,7 @@ const getRenderer = (incompatibleModules: AttachedModule[]) => {
   vi.mocked(IncompatibleModuleDesktopModalBody).mockReturnValue(
     <div>TEST ELEMENT DESKTOP</div>
   )
-  return (props: React.ComponentProps<typeof IncompatibleModuleTakeover>) => {
+  return (props: ComponentProps<typeof IncompatibleModuleTakeover>) => {
     const [rendered] = renderWithProviders(
       <>
         <PortalRoot />
@@ -55,7 +56,7 @@ const getRenderer = (incompatibleModules: AttachedModule[]) => {
 }
 
 describe('IncompatibleModuleTakeover', () => {
-  let props: React.ComponentProps<typeof IncompatibleModuleTakeover>
+  let props: ComponentProps<typeof IncompatibleModuleTakeover>
   beforeEach(() => {
     props = { isOnDevice: true }
   })
diff --git a/app/src/organisms/IncompatibleModule/hooks/__tests__/useIncompatibleModulesAttached.test.tsx b/app/src/organisms/IncompatibleModule/hooks/__tests__/useIncompatibleModulesAttached.test.tsx
index 7e1a7342db1..c58d75c7b6d 100644
--- a/app/src/organisms/IncompatibleModule/hooks/__tests__/useIncompatibleModulesAttached.test.tsx
+++ b/app/src/organisms/IncompatibleModule/hooks/__tests__/useIncompatibleModulesAttached.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
 import { vi, it, expect, describe, beforeEach } from 'vitest'
@@ -8,16 +7,17 @@ import { useIncompatibleModulesAttached } from '..'
 
 import * as Fixtures from '../__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Modules } from '@opentrons/api-client'
 import type { UseQueryResult } from 'react-query'
 vi.mock('@opentrons/react-api-client')
 
 describe('useIncompatibleModulesAttached', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
-    const clientProvider: React.FunctionComponent<{
-      children: React.ReactNode
+    const clientProvider: FunctionComponent<{
+      children: ReactNode
     }> = ({ children }) => (
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     )
diff --git a/app/src/organisms/InterventionModal/__tests__/InterventionCommandMesage.test.tsx b/app/src/organisms/InterventionModal/__tests__/InterventionCommandMesage.test.tsx
index 6f3a688b808..a09994c929d 100644
--- a/app/src/organisms/InterventionModal/__tests__/InterventionCommandMesage.test.tsx
+++ b/app/src/organisms/InterventionModal/__tests__/InterventionCommandMesage.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -10,16 +9,16 @@ import {
   truncatedCommandMessage,
 } from '../__fixtures__'
 
-const render = (
-  props: React.ComponentProps<typeof InterventionCommandMessage>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InterventionCommandMessage>) => {
   return renderWithProviders(<InterventionCommandMessage {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InterventionCommandMessage', () => {
-  let props: React.ComponentProps<typeof InterventionCommandMessage>
+  let props: ComponentProps<typeof InterventionCommandMessage>
 
   it('truncates command text greater than 220 characters long', () => {
     props = { commandMessage: longCommandMessage }
diff --git a/app/src/organisms/InterventionModal/__tests__/InterventionCommandMessage.test.tsx b/app/src/organisms/InterventionModal/__tests__/InterventionCommandMessage.test.tsx
index 6f3a688b808..a09994c929d 100644
--- a/app/src/organisms/InterventionModal/__tests__/InterventionCommandMessage.test.tsx
+++ b/app/src/organisms/InterventionModal/__tests__/InterventionCommandMessage.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -10,16 +9,16 @@ import {
   truncatedCommandMessage,
 } from '../__fixtures__'
 
-const render = (
-  props: React.ComponentProps<typeof InterventionCommandMessage>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InterventionCommandMessage>) => {
   return renderWithProviders(<InterventionCommandMessage {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InterventionCommandMessage', () => {
-  let props: React.ComponentProps<typeof InterventionCommandMessage>
+  let props: ComponentProps<typeof InterventionCommandMessage>
 
   it('truncates command text greater than 220 characters long', () => {
     props = { commandMessage: longCommandMessage }
diff --git a/app/src/organisms/InterventionModal/__tests__/InterventionModal.test.tsx b/app/src/organisms/InterventionModal/__tests__/InterventionModal.test.tsx
index 59b8c659a1a..bb4799e1754 100644
--- a/app/src/organisms/InterventionModal/__tests__/InterventionModal.test.tsx
+++ b/app/src/organisms/InterventionModal/__tests__/InterventionModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, renderHook, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
@@ -18,6 +17,7 @@ import {
 import { InterventionModal, useInterventionModal } from '..'
 import { useIsFlex } from '/app/redux-resources/robots'
 
+import type { ComponentProps } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 import type { RunData } from '@opentrons/api-client'
 
@@ -90,14 +90,14 @@ describe('useInterventionModal', () => {
   })
 })
 
-const render = (props: React.ComponentProps<typeof InterventionModal>) => {
+const render = (props: ComponentProps<typeof InterventionModal>) => {
   return renderWithProviders(<InterventionModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InterventionModal', () => {
-  let props: React.ComponentProps<typeof InterventionModal>
+  let props: ComponentProps<typeof InterventionModal>
   beforeEach(() => {
     props = {
       robotName: ROBOT_NAME,
diff --git a/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx b/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx
index db70b1c096d..fb39565b161 100644
--- a/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx
+++ b/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 
@@ -10,6 +9,7 @@ import { getIsLabwareOffsetCodeSnippetsOn } from '/app/redux/config'
 import { getLabwareDefinitionsFromCommands } from '/app/local-resources/labware'
 import { LegacyApplyHistoricOffsets } from '..'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { OffsetCandidate } from '../hooks/useOffsetCandidatesForAnalysis'
 
@@ -64,11 +64,9 @@ const mockFourthCandidate: OffsetCandidate = {
 describe('ApplyHistoricOffsets', () => {
   const mockSetShouldApplyOffsets = vi.fn()
   const render = (
-    props?: Partial<React.ComponentProps<typeof LegacyApplyHistoricOffsets>>
+    props?: Partial<ComponentProps<typeof LegacyApplyHistoricOffsets>>
   ) =>
-    renderWithProviders<
-      React.ComponentProps<typeof LegacyApplyHistoricOffsets>
-    >(
+    renderWithProviders<ComponentProps<typeof LegacyApplyHistoricOffsets>>(
       <LegacyApplyHistoricOffsets
         offsetCandidates={[
           mockFirstCandidate,
diff --git a/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx b/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx
index 8b527e239f1..e794e0bc99c 100644
--- a/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx
+++ b/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx
@@ -4,6 +4,8 @@ import { fixture96Plate, fixtureTiprackAdapter } from '@opentrons/shared-data'
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { LabwareOffsetTable } from '../LabwareOffsetTable'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { OffsetCandidate } from '../hooks/useOffsetCandidatesForAnalysis'
 
@@ -52,7 +54,7 @@ const mockFourthCandidate: OffsetCandidate = {
   runCreatedAt: '2022-05-12T13:33:51.012179+00:00',
 }
 const render = () =>
-  renderWithProviders<React.ComponentProps<typeof LabwareOffsetTable>>(
+  renderWithProviders<ComponentProps<typeof LabwareOffsetTable>>(
     <LabwareOffsetTable
       labwareDefinitions={[mockLabwareDef, mockAdapterDef]}
       offsetCandidates={[
diff --git a/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx b/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx
index a697fabb2d3..2f25f6ea2fa 100644
--- a/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx
+++ b/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { when } from 'vitest-when'
 import { renderHook, waitFor } from '@testing-library/react'
@@ -8,6 +7,7 @@ import { useHistoricRunDetails } from '../useHistoricRunDetails'
 import { mockRunningRun } from '/app/resources/runs/__fixtures__'
 import { mockSuccessQueryResults } from '../../../../__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { RunData } from '@opentrons/api-client'
 
 vi.mock('/app/resources/runs/useNotifyAllRunsQuery')
@@ -40,7 +40,7 @@ describe('useHistoricRunDetails', () => {
     )
 
   it('returns historical run details with newest first', async () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <div>{children}</div>
     const { result } = renderHook(useHistoricRunDetails, { wrapper })
@@ -57,7 +57,7 @@ describe('useHistoricRunDetails', () => {
           links: {},
         })
       )
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <div>{children}</div>
     const { result } = renderHook(
diff --git a/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx b/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx
index 832417cb9af..b4581abe15e 100644
--- a/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx
+++ b/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
 import { renderHook, waitFor } from '@testing-library/react'
@@ -13,6 +12,7 @@ import { getLabwareLocationCombos } from '../getLabwareLocationCombos'
 import { useOffsetCandidatesForAnalysis } from '../useOffsetCandidatesForAnalysis'
 import { storedProtocolData as storedProtocolDataFixture } from '/app/redux/protocol-storage/__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { OffsetCandidate } from '../useOffsetCandidatesForAnalysis'
 
@@ -102,7 +102,7 @@ describe('useOffsetCandidatesForAnalysis', () => {
   })
 
   it('returns an empty array if robot ip but no analysis output', async () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <div>{children}</div>
     const { result } = renderHook(
@@ -115,7 +115,7 @@ describe('useOffsetCandidatesForAnalysis', () => {
   })
 
   it('returns an empty array if no robot ip', async () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <div>{children}</div>
     const { result } = renderHook(
@@ -131,7 +131,7 @@ describe('useOffsetCandidatesForAnalysis', () => {
     })
   })
   it('returns candidates for each first match with newest first', async () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <div>{children}</div>
     const { result } = renderHook(
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/PrepareSpace.tsx b/app/src/organisms/LegacyLabwarePositionCheck/PrepareSpace.tsx
index 8820acfef33..f77973cbc1f 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/PrepareSpace.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/PrepareSpace.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -23,6 +22,7 @@ import { SmallButton } from '/app/atoms/buttons'
 import { NeedHelpLink } from '/app/molecules/OT2CalibrationNeedHelpLink'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { ReactNode } from 'react'
 import type {
   CompletedProtocolAnalysis,
   LabwareDefinition2,
@@ -61,8 +61,8 @@ interface PrepareSpaceProps extends Omit<CheckLabwareStep, 'section'> {
   labwareDef: LabwareDefinition2
   protocolData: CompletedProtocolAnalysis
   confirmPlacement: () => void
-  header: React.ReactNode
-  body: React.ReactNode
+  header: ReactNode
+  body: ReactNode
   robotType: RobotType
 }
 export const PrepareSpace = (props: PrepareSpaceProps): JSX.Element | null => {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/TwoUpTileLayout.tsx b/app/src/organisms/LegacyLabwarePositionCheck/TwoUpTileLayout.tsx
index 7c6cd309bb4..396d49d5150 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/TwoUpTileLayout.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/TwoUpTileLayout.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled, { css } from 'styled-components'
 import {
   DIRECTION_COLUMN,
@@ -12,6 +11,8 @@ import {
   DISPLAY_INLINE_BLOCK,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 const Title = styled.h1`
   ${TYPOGRAPHY.h1Default};
   margin-bottom: ${SPACING.spacing8};
@@ -36,11 +37,11 @@ export interface TwoUpTileLayoutProps {
   /** main header text on left half */
   title: string
   /** paragraph text below title on left half */
-  body: React.ReactNode
+  body: ReactNode
   /** entire contents of the right half */
-  rightElement: React.ReactNode
+  rightElement: ReactNode
   /** footer underneath both halves of content */
-  footer: React.ReactNode
+  footer: ReactNode
 }
 
 export function TwoUpTileLayout(props: TwoUpTileLayoutProps): JSX.Element {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/CheckItem.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/CheckItem.test.tsx
index 17442dfc42b..5c2907c5276 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/CheckItem.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/CheckItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest'
 
@@ -15,6 +14,7 @@ import { CheckItem } from '../CheckItem'
 import { SECTIONS } from '../constants'
 import { mockCompletedAnalysis, mockExistingOffsets } from '../__fixtures__'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/redux/config')
@@ -23,14 +23,14 @@ vi.mock('../../Desktop/Devices/hooks')
 const mockStartPosition = { x: 10, y: 20, z: 30 }
 const mockEndPosition = { x: 9, y: 19, z: 29 }
 
-const render = (props: React.ComponentProps<typeof CheckItem>) => {
+const render = (props: ComponentProps<typeof CheckItem>) => {
   return renderWithProviders(<CheckItem {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('CheckItem', () => {
-  let props: React.ComponentProps<typeof CheckItem>
+  let props: ComponentProps<typeof CheckItem>
   let mockChainRunCommands: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ExitConfirmation.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ExitConfirmation.test.tsx
index 6a93da71dc5..e710c991ccb 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ExitConfirmation.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ExitConfirmation.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest'
 import { ExitConfirmation } from '../ExitConfirmation'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 
-const render = (props: React.ComponentProps<typeof ExitConfirmation>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ExitConfirmation>) => {
   return renderWithProviders(<ExitConfirmation {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ExitConfirmation', () => {
-  let props: React.ComponentProps<typeof ExitConfirmation>
+  let props: ComponentProps<typeof ExitConfirmation>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/PickUpTip.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/PickUpTip.test.tsx
index c23e1c1af2c..286e6f5f095 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/PickUpTip.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/PickUpTip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { it, describe, beforeEach, vi, afterEach, expect } from 'vitest'
 import { FLEX_ROBOT_TYPE, HEATERSHAKER_MODULE_V1 } from '@opentrons/shared-data'
@@ -8,23 +7,25 @@ import { getIsOnDevice } from '/app/redux/config'
 import { PickUpTip } from '../PickUpTip'
 import { SECTIONS } from '../constants'
 import { mockCompletedAnalysis, mockExistingOffsets } from '../__fixtures__'
-import type { CommandData } from '@opentrons/api-client'
 import { nestedTextMatcher, renderWithProviders } from '/app/__testing-utils__'
+
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
+import type { CommandData } from '@opentrons/api-client'
 
 vi.mock('/app/resources/protocols')
 vi.mock('/app/redux/config')
 
 const mockStartPosition = { x: 10, y: 20, z: 30 }
 
-const render = (props: React.ComponentProps<typeof PickUpTip>) => {
+const render = (props: ComponentProps<typeof PickUpTip>) => {
   return renderWithProviders(<PickUpTip {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('PickUpTip', () => {
-  let props: React.ComponentProps<typeof PickUpTip>
+  let props: ComponentProps<typeof PickUpTip>
   let mockChainRunCommands: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ResultsSummary.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ResultsSummary.test.tsx
index 24101904de4..30a29496aaf 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ResultsSummary.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ResultsSummary.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '/app/i18n'
@@ -13,16 +12,18 @@ import {
   mockWorkingOffsets,
 } from '../__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof ResultsSummary>) => {
+const render = (props: ComponentProps<typeof ResultsSummary>) => {
   return renderWithProviders(<ResultsSummary {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ResultsSummary', () => {
-  let props: React.ComponentProps<typeof ResultsSummary>
+  let props: ComponentProps<typeof ResultsSummary>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ReturnTip.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ReturnTip.test.tsx
index 0af86097f9c..112be630a31 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ReturnTip.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ReturnTip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 
@@ -12,17 +11,19 @@ import { useProtocolMetadata } from '/app/resources/protocols'
 import { getIsOnDevice } from '/app/redux/config'
 import { ReturnTip } from '../ReturnTip'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 vi.mock('/app/resources/protocols')
 
-const render = (props: React.ComponentProps<typeof ReturnTip>) => {
+const render = (props: ComponentProps<typeof ReturnTip>) => {
   return renderWithProviders(<ReturnTip {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ReturnTip', () => {
-  let props: React.ComponentProps<typeof ReturnTip>
+  let props: ComponentProps<typeof ReturnTip>
   let mockChainRunCommands
 
   beforeEach(() => {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/TipConfirmation.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/TipConfirmation.test.tsx
index 8f8878a7122..a262641fd84 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/TipConfirmation.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/TipConfirmation.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { TipConfirmation } from '../TipConfirmation'
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 
-const render = (props: React.ComponentProps<typeof TipConfirmation>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof TipConfirmation>) => {
   return renderWithProviders(<TipConfirmation {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TipConfirmation', () => {
-  let props: React.ComponentProps<typeof TipConfirmation>
+  let props: ComponentProps<typeof TipConfirmation>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/useLaunchLPC.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/useLaunchLPC.test.tsx
index 070931ee998..83613b0d778 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/useLaunchLPC.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/useLaunchLPC.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import configureStore from 'redux-mock-store'
 import { when } from 'vitest-when'
@@ -27,6 +26,7 @@ import {
 import { useLaunchLegacyLPC } from '../useLaunchLegacyLPC'
 import { LegacyLabwarePositionCheck } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Mock } from 'vitest'
 import type { LabwareOffset } from '@opentrons/api-client'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
@@ -57,7 +57,7 @@ const mockCurrentOffsets: LabwareOffset[] = [
 const mockLabwareDef = fixtureTiprack300ul as LabwareDefinition2
 
 describe('useLaunchLPC hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let mockCreateMaintenanceRun: Mock
   let mockCreateLabwareDefinition: Mock
   let mockDeleteMaintenanceRun: Mock
diff --git a/app/src/organisms/LiquidsLabwareDetailsModal/LiquidDetailCard.tsx b/app/src/organisms/LiquidsLabwareDetailsModal/LiquidDetailCard.tsx
index cb1591dc72f..7dc33069500 100644
--- a/app/src/organisms/LiquidsLabwareDetailsModal/LiquidDetailCard.tsx
+++ b/app/src/organisms/LiquidsLabwareDetailsModal/LiquidDetailCard.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
 import {
@@ -27,6 +26,8 @@ import {
 import { getIsOnDevice } from '/app/redux/config'
 import { getWellRangeForLiquidLabwarePair } from '/app/transformations/analysis'
 
+import type { Dispatch, SetStateAction } from 'react'
+
 export const CARD_OUTLINE_BORDER_STYLE = css`
   border-style: ${BORDERS.styleSolid};
   border-width: 1px;
@@ -56,7 +57,7 @@ interface LiquidDetailCardProps {
   description: string | null
   displayColor: string
   volumeByWell: { [well: string]: number }
-  setSelectedValue: React.Dispatch<React.SetStateAction<string | undefined>>
+  setSelectedValue: Dispatch<SetStateAction<string | undefined>>
   selectedValue: string | undefined
   labwareWellOrdering: string[][]
 }
diff --git a/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidDetailCard.test.tsx b/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidDetailCard.test.tsx
index a96c8128897..522fae501b1 100644
--- a/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidDetailCard.test.tsx
+++ b/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidDetailCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -12,12 +11,14 @@ import {
 } from '/app/redux/analytics'
 import { getIsOnDevice } from '/app/redux/config'
 import { LiquidDetailCard } from '../LiquidDetailCard'
+
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/redux/analytics')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof LiquidDetailCard>) => {
+const render = (props: ComponentProps<typeof LiquidDetailCard>) => {
   return renderWithProviders(<LiquidDetailCard {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -25,7 +26,7 @@ const render = (props: React.ComponentProps<typeof LiquidDetailCard>) => {
 let mockTrackEvent: Mock
 
 describe('LiquidDetailCard', () => {
-  let props: React.ComponentProps<typeof LiquidDetailCard>
+  let props: ComponentProps<typeof LiquidDetailCard>
 
   beforeEach(() => {
     mockTrackEvent = vi.fn()
diff --git a/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidsLabwareDetailsModal.test.tsx b/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidsLabwareDetailsModal.test.tsx
index 967a840ee75..e70756ed3f3 100644
--- a/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidsLabwareDetailsModal.test.tsx
+++ b/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidsLabwareDetailsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -21,6 +20,7 @@ import {
 import { LiquidsLabwareDetailsModal } from '../LiquidsLabwareDetailsModal'
 import { LiquidDetailCard } from '../LiquidDetailCard'
 
+import type { ComponentProps } from 'react'
 import type * as Components from '@opentrons/components'
 import type * as SharedData from '@opentrons/shared-data'
 
@@ -44,16 +44,14 @@ vi.mock('/app/transformations/commands')
 vi.mock('/app/transformations/analysis')
 vi.mock('../LiquidDetailCard')
 
-const render = (
-  props: React.ComponentProps<typeof LiquidsLabwareDetailsModal>
-) => {
+const render = (props: ComponentProps<typeof LiquidsLabwareDetailsModal>) => {
   return renderWithProviders(<LiquidsLabwareDetailsModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('LiquidsLabwareDetailsModal', () => {
-  let props: React.ComponentProps<typeof LiquidsLabwareDetailsModal>
+  let props: ComponentProps<typeof LiquidsLabwareDetailsModal>
   beforeEach(() => {
     window.HTMLElement.prototype.scrollIntoView = function () {}
     props = {
diff --git a/app/src/organisms/LocationConflictModal/__tests__/LocationConflictModal.test.tsx b/app/src/organisms/LocationConflictModal/__tests__/LocationConflictModal.test.tsx
index 207caa02a1b..1d72ae1b858 100644
--- a/app/src/organisms/LocationConflictModal/__tests__/LocationConflictModal.test.tsx
+++ b/app/src/organisms/LocationConflictModal/__tests__/LocationConflictModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -21,6 +20,7 @@ import { useCloseCurrentRun } from '/app/resources/runs'
 import { LocationConflictModal } from '../LocationConflictModal'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { DeckConfiguration } from '@opentrons/shared-data'
 
@@ -33,7 +33,7 @@ const mockFixture = {
   cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
 }
 
-const render = (props: React.ComponentProps<typeof LocationConflictModal>) => {
+const render = (props: ComponentProps<typeof LocationConflictModal>) => {
   return renderWithProviders(
     <MemoryRouter>
       <LocationConflictModal {...props} />
@@ -45,7 +45,7 @@ const render = (props: React.ComponentProps<typeof LocationConflictModal>) => {
 }
 
 describe('LocationConflictModal', () => {
-  let props: React.ComponentProps<typeof LocationConflictModal>
+  let props: ComponentProps<typeof LocationConflictModal>
   const mockUpdate = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ModuleCard/Collapsible.tsx b/app/src/organisms/ModuleCard/Collapsible.tsx
index cc15a88d4a0..00f032b52ef 100644
--- a/app/src/organisms/ModuleCard/Collapsible.tsx
+++ b/app/src/organisms/ModuleCard/Collapsible.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -13,13 +12,15 @@ import {
 } from '@opentrons/components'
 import type { IconName } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface CollapsibleProps {
   expanded: boolean
-  title: React.ReactNode
+  title: ReactNode
   expandedIcon?: IconName
   collapsedIcon?: IconName
   toggleExpanded: () => void
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const EXPANDED_STYLE = css`
diff --git a/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx
index 35eb81ab169..e397eae0b50 100644
--- a/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -20,16 +19,18 @@ import {
 import { useCurrentRunStatus } from '/app/organisms/RunTimeControl'
 import { AboutModuleSlideout } from '../AboutModuleSlideout'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/organisms/RunTimeControl')
 
-const render = (props: React.ComponentProps<typeof AboutModuleSlideout>) => {
+const render = (props: ComponentProps<typeof AboutModuleSlideout>) => {
   return renderWithProviders(<AboutModuleSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('AboutModuleSlideout', () => {
-  let props: React.ComponentProps<typeof AboutModuleSlideout>
+  let props: ComponentProps<typeof AboutModuleSlideout>
   beforeEach(() => {
     props = {
       module: mockMagneticModule,
diff --git a/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx b/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx
index 3db479e3228..9ec5f2d0e1b 100644
--- a/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx
@@ -1,16 +1,17 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { Collapsible } from '../Collapsible'
 
-const render = (props: React.ComponentProps<typeof Collapsible>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Collapsible>) => {
   return renderWithProviders(<Collapsible {...props} />)[0]
 }
 
 describe('Collapsible', () => {
-  let props: React.ComponentProps<typeof Collapsible>
+  let props: ComponentProps<typeof Collapsible>
   beforeEach(() => {
     props = {
       expanded: false,
diff --git a/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx b/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx
index ccc81bcb167..6c4d41973da 100644
--- a/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmAttachmentModal } from '../ConfirmAttachmentModal'
 
-const render = (props: React.ComponentProps<typeof ConfirmAttachmentModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConfirmAttachmentModal>) => {
   return renderWithProviders(<ConfirmAttachmentModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ConfirmAttachmentBanner', () => {
-  let props: React.ComponentProps<typeof ConfirmAttachmentModal>
+  let props: ComponentProps<typeof ConfirmAttachmentModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx b/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx
index bde80a0d7d2..2a93208d89e 100644
--- a/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -9,6 +8,8 @@ import {
   mockTemperatureModule,
   mockThermocycler,
 } from '/app/redux/modules/__fixtures__'
+
+import type { ComponentProps } from 'react'
 import type {
   HeaterShakerModule,
   ThermocyclerModule,
@@ -71,14 +72,14 @@ const mockErrorHeaterShaker = {
   },
 } as HeaterShakerModule
 
-const render = (props: React.ComponentProps<typeof ErrorInfo>) => {
+const render = (props: ComponentProps<typeof ErrorInfo>) => {
   return renderWithProviders(<ErrorInfo {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ErrorInfo', () => {
-  let props: React.ComponentProps<typeof ErrorInfo>
+  let props: ComponentProps<typeof ErrorInfo>
   beforeEach(() => {
     props = {
       attachedModule: mockTemperatureModule,
diff --git a/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx b/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx
index 13395bcff69..f3eaa7dc0ed 100644
--- a/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,16 +5,16 @@ import { i18n } from '/app/i18n'
 import { mockTemperatureModule } from '/app/redux/modules/__fixtures__'
 import { FirmwareUpdateFailedModal } from '../FirmwareUpdateFailedModal'
 
-const render = (
-  props: React.ComponentProps<typeof FirmwareUpdateFailedModal>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof FirmwareUpdateFailedModal>) => {
   return renderWithProviders(<FirmwareUpdateFailedModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FirmwareUpdateFailedModal', () => {
-  let props: React.ComponentProps<typeof FirmwareUpdateFailedModal>
+  let props: ComponentProps<typeof FirmwareUpdateFailedModal>
   beforeEach(() => {
     props = {
       onCloseClick: vi.fn(),
diff --git a/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx
index 348fdb614d4..dab6f1fc7ad 100644
--- a/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,16 +5,18 @@ import { i18n } from '/app/i18n'
 import { StatusLabel } from '/app/atoms/StatusLabel'
 import { HeaterShakerModuleData } from '../HeaterShakerModuleData'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/StatusLabel')
 
-const render = (props: React.ComponentProps<typeof HeaterShakerModuleData>) => {
+const render = (props: ComponentProps<typeof HeaterShakerModuleData>) => {
   return renderWithProviders(<HeaterShakerModuleData {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HeaterShakerModuleData', () => {
-  let props: React.ComponentProps<typeof HeaterShakerModuleData>
+  let props: ComponentProps<typeof HeaterShakerModuleData>
   beforeEach(() => {
     props = {
       moduleData: {
diff --git a/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx
index 883d5b6bb7c..b02e5205f42 100644
--- a/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -9,16 +8,18 @@ import { i18n } from '/app/i18n'
 import { mockHeaterShaker } from '/app/redux/modules/__fixtures__'
 import { HeaterShakerSlideout } from '../HeaterShakerSlideout'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof HeaterShakerSlideout>) => {
+const render = (props: ComponentProps<typeof HeaterShakerSlideout>) => {
   return renderWithProviders(<HeaterShakerSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HeaterShakerSlideout', () => {
-  let props: React.ComponentProps<typeof HeaterShakerSlideout>
+  let props: ComponentProps<typeof HeaterShakerSlideout>
   let mockCreateLiveCommand = vi.fn()
 
   beforeEach(() => {
diff --git a/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx
index b6534d233e3..0440b16b251 100644
--- a/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, it, vi } from 'vitest'
 
@@ -8,16 +7,18 @@ import { StatusLabel } from '/app/atoms/StatusLabel'
 import { MagneticModuleData } from '../MagneticModuleData'
 import { mockMagneticModule } from '/app/redux/modules/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/StatusLabel')
 
-const render = (props: React.ComponentProps<typeof MagneticModuleData>) => {
+const render = (props: ComponentProps<typeof MagneticModuleData>) => {
   return renderWithProviders(<MagneticModuleData {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('MagneticModuleData', () => {
-  let props: React.ComponentProps<typeof MagneticModuleData>
+  let props: ComponentProps<typeof MagneticModuleData>
   beforeEach(() => {
     props = {
       moduleHeight: mockMagneticModule.data.height,
diff --git a/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx
index fa10546af90..c52817fb517 100644
--- a/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { COLORS } from '@opentrons/components'
@@ -13,15 +12,17 @@ import {
   mockMagneticModuleGen2,
 } from '/app/redux/modules/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof MagneticModuleSlideout>) => {
+const render = (props: ComponentProps<typeof MagneticModuleSlideout>) => {
   return renderWithProviders(<MagneticModuleSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('MagneticModuleSlideout', () => {
-  let props: React.ComponentProps<typeof MagneticModuleSlideout>
+  let props: ComponentProps<typeof MagneticModuleSlideout>
   let mockCreateLiveCommand = vi.fn()
   beforeEach(() => {
     mockCreateLiveCommand = vi.fn()
diff --git a/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx b/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx
index d30a885b759..078dfe12ada 100644
--- a/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -29,12 +28,13 @@ import { FirmwareUpdateFailedModal } from '../FirmwareUpdateFailedModal'
 import { ErrorInfo } from '../ErrorInfo'
 import { ModuleCard } from '..'
 
+import type { ComponentProps } from 'react'
+import type { Mock } from 'vitest'
 import type {
   HeaterShakerModule,
   MagneticModule,
   ThermocyclerModule,
 } from '/app/redux/modules/types'
-import type { Mock } from 'vitest'
 
 vi.mock('../ErrorInfo')
 vi.mock('../MagneticModuleData')
@@ -175,14 +175,14 @@ const mockEatToast = vi.fn()
 
 const MOCK_LATEST_REQUEST_ID = '1234'
 
-const render = (props: React.ComponentProps<typeof ModuleCard>) => {
+const render = (props: ComponentProps<typeof ModuleCard>) => {
   return renderWithProviders(<ModuleCard {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ModuleCard', () => {
-  let props: React.ComponentProps<typeof ModuleCard>
+  let props: ComponentProps<typeof ModuleCard>
   let mockHandleModuleApiRequests: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx b/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx
index 75701934e36..6e54dee83f9 100644
--- a/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -16,13 +15,14 @@ import { useIsFlex } from '/app/redux-resources/robots'
 import { useCurrentRunId, useRunStatuses } from '/app/resources/runs'
 import { ModuleOverflowMenu } from '../ModuleOverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { TemperatureStatus } from '@opentrons/api-client'
 
 vi.mock('/app/resources/legacy_sessions')
 vi.mock('/app/redux-resources/robots')
 vi.mock('/app/resources/runs')
 
-const render = (props: React.ComponentProps<typeof ModuleOverflowMenu>) => {
+const render = (props: ComponentProps<typeof ModuleOverflowMenu>) => {
   return renderWithProviders(<ModuleOverflowMenu {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -161,7 +161,7 @@ const mockThermocyclerGen2LidClosed = {
 } as any
 
 describe('ModuleOverflowMenu', () => {
-  let props: React.ComponentProps<typeof ModuleOverflowMenu>
+  let props: ComponentProps<typeof ModuleOverflowMenu>
   beforeEach(() => {
     vi.mocked(useIsLegacySessionInProgress).mockReturnValue(false)
     vi.mocked(useRunStatuses).mockReturnValue({
diff --git a/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx b/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx
index 87f340b2845..1b3abfab5ce 100644
--- a/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ModuleSetupModal } from '../ModuleSetupModal'
 
-const render = (props: React.ComponentProps<typeof ModuleSetupModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ModuleSetupModal>) => {
   return renderWithProviders(<ModuleSetupModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ModuleSetupModal', () => {
-  let props: React.ComponentProps<typeof ModuleSetupModal>
+  let props: ComponentProps<typeof ModuleSetupModal>
   beforeEach(() => {
     props = { close: vi.fn(), moduleDisplayName: 'mockModuleDisplayName' }
   })
diff --git a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx
index 5b851ce5796..a9e2d88fb26 100644
--- a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -8,16 +7,18 @@ import { StatusLabel } from '/app/atoms/StatusLabel'
 import { TemperatureModuleData } from '../TemperatureModuleData'
 import { mockTemperatureModuleGen2 } from '/app/redux/modules/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/StatusLabel')
 
-const render = (props: React.ComponentProps<typeof TemperatureModuleData>) => {
+const render = (props: ComponentProps<typeof TemperatureModuleData>) => {
   return renderWithProviders(<TemperatureModuleData {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TemperatureModuleData', () => {
-  let props: React.ComponentProps<typeof TemperatureModuleData>
+  let props: ComponentProps<typeof TemperatureModuleData>
   beforeEach(() => {
     props = {
       moduleStatus: mockTemperatureModuleGen2.data.status,
diff --git a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx
index ce65306741d..12ecc39f2f1 100644
--- a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -12,18 +11,18 @@ import {
 } from '/app/redux/modules/__fixtures__'
 import { TemperatureModuleSlideout } from '../TemperatureModuleSlideout'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (
-  props: React.ComponentProps<typeof TemperatureModuleSlideout>
-) => {
+const render = (props: ComponentProps<typeof TemperatureModuleSlideout>) => {
   return renderWithProviders(<TemperatureModuleSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TemperatureModuleSlideout', () => {
-  let props: React.ComponentProps<typeof TemperatureModuleSlideout>
+  let props: ComponentProps<typeof TemperatureModuleSlideout>
   let mockCreateLiveCommand = vi.fn()
 
   beforeEach(() => {
diff --git a/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx
index f11816df8b6..865c656b1ed 100644
--- a/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -12,12 +11,14 @@ import { useLatchControls } from '../hooks'
 import { TestShakeSlideout } from '../TestShakeSlideout'
 import { ModuleSetupModal } from '../ModuleSetupModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 vi.mock('@opentrons/react-api-client')
 vi.mock('../hooks')
 vi.mock('../ModuleSetupModal')
 
-const render = (props: React.ComponentProps<typeof TestShakeSlideout>) => {
+const render = (props: ComponentProps<typeof TestShakeSlideout>) => {
   return renderWithProviders(<TestShakeSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -90,7 +91,7 @@ const mockMovingHeaterShaker = {
 } as any
 
 describe('TestShakeSlideout', () => {
-  let props: React.ComponentProps<typeof TestShakeSlideout>
+  let props: ComponentProps<typeof TestShakeSlideout>
   let mockCreateLiveCommand = vi.fn()
   const mockToggleLatch = vi.fn()
   beforeEach(() => {
diff --git a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx
index 0885c74bb5d..fc2346cf9ba 100644
--- a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx
@@ -1,6 +1,4 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
-
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -11,9 +9,10 @@ import {
 } from '/app/redux/modules/__fixtures__'
 import { ThermocyclerModuleData } from '../ThermocyclerModuleData'
 
+import type { ComponentProps } from 'react'
 import type { ThermocyclerData } from '/app/redux/modules/api-types'
 
-const render = (props: React.ComponentProps<typeof ThermocyclerModuleData>) => {
+const render = (props: ComponentProps<typeof ThermocyclerModuleData>) => {
   return renderWithProviders(<ThermocyclerModuleData {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -49,7 +48,7 @@ const mockDataHeating = {
 } as ThermocyclerData
 
 describe('ThermocyclerModuleData', () => {
-  let props: React.ComponentProps<typeof ThermocyclerModuleData>
+  let props: ComponentProps<typeof ThermocyclerModuleData>
   beforeEach(() => {
     props = {
       data: mockThermocycler.data,
diff --git a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx
index d93a1b1f607..1557b821dd9 100644
--- a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -9,18 +8,18 @@ import { i18n } from '/app/i18n'
 import { mockThermocycler } from '/app/redux/modules/__fixtures__'
 import { ThermocyclerModuleSlideout } from '../ThermocyclerModuleSlideout'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (
-  props: React.ComponentProps<typeof ThermocyclerModuleSlideout>
-) => {
+const render = (props: ComponentProps<typeof ThermocyclerModuleSlideout>) => {
   return renderWithProviders(<ThermocyclerModuleSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ThermocyclerModuleSlideout', () => {
-  let props: React.ComponentProps<typeof ThermocyclerModuleSlideout>
+  let props: ComponentProps<typeof ThermocyclerModuleSlideout>
   let mockCreateLiveCommand = vi.fn()
   beforeEach(() => {
     mockCreateLiveCommand = vi.fn()
diff --git a/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx b/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx
index ce0f0450179..2fe0c5502ef 100644
--- a/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { when } from 'vitest-when'
 import { createStore } from 'redux'
@@ -30,6 +29,7 @@ import {
   useIsHeaterShakerInProtocol,
 } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -188,7 +188,7 @@ describe('useLatchControls', () => {
   })
 
   it('should return latch is open and handle latch function and command to close latch', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -212,7 +212,7 @@ describe('useLatchControls', () => {
     })
   })
   it('should return if latch is closed and handle latch function opens latch', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -263,7 +263,7 @@ describe('useModuleOverflowMenu', () => {
     vi.restoreAllMocks()
   })
   it('should return everything for menuItemsByModuleType and create deactive heater command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -304,7 +304,7 @@ describe('useModuleOverflowMenu', () => {
     const mockAboutClick = vi.fn()
     const mockTestShakeClick = vi.fn()
     const mockHandleWizard = vi.fn()
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -336,7 +336,7 @@ describe('useModuleOverflowMenu', () => {
 
   it('should return only 1 menu button when module is a magnetic module and calls handleClick when module is disengaged', () => {
     const mockHandleClick = vi.fn()
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -366,7 +366,7 @@ describe('useModuleOverflowMenu', () => {
   })
 
   it('should render magnetic module and create disengage command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -404,7 +404,7 @@ describe('useModuleOverflowMenu', () => {
 
   it('should render temperature module and call handleClick when module is idle', () => {
     const mockHandleClick = vi.fn()
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -433,7 +433,7 @@ describe('useModuleOverflowMenu', () => {
   })
 
   it('should render temp module and create deactivate temp command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -470,7 +470,7 @@ describe('useModuleOverflowMenu', () => {
 
   it('should render TC module and call handleClick when module is idle', () => {
     const mockHandleClick = vi.fn()
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -499,7 +499,7 @@ describe('useModuleOverflowMenu', () => {
   })
 
   it('should render TC module and create open lid command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -537,7 +537,7 @@ describe('useModuleOverflowMenu', () => {
   })
 
   it('should render TC module and create deactivate lid command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -575,7 +575,7 @@ describe('useModuleOverflowMenu', () => {
   })
 
   it('should render TC module gen 2 and create a close lid command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -650,7 +650,7 @@ describe('useIsHeaterShakerInProtocol', () => {
   })
 
   it('should return true when a heater shaker is in the protocol', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(useIsHeaterShakerInProtocol, { wrapper })
@@ -674,7 +674,7 @@ describe('useIsHeaterShakerInProtocol', () => {
           id,
         })),
       } as any)
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(useIsHeaterShakerInProtocol, { wrapper })
diff --git a/app/src/organisms/ODD/ChildNavigation/__tests__/ChildNavigation.test.tsx b/app/src/organisms/ODD/ChildNavigation/__tests__/ChildNavigation.test.tsx
index 82a0dfb0b3c..44ff1414dd6 100644
--- a/app/src/organisms/ODD/ChildNavigation/__tests__/ChildNavigation.test.tsx
+++ b/app/src/organisms/ODD/ChildNavigation/__tests__/ChildNavigation.test.tsx
@@ -1,19 +1,20 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ChildNavigation } from '..'
+
+import type { ComponentProps } from 'react'
 import type { SmallButton } from '/app/atoms/buttons'
 
-const render = (props: React.ComponentProps<typeof ChildNavigation>) =>
+const render = (props: ComponentProps<typeof ChildNavigation>) =>
   renderWithProviders(<ChildNavigation {...props} />)
 
 const mockOnClickBack = vi.fn()
 const mockOnClickButton = vi.fn()
 const mockOnClickSecondaryButton = vi.fn()
 
-const mockSecondaryButtonProps: React.ComponentProps<typeof SmallButton> = {
+const mockSecondaryButtonProps: ComponentProps<typeof SmallButton> = {
   onClick: mockOnClickSecondaryButton,
   buttonText: 'Setup Instructions',
   buttonType: 'tertiaryLowLight',
@@ -22,7 +23,7 @@ const mockSecondaryButtonProps: React.ComponentProps<typeof SmallButton> = {
 }
 
 describe('ChildNavigation', () => {
-  let props: React.ComponentProps<typeof ChildNavigation>
+  let props: ComponentProps<typeof ChildNavigation>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ChildNavigation/index.tsx b/app/src/organisms/ODD/ChildNavigation/index.tsx
index ea6c72f293b..ff1ebed1c95 100644
--- a/app/src/organisms/ODD/ChildNavigation/index.tsx
+++ b/app/src/organisms/ODD/ChildNavigation/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled from 'styled-components'
 
 import {
@@ -21,6 +20,7 @@ import { ODD_FOCUS_VISIBLE } from '/app/atoms/buttons/constants'
 import { SmallButton } from '/app/atoms/buttons'
 import { InlineNotification } from '/app/atoms/InlineNotification'
 
+import type { ComponentProps, MouseEventHandler, ReactNode } from 'react'
 import type { IconName, StyleProps } from '@opentrons/components'
 import type { InlineNotificationProps } from '/app/atoms/InlineNotification'
 import type {
@@ -30,15 +30,15 @@ import type {
 
 interface ChildNavigationProps extends StyleProps {
   header: string
-  onClickBack?: React.MouseEventHandler
-  buttonText?: React.ReactNode
+  onClickBack?: MouseEventHandler
+  buttonText?: ReactNode
   inlineNotification?: InlineNotificationProps
-  onClickButton?: React.MouseEventHandler
+  onClickButton?: MouseEventHandler
   buttonType?: SmallButtonTypes
   buttonIsDisabled?: boolean
   iconName?: IconName
   iconPlacement?: IconPlacement
-  secondaryButtonProps?: React.ComponentProps<typeof SmallButton>
+  secondaryButtonProps?: ComponentProps<typeof SmallButton>
   ariaDisabled?: boolean
 }
 
diff --git a/app/src/organisms/ODD/InstrumentInfo/__tests__/InstrumentInfo.test.tsx b/app/src/organisms/ODD/InstrumentInfo/__tests__/InstrumentInfo.test.tsx
index a478716483d..ec8b55bb17a 100644
--- a/app/src/organisms/ODD/InstrumentInfo/__tests__/InstrumentInfo.test.tsx
+++ b/app/src/organisms/ODD/InstrumentInfo/__tests__/InstrumentInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -8,22 +7,23 @@ import { PipetteWizardFlows } from '/app/organisms/PipetteWizardFlows'
 import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows'
 import { InstrumentInfo } from '..'
 
+import type { ComponentProps } from 'react'
+import type * as ReactRouterDom from 'react-router-dom'
 import type { GripperData } from '@opentrons/api-client'
-import type * as Dom from 'react-router-dom'
 
 const mockNavigate = vi.fn()
 
 vi.mock('/app/organisms/PipetteWizardFlows')
 vi.mock('/app/organisms/GripperWizardFlows')
 vi.mock('react-router-dom', async importOriginal => {
-  const reactRouterDom = await importOriginal<typeof Dom>()
+  const reactRouterDom = await importOriginal<typeof ReactRouterDom>()
   return {
     ...reactRouterDom,
     useNavigate: () => mockNavigate,
   }
 })
 
-const render = (props: React.ComponentProps<typeof InstrumentInfo>) => {
+const render = (props: ComponentProps<typeof InstrumentInfo>) => {
   return renderWithProviders(<InstrumentInfo {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -65,7 +65,7 @@ const mockGripperDataWithCalData: GripperData = {
 }
 
 describe('InstrumentInfo', () => {
-  let props: React.ComponentProps<typeof InstrumentInfo>
+  let props: ComponentProps<typeof InstrumentInfo>
   beforeEach(() => {
     vi.mocked(PipetteWizardFlows).mockReturnValue(
       <div>mock PipetteWizardFlows</div>
diff --git a/app/src/organisms/ODD/InstrumentMountItem/LabeledMount.tsx b/app/src/organisms/ODD/InstrumentMountItem/LabeledMount.tsx
index 20fe3941604..c909e4768f0 100644
--- a/app/src/organisms/ODD/InstrumentMountItem/LabeledMount.tsx
+++ b/app/src/organisms/ODD/InstrumentMountItem/LabeledMount.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import {
@@ -15,6 +14,8 @@ import {
   TEXT_TRANSFORM_CAPITALIZE,
   TYPOGRAPHY,
 } from '@opentrons/components'
+
+import type { MouseEventHandler } from 'react'
 import type { Mount } from '/app/redux/pipettes/types'
 
 const MountButton = styled.button<{ isAttached: boolean }>`
@@ -34,7 +35,7 @@ const MountButton = styled.button<{ isAttached: boolean }>`
 interface LabeledMountProps {
   mount: Mount | 'extension'
   instrumentName: string | null
-  handleClick: React.MouseEventHandler
+  handleClick: MouseEventHandler
 }
 
 export function LabeledMount(props: LabeledMountProps): JSX.Element {
diff --git a/app/src/organisms/ODD/InstrumentMountItem/__tests__/ProtocolInstrumentMountItem.test.tsx b/app/src/organisms/ODD/InstrumentMountItem/__tests__/ProtocolInstrumentMountItem.test.tsx
index 6c4c308b8d2..52c62382241 100644
--- a/app/src/organisms/ODD/InstrumentMountItem/__tests__/ProtocolInstrumentMountItem.test.tsx
+++ b/app/src/organisms/ODD/InstrumentMountItem/__tests__/ProtocolInstrumentMountItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { LEFT } from '@opentrons/shared-data'
@@ -8,6 +7,8 @@ import { PipetteWizardFlows } from '/app/organisms/PipetteWizardFlows'
 import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows'
 import { ProtocolInstrumentMountItem } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/organisms/PipetteWizardFlows')
 vi.mock('/app/organisms/GripperWizardFlows')
 vi.mock('../../TakeoverModal')
@@ -51,16 +52,14 @@ const mockLeftPipetteData = {
   ok: true,
 }
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolInstrumentMountItem>
-) => {
+const render = (props: ComponentProps<typeof ProtocolInstrumentMountItem>) => {
   return renderWithProviders(<ProtocolInstrumentMountItem {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ProtocolInstrumentMountItem', () => {
-  let props: React.ComponentProps<typeof ProtocolInstrumentMountItem>
+  let props: ComponentProps<typeof ProtocolInstrumentMountItem>
   beforeEach(() => {
     props = {
       mount: LEFT,
diff --git a/app/src/organisms/ODD/NameRobot/__tests__/ConfirmRobotName.test.tsx b/app/src/organisms/ODD/NameRobot/__tests__/ConfirmRobotName.test.tsx
index d9e8521260e..21d34d3a59d 100644
--- a/app/src/organisms/ODD/NameRobot/__tests__/ConfirmRobotName.test.tsx
+++ b/app/src/organisms/ODD/NameRobot/__tests__/ConfirmRobotName.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,6 +6,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmRobotName } from '../ConfirmRobotName'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -19,7 +19,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ConfirmRobotName>) => {
+const render = (props: ComponentProps<typeof ConfirmRobotName>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ConfirmRobotName {...props} />
@@ -31,7 +31,7 @@ const render = (props: React.ComponentProps<typeof ConfirmRobotName>) => {
 }
 
 describe('ConfirmRobotName', () => {
-  let props: React.ComponentProps<typeof ConfirmRobotName>
+  let props: ComponentProps<typeof ConfirmRobotName>
   beforeEach(() => {
     props = {
       robotName: 'otie',
diff --git a/app/src/organisms/ODD/Navigation/__tests__/Navigation.test.tsx b/app/src/organisms/ODD/Navigation/__tests__/Navigation.test.tsx
index c86ba363d5c..1a212f83e46 100644
--- a/app/src/organisms/ODD/Navigation/__tests__/Navigation.test.tsx
+++ b/app/src/organisms/ODD/Navigation/__tests__/Navigation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -12,6 +11,8 @@ import { NavigationMenu } from '../NavigationMenu'
 import { Navigation } from '..'
 import { useScrollPosition } from '/app/local-resources/dom-utils'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/networking/hooks/useNetworkConnection')
 vi.mock('/app/redux/discovery')
 vi.mock('../NavigationMenu')
@@ -19,7 +20,7 @@ vi.mock('/app/local-resources/dom-utils')
 
 mockConnectedRobot.name = '12345678901234567'
 
-const render = (props: React.ComponentProps<typeof Navigation>) => {
+const render = (props: ComponentProps<typeof Navigation>) => {
   return renderWithProviders(
     <MemoryRouter>
       <Navigation {...props} />
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof Navigation>) => {
 }
 
 describe('Navigation', () => {
-  let props: React.ComponentProps<typeof Navigation>
+  let props: ComponentProps<typeof Navigation>
   beforeEach(() => {
     props = {}
     vi.mocked(getLocalRobot).mockReturnValue(mockConnectedRobot)
diff --git a/app/src/organisms/ODD/Navigation/__tests__/NavigationMenu.test.tsx b/app/src/organisms/ODD/Navigation/__tests__/NavigationMenu.test.tsx
index b40122cdd6b..b4b70528cda 100644
--- a/app/src/organisms/ODD/Navigation/__tests__/NavigationMenu.test.tsx
+++ b/app/src/organisms/ODD/Navigation/__tests__/NavigationMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -9,6 +8,7 @@ import { useLights } from '/app/resources/devices'
 import { RestartRobotConfirmationModal } from '../RestartRobotConfirmationModal'
 import { NavigationMenu } from '../NavigationMenu'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 vi.mock('/app/redux/robot-admin')
@@ -27,14 +27,14 @@ vi.mock('react-router-dom', async importOriginal => {
 
 const mockToggleLights = vi.fn()
 
-const render = (props: React.ComponentProps<typeof NavigationMenu>) => {
+const render = (props: ComponentProps<typeof NavigationMenu>) => {
   return renderWithProviders(<NavigationMenu {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('NavigationMenu', () => {
-  let props: React.ComponentProps<typeof NavigationMenu>
+  let props: ComponentProps<typeof NavigationMenu>
   beforeEach(() => {
     props = {
       onClick: vi.fn(),
diff --git a/app/src/organisms/ODD/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx b/app/src/organisms/ODD/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx
index 8922a4225c2..5b3bc007567 100644
--- a/app/src/organisms/ODD/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx
+++ b/app/src/organisms/ODD/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -7,12 +6,14 @@ import { i18n } from '/app/i18n'
 import { restartRobot } from '/app/redux/robot-admin'
 import { RestartRobotConfirmationModal } from '../RestartRobotConfirmationModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/robot-admin')
 
 const mockFunc = vi.fn()
 
 const render = (
-  props: React.ComponentProps<typeof RestartRobotConfirmationModal>
+  props: ComponentProps<typeof RestartRobotConfirmationModal>
 ) => {
   return renderWithProviders(<RestartRobotConfirmationModal {...props} />, {
     i18nInstance: i18n,
@@ -20,7 +21,7 @@ const render = (
 }
 
 describe('RestartRobotConfirmationModal', () => {
-  let props: React.ComponentProps<typeof RestartRobotConfirmationModal>
+  let props: ComponentProps<typeof RestartRobotConfirmationModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx
index a01af9bba66..2707b07a8f5 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { AlternativeSecurityTypeModal } from '../AlternativeSecurityTypeModal'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockFunc = vi.fn()
@@ -18,16 +18,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (
-  props: React.ComponentProps<typeof AlternativeSecurityTypeModal>
-) => {
+const render = (props: ComponentProps<typeof AlternativeSecurityTypeModal>) => {
   return renderWithProviders(<AlternativeSecurityTypeModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('AlternativeSecurityTypeModal', () => {
-  let props: React.ComponentProps<typeof AlternativeSecurityTypeModal>
+  let props: ComponentProps<typeof AlternativeSecurityTypeModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/ConnectingNetwork.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/ConnectingNetwork.test.tsx
index e040bee4572..29444afea6d 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/ConnectingNetwork.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/ConnectingNetwork.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it } from 'vitest'
@@ -7,7 +6,9 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConnectingNetwork } from '../ConnectingNetwork'
 
-const render = (props: React.ComponentProps<typeof ConnectingNetwork>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConnectingNetwork>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ConnectingNetwork {...props} />
@@ -19,7 +20,7 @@ const render = (props: React.ComponentProps<typeof ConnectingNetwork>) => {
 }
 
 describe('ConnectingNetwork', () => {
-  let props: React.ComponentProps<typeof ConnectingNetwork>
+  let props: ComponentProps<typeof ConnectingNetwork>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/DisplayWifiList.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/DisplayWifiList.test.tsx
index e1449be3b9d..11e0ef16a9b 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/DisplayWifiList.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/DisplayWifiList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -8,6 +7,7 @@ import * as Fixtures from '/app/redux/networking/__fixtures__'
 import { DisplaySearchNetwork } from '../DisplaySearchNetwork'
 import { DisplayWifiList } from '../DisplayWifiList'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -31,14 +31,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof DisplayWifiList>) => {
+const render = (props: ComponentProps<typeof DisplayWifiList>) => {
   return renderWithProviders(<DisplayWifiList {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('DisplayWifiList', () => {
-  let props: React.ComponentProps<typeof DisplayWifiList>
+  let props: ComponentProps<typeof DisplayWifiList>
   beforeEach(() => {
     props = {
       list: mockWifiList,
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/FailedToConnect.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/FailedToConnect.test.tsx
index 3dbf7bf1f46..74e11378af8 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/FailedToConnect.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/FailedToConnect.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,9 +6,10 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { FailedToConnect } from '../FailedToConnect'
 
+import type { ComponentProps } from 'react'
 import type { RequestState } from '/app/redux/robot-api/types'
 
-const render = (props: React.ComponentProps<typeof FailedToConnect>) => {
+const render = (props: ComponentProps<typeof FailedToConnect>) => {
   return renderWithProviders(
     <MemoryRouter>
       <FailedToConnect {...props} />
@@ -33,7 +33,7 @@ const failureState = {
 } as RequestState
 
 describe('ConnectedResult', () => {
-  let props: React.ComponentProps<typeof FailedToConnect>
+  let props: ComponentProps<typeof FailedToConnect>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx
index bfce05cc22d..2520e944ad7 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import { afterEach, beforeEach, describe, it, vi } from 'vitest'
@@ -11,6 +10,7 @@ import { AlternativeSecurityTypeModal } from '../AlternativeSecurityTypeModal'
 import { SelectAuthenticationType } from '../SelectAuthenticationType'
 import { SetWifiCred } from '../SetWifiCred'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -36,9 +36,7 @@ const initialMockWifi = {
   type: INTERFACE_WIFI,
 }
 
-const render = (
-  props: React.ComponentProps<typeof SelectAuthenticationType>
-) => {
+const render = (props: ComponentProps<typeof SelectAuthenticationType>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SelectAuthenticationType {...props} />
@@ -50,7 +48,7 @@ const render = (
 }
 
 describe('SelectAuthenticationType', () => {
-  let props: React.ComponentProps<typeof SelectAuthenticationType>
+  let props: ComponentProps<typeof SelectAuthenticationType>
   beforeEach(() => {
     props = {
       selectedAuthType: 'wpa-psk',
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiCred.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiCred.test.tsx
index d1a25f069c9..85cc94d895e 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiCred.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiCred.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,11 +6,13 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SetWifiCred } from '../SetWifiCred'
 
+import type { ComponentProps } from 'react'
+
 const mockSetPassword = vi.fn()
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux/robot-api')
 
-const render = (props: React.ComponentProps<typeof SetWifiCred>) => {
+const render = (props: ComponentProps<typeof SetWifiCred>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SetWifiCred {...props} />
@@ -23,7 +24,7 @@ const render = (props: React.ComponentProps<typeof SetWifiCred>) => {
 }
 
 describe('SetWifiCred', () => {
-  let props: React.ComponentProps<typeof SetWifiCred>
+  let props: ComponentProps<typeof SetWifiCred>
   beforeEach(() => {
     props = {
       password: 'mock-password',
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiSsid.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiSsid.test.tsx
index 11eab279c37..c5b0ff26ee5 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiSsid.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiSsid.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,8 +6,10 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SetWifiSsid } from '../SetWifiSsid'
 
+import type { ComponentProps } from 'react'
+
 const mockSetSelectedSsid = vi.fn()
-const render = (props: React.ComponentProps<typeof SetWifiSsid>) => {
+const render = (props: ComponentProps<typeof SetWifiSsid>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SetWifiSsid {...props} />
@@ -20,7 +21,7 @@ const render = (props: React.ComponentProps<typeof SetWifiSsid>) => {
 }
 
 describe('SetWifiSsid', () => {
-  let props: React.ComponentProps<typeof SetWifiSsid>
+  let props: ComponentProps<typeof SetWifiSsid>
   beforeEach(() => {
     props = {
       setInputSsid: mockSetSelectedSsid,
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
index efcee37e0c6..76e63934328 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -11,6 +10,7 @@ import * as Fixtures from '/app/redux/networking/__fixtures__'
 import { NetworkDetailsModal } from '../../RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal'
 import { WifiConnectionDetails } from '../WifiConnectionDetails'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 vi.mock('/app/resources/networking/hooks')
@@ -27,7 +27,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof WifiConnectionDetails>) => {
+const render = (props: ComponentProps<typeof WifiConnectionDetails>) => {
   return renderWithProviders(
     <MemoryRouter>
       <WifiConnectionDetails {...props} />
@@ -51,7 +51,7 @@ const mockWifiList = [
 ]
 
 describe('WifiConnectionDetails', () => {
-  let props: React.ComponentProps<typeof WifiConnectionDetails>
+  let props: ComponentProps<typeof WifiConnectionDetails>
   beforeEach(() => {
     props = {
       ssid: 'mockWifi',
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx
index 84a7fd2eb87..21b26365d81 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, afterEach } from 'vitest'
@@ -15,6 +14,7 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 import { ProtocolSetupDeckConfiguration } from '..'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type {
   CompletedProtocolAnalysis,
@@ -47,7 +47,7 @@ vi.mock('@opentrons/components', async importOriginal => {
 })
 
 const render = (
-  props: React.ComponentProps<typeof ProtocolSetupDeckConfiguration>
+  props: ComponentProps<typeof ProtocolSetupDeckConfiguration>
 ) => {
   return renderWithProviders(<ProtocolSetupDeckConfiguration {...props} />, {
     i18nInstance: i18n,
@@ -55,7 +55,7 @@ const render = (
 }
 
 describe('ProtocolSetupDeckConfiguration', () => {
-  let props: React.ComponentProps<typeof ProtocolSetupDeckConfiguration>
+  let props: ComponentProps<typeof ProtocolSetupDeckConfiguration>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupInstruments/ProtocolSetupInstruments.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupInstruments/ProtocolSetupInstruments.tsx
index 1af859bc431..1826ea10339 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupInstruments/ProtocolSetupInstruments.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupInstruments/ProtocolSetupInstruments.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import {
@@ -16,15 +15,16 @@ import { PipetteRecalibrationODDWarning } from '/app/organisms/ODD/PipetteRecali
 import { getShowPipetteCalibrationWarning } from '/app/transformations/instruments'
 import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { ProtocolInstrumentMountItem } from '/app/organisms/ODD/InstrumentMountItem'
+import { isGripperInCommands } from '/app/resources/protocols/utils'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { GripperData, PipetteData } from '@opentrons/api-client'
 import type { GripperModel } from '@opentrons/shared-data'
 import type { SetupScreens } from '../types'
-import { isGripperInCommands } from '/app/resources/protocols/utils'
 
 export interface ProtocolSetupInstrumentsProps {
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
 }
 
 export function ProtocolSetupInstruments({
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx
index 860d927578e..3f387db51f6 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { when } from 'vitest-when'
 import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest'
@@ -17,6 +16,7 @@ import { getStandardDeckViewLayerBlockList } from '/app/local-resources/deck_con
 import { mockProtocolModuleInfo } from '../__fixtures__'
 import { LabwareMapView } from '../LabwareMapView'
 
+import type { ComponentProps } from 'react'
 import type {
   getSimplestDeckConfigForProtocol,
   CompletedProtocolAnalysis,
@@ -50,7 +50,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof LabwareMapView>) => {
+const render = (props: ComponentProps<typeof LabwareMapView>) => {
   return renderWithProviders(
     <MemoryRouter>
       <LabwareMapView {...props} />
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/LiquidDetails.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/LiquidDetails.test.tsx
index 720b6db7545..9d05000cf8f 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/LiquidDetails.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/LiquidDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen, fireEvent } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 
@@ -13,20 +12,22 @@ import {
   MOCK_LABWARE_INFO_BY_LIQUID_ID,
   MOCK_PROTOCOL_ANALYSIS,
 } from '../fixtures'
+
+import type { ComponentProps } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 
 vi.mock('/app/transformations/analysis')
 vi.mock('/app/transformations/commands')
 vi.mock('/app/organisms/LiquidsLabwareDetailsModal')
 
-const render = (props: React.ComponentProps<typeof LiquidDetails>) => {
+const render = (props: ComponentProps<typeof LiquidDetails>) => {
   return renderWithProviders(<LiquidDetails {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('LiquidDetails', () => {
-  let props: React.ComponentProps<typeof LiquidDetails>
+  let props: ComponentProps<typeof LiquidDetails>
   beforeEach(() => {
     props = {
       commands: (MOCK_PROTOCOL_ANALYSIS as CompletedProtocolAnalysis).commands,
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/ProtocolSetupLiquids.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/ProtocolSetupLiquids.test.tsx
index 487fbbd0bce..eed74fae79d 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/ProtocolSetupLiquids.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/ProtocolSetupLiquids.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 
@@ -20,6 +19,7 @@ import {
 } from '../fixtures'
 import { ProtocolSetupLiquids } from '..'
 
+import type { ComponentProps } from 'react'
 import type * as SharedData from '@opentrons/shared-data'
 
 vi.mock('/app/transformations/analysis')
@@ -41,13 +41,13 @@ describe('ProtocolSetupLiquids', () => {
     isConfirmed = confirmed
   })
 
-  const render = (props: React.ComponentProps<typeof ProtocolSetupLiquids>) => {
+  const render = (props: ComponentProps<typeof ProtocolSetupLiquids>) => {
     return renderWithProviders(<ProtocolSetupLiquids {...props} />, {
       i18nInstance: i18n,
     })
   }
 
-  let props: React.ComponentProps<typeof ProtocolSetupLiquids>
+  let props: ComponentProps<typeof ProtocolSetupLiquids>
   beforeEach(() => {
     props = {
       runId: RUN_ID_1,
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx
index e6ca8735d77..b5336d9c535 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, afterEach, vi, expect } from 'vitest'
 
@@ -18,6 +17,8 @@ import { FixtureTable } from '../FixtureTable'
 import { getLocalRobot } from '/app/redux/discovery'
 import { mockConnectedRobot } from '/app/redux/discovery/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/discovery')
 vi.mock('/app/resources/deck_configuration/hooks')
 vi.mock('/app/organisms/LocationConflictModal')
@@ -26,14 +27,14 @@ const mockSetSetupScreen = vi.fn()
 const mockSetCutoutId = vi.fn()
 const mockSetProvidedFixtureOptions = vi.fn()
 
-const render = (props: React.ComponentProps<typeof FixtureTable>) => {
+const render = (props: ComponentProps<typeof FixtureTable>) => {
   return renderWithProviders(<FixtureTable {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('FixtureTable', () => {
-  let props: React.ComponentProps<typeof FixtureTable>
+  let props: ComponentProps<typeof FixtureTable>
   beforeEach(() => {
     props = {
       mostRecentAnalysis: { commands: [], labware: [] } as any,
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx
index d31a0312d02..a06ad0118db 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -12,6 +11,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ModulesAndDeckMapView } from '../ModulesAndDeckMapView'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/components/src/hardware-sim/BaseDeck')
 vi.mock('@opentrons/api-client')
 vi.mock('@opentrons/shared-data/js/helpers/getSimplestFlexDeckConfig')
@@ -99,14 +100,14 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ModulesAndDeckMapView>) => {
+const render = (props: ComponentProps<typeof ModulesAndDeckMapView>) => {
   return renderWithProviders(<ModulesAndDeckMapView {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ModulesAndDeckMapView', () => {
-  let props: React.ComponentProps<typeof ModulesAndDeckMapView>
+  let props: ComponentProps<typeof ModulesAndDeckMapView>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/SetupInstructionsModal.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/SetupInstructionsModal.test.tsx
index 8f6f4c01739..f4ac8d4fec1 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/SetupInstructionsModal.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/SetupInstructionsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 
@@ -7,18 +6,20 @@ import { i18n } from '/app/i18n'
 
 import { SetupInstructionsModal } from '../SetupInstructionsModal'
 
+import type { ComponentProps } from 'react'
+
 const mockSetShowSetupInstructionsModal = vi.fn()
 const QR_CODE_IMAGE_FILE =
   '/app/src/assets/images/on-device-display/setup_instructions_qr_code.png'
 
-const render = (props: React.ComponentProps<typeof SetupInstructionsModal>) => {
+const render = (props: ComponentProps<typeof SetupInstructionsModal>) => {
   return renderWithProviders(<SetupInstructionsModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SetupInstructionsModal', () => {
-  let props: React.ComponentProps<typeof SetupInstructionsModal>
+  let props: ComponentProps<typeof SetupInstructionsModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupOffsets/index.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupOffsets/index.tsx
index 310c1dadbc4..85e9352d5fe 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupOffsets/index.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupOffsets/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Chip,
@@ -24,9 +23,11 @@ import {
 } from '/app/resources/runs'
 import { getLatestCurrentOffsets } from '/app/transformations/runs'
 
+import type { Dispatch, SetStateAction } from 'react'
+
 export interface ProtocolSetupOffsetsProps {
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
   lpcDisabledReason: string | null
   launchLPC: () => void
   LPCWizard: JSX.Element | null
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/ViewOnlyParameters.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/ViewOnlyParameters.tsx
index 1946d122848..7f5b73db3b0 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/ViewOnlyParameters.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/ViewOnlyParameters.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 
@@ -22,11 +21,12 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { useToaster } from '/app/organisms/ToasterOven'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { SetupScreens } from '../types'
 
 export interface ViewOnlyParametersProps {
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
 }
 
 export function ViewOnlyParameters({
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/AnalysisFailedModal.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/AnalysisFailedModal.test.tsx
index ac43f26d621..dec3fc608e2 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/AnalysisFailedModal.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/AnalysisFailedModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,6 +6,8 @@ import { useDismissCurrentRunMutation } from '@opentrons/react-api-client'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { AnalysisFailedModal } from '../AnalysisFailedModal'
+
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const PROTOCOL_ID = 'mockProtocolId'
@@ -26,14 +27,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof AnalysisFailedModal>) => {
+const render = (props: ComponentProps<typeof AnalysisFailedModal>) => {
   return renderWithProviders(<AnalysisFailedModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('AnalysisFailedModal', () => {
-  let props: React.ComponentProps<typeof AnalysisFailedModal>
+  let props: ComponentProps<typeof AnalysisFailedModal>
 
   when(vi.mocked(useDismissCurrentRunMutation))
     .calledWith()
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseCsvFile.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseCsvFile.test.tsx
index 2f365fa5fbc..560f9f9490a 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseCsvFile.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseCsvFile.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -13,6 +12,7 @@ import { getShellUpdateDataFiles } from '/app/redux/shell'
 import { EmptyFile } from '../EmptyFile'
 import { ChooseCsvFile } from '../ChooseCsvFile'
 
+import type { ComponentProps } from 'react'
 import type { CsvFileParameter } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/react-api-client')
@@ -47,14 +47,14 @@ const mockDataOnRobot = {
   },
 }
 
-const render = (props: React.ComponentProps<typeof ChooseCsvFile>) => {
+const render = (props: ComponentProps<typeof ChooseCsvFile>) => {
   return renderWithProviders(<ChooseCsvFile {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ChooseCsvFile', () => {
-  let props: React.ComponentProps<typeof ChooseCsvFile>
+  let props: ComponentProps<typeof ChooseCsvFile>
   beforeEach(() => {
     props = {
       protocolId: PROTOCOL_ID,
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx
index a65c760d544..613e17c9523 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe, beforeEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -7,14 +6,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ChooseEnum } from '../ChooseEnum'
 
+import type { ComponentProps } from 'react'
+
 vi.mocked('../../../../ToasterOven')
-const render = (props: React.ComponentProps<typeof ChooseEnum>) => {
+const render = (props: ComponentProps<typeof ChooseEnum>) => {
   return renderWithProviders(<ChooseEnum {...props} />, {
     i18nInstance: i18n,
   })
 }
 describe('ChooseEnum', () => {
-  let props: React.ComponentProps<typeof ChooseEnum>
+  let props: ComponentProps<typeof ChooseEnum>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseNumber.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseNumber.test.tsx
index 611c0e124fc..89af3d22e4c 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseNumber.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseNumber.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe, beforeEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -8,6 +7,7 @@ import { useToaster } from '/app/organisms/ToasterOven'
 import { mockRunTimeParameterData } from '../../__fixtures__'
 import { ChooseNumber } from '../ChooseNumber'
 
+import type { ComponentProps } from 'react'
 import type { NumberParameter } from '@opentrons/shared-data'
 
 vi.mock('/app/organisms/ToasterOven')
@@ -18,14 +18,14 @@ const mockFloatNumberParameterData = mockRunTimeParameterData[6] as NumberParame
 const mockSetParameter = vi.fn()
 const mockMakeSnackbar = vi.fn()
 
-const render = (props: React.ComponentProps<typeof ChooseNumber>) => {
+const render = (props: ComponentProps<typeof ChooseNumber>) => {
   return renderWithProviders(<ChooseNumber {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ChooseNumber', () => {
-  let props: React.ComponentProps<typeof ChooseNumber>
+  let props: ComponentProps<typeof ChooseNumber>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx
index 18a01391711..f32442f7fda 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { it, describe, beforeEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -19,6 +18,7 @@ import { mockRunTimeParameterData } from '../../__fixtures__'
 import { useToaster } from '/app/organisms/ToasterOven'
 import { ProtocolSetupParameters } from '..'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { HostConfig } from '@opentrons/api-client'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
@@ -51,16 +51,14 @@ const mockMostRecentAnalysis = ({
 } as unknown) as CompletedProtocolAnalysis
 const mockMakeSnackbar = vi.fn()
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolSetupParameters>
-) => {
+const render = (props: ComponentProps<typeof ProtocolSetupParameters>) => {
   return renderWithProviders(<ProtocolSetupParameters {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ProtocolSetupParameters', () => {
-  let props: React.ComponentProps<typeof ProtocolSetupParameters>
+  let props: ComponentProps<typeof ProtocolSetupParameters>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ResetValuesModal.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ResetValuesModal.test.tsx
index 4e263f9984b..d777a44da04 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ResetValuesModal.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ResetValuesModal.test.tsx
@@ -1,23 +1,24 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ResetValuesModal } from '../ResetValuesModal'
+
+import type { ComponentProps } from 'react'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
 const mockGoBack = vi.fn()
 const mockSetRunTimeParametersOverrides = vi.fn()
 
-const render = (props: React.ComponentProps<typeof ResetValuesModal>) => {
+const render = (props: ComponentProps<typeof ResetValuesModal>) => {
   return renderWithProviders(<ResetValuesModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ResetValuesModal', () => {
-  let props: React.ComponentProps<typeof ResetValuesModal>
+  let props: ComponentProps<typeof ResetValuesModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ViewOnlyParameters.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ViewOnlyParameters.test.tsx
index aed74fea585..2c0827de156 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ViewOnlyParameters.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ViewOnlyParameters.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { it, describe, beforeEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -9,17 +8,19 @@ import { useToaster } from '/app/organisms/ToasterOven'
 import { mockRunTimeParameterData } from '../../__fixtures__'
 import { ViewOnlyParameters } from '../ViewOnlyParameters'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/runs')
 vi.mock('/app/organisms/ToasterOven')
 const RUN_ID = 'mockId'
-const render = (props: React.ComponentProps<typeof ViewOnlyParameters>) => {
+const render = (props: ComponentProps<typeof ViewOnlyParameters>) => {
   return renderWithProviders(<ViewOnlyParameters {...props} />, {
     i18nInstance: i18n,
   })
 }
 const mockMakeSnackBar = vi.fn()
 describe('ViewOnlyParameters', () => {
-  let props: React.ComponentProps<typeof ViewOnlyParameters>
+  let props: ComponentProps<typeof ViewOnlyParameters>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/CreateNewTransfer.tsx b/app/src/organisms/ODD/QuickTransferFlow/CreateNewTransfer.tsx
index 10b036b9064..b74ecc7065e 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/CreateNewTransfer.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/CreateNewTransfer.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 
 import {
@@ -12,11 +11,13 @@ import {
 
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
+
+import type { ComponentProps } from 'react'
 import type { SmallButton } from '/app/atoms/buttons'
 
 interface CreateNewTransferProps {
   onNext: () => void
-  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  exitButtonProps: ComponentProps<typeof SmallButton>
 }
 
 export function CreateNewTransfer(props: CreateNewTransferProps): JSX.Element {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/ConfirmExitModal.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/ConfirmExitModal.test.tsx
index 4b50c31ca29..18fdc854a85 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/ConfirmExitModal.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/ConfirmExitModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmExitModal } from '../ConfirmExitModal'
 
-const render = (props: React.ComponentProps<typeof ConfirmExitModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConfirmExitModal>) => {
   return renderWithProviders(<ConfirmExitModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ConfirmExitModal', () => {
-  let props: React.ComponentProps<typeof ConfirmExitModal>
+  let props: ComponentProps<typeof ConfirmExitModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/CreateNewTransfer.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/CreateNewTransfer.test.tsx
index 178086ae401..7d134e0e2be 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/CreateNewTransfer.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/CreateNewTransfer.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 import { DeckConfigurator } from '@opentrons/components'
@@ -7,6 +6,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { CreateNewTransfer } from '../CreateNewTransfer'
 
+import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 
 vi.mock('@opentrons/components', async importOriginal => {
@@ -16,14 +16,14 @@ vi.mock('@opentrons/components', async importOriginal => {
     DeckConfigurator: vi.fn(),
   }
 })
-const render = (props: React.ComponentProps<typeof CreateNewTransfer>) => {
+const render = (props: ComponentProps<typeof CreateNewTransfer>) => {
   return renderWithProviders(<CreateNewTransfer {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('CreateNewTransfer', () => {
-  let props: React.ComponentProps<typeof CreateNewTransfer>
+  let props: ComponentProps<typeof CreateNewTransfer>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx
index 363c89cdc82..3b247ce2ef8 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx
@@ -1,10 +1,11 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { NameQuickTransfer } from '../NameQuickTransfer'
+
+import type { ComponentProps } from 'react'
 import type { InputField } from '@opentrons/components'
 
 vi.mock('../utils')
@@ -17,14 +18,14 @@ vi.mock('/app/atoms/InputField', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof NameQuickTransfer>) => {
+const render = (props: ComponentProps<typeof NameQuickTransfer>) => {
   return renderWithProviders(<NameQuickTransfer {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('NameQuickTransfer', () => {
-  let props: React.ComponentProps<typeof NameQuickTransfer>
+  let props: ComponentProps<typeof NameQuickTransfer>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/Overview.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/Overview.test.tsx
index 242b0f58a92..192d378f97c 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/Overview.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/Overview.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, afterEach, vi, beforeEach } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { Overview } from '../Overview'
 
-const render = (props: React.ComponentProps<typeof Overview>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Overview>) => {
   return renderWithProviders(<Overview {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Overview', () => {
-  let props: React.ComponentProps<typeof Overview>
+  let props: ComponentProps<typeof Overview>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/AirGap.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/AirGap.test.tsx
index a4cc4a2879a..f1e6245389f 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/AirGap.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/AirGap.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { AirGap } from '../../QuickTransferAdvancedSettings/AirGap'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof AirGap>) => {
+const render = (props: ComponentProps<typeof AirGap>) => {
   return renderWithProviders(<AirGap {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof AirGap>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('AirGap', () => {
-  let props: React.ComponentProps<typeof AirGap>
+  let props: ComponentProps<typeof AirGap>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/BlowOut.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/BlowOut.test.tsx
index c75788ac8cd..6921e9daea7 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/BlowOut.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/BlowOut.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -7,13 +6,15 @@ import { i18n } from '/app/i18n'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { BlowOut } from '../../QuickTransferAdvancedSettings/BlowOut'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/resources/deck_configuration')
 vi.mock('/app/redux-resources/analytics')
 vi.mock('../utils')
 
-const render = (props: React.ComponentProps<typeof BlowOut>) => {
+const render = (props: ComponentProps<typeof BlowOut>) => {
   return renderWithProviders(<BlowOut {...props} />, {
     i18nInstance: i18n,
   })
@@ -21,7 +22,7 @@ const render = (props: React.ComponentProps<typeof BlowOut>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('BlowOut', () => {
-  let props: React.ComponentProps<typeof BlowOut>
+  let props: ComponentProps<typeof BlowOut>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Delay.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Delay.test.tsx
index 957f3eb6e62..32b26e4712f 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Delay.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Delay.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { Delay } from '../../QuickTransferAdvancedSettings/Delay'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof Delay>) => {
+const render = (props: ComponentProps<typeof Delay>) => {
   return renderWithProviders(<Delay {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof Delay>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('Delay', () => {
-  let props: React.ComponentProps<typeof Delay>
+  let props: ComponentProps<typeof Delay>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/FlowRate.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/FlowRate.test.tsx
index 4b01bb52ebe..413af34ce99 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/FlowRate.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/FlowRate.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { FlowRateEntry } from '../../QuickTransferAdvancedSettings/FlowRate'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof FlowRateEntry>) => {
+const render = (props: ComponentProps<typeof FlowRateEntry>) => {
   return renderWithProviders(<FlowRateEntry {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof FlowRateEntry>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('FlowRate', () => {
-  let props: React.ComponentProps<typeof FlowRateEntry>
+  let props: ComponentProps<typeof FlowRateEntry>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Mix.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Mix.test.tsx
index c4d1c170be3..298bd040f1c 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Mix.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Mix.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { Mix } from '../../QuickTransferAdvancedSettings/Mix'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof Mix>) => {
+const render = (props: ComponentProps<typeof Mix>) => {
   return renderWithProviders(<Mix {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof Mix>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('Mix', () => {
-  let props: React.ComponentProps<typeof Mix>
+  let props: ComponentProps<typeof Mix>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/PipettePath.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/PipettePath.test.tsx
index e62571bdc6a..536c14bbbfd 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/PipettePath.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/PipettePath.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -9,6 +8,8 @@ import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { PipettePath } from '../../QuickTransferAdvancedSettings/PipettePath'
 import { useBlowOutLocationOptions } from '../../QuickTransferAdvancedSettings/BlowOut'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -23,7 +24,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof PipettePath>) => {
+const render = (props: ComponentProps<typeof PipettePath>) => {
   return renderWithProviders(<PipettePath {...props} />, {
     i18nInstance: i18n,
   })
@@ -31,7 +32,7 @@ const render = (props: React.ComponentProps<typeof PipettePath>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('PipettePath', () => {
-  let props: React.ComponentProps<typeof PipettePath>
+  let props: ComponentProps<typeof PipettePath>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/QuickTransferAdvancedSettings.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/QuickTransferAdvancedSettings.test.tsx
index 64e400f5a10..aac998fc8dd 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/QuickTransferAdvancedSettings.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/QuickTransferAdvancedSettings.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -16,6 +15,8 @@ import { TouchTip } from '../../QuickTransferAdvancedSettings/TouchTip'
 import { AirGap } from '../../QuickTransferAdvancedSettings/AirGap'
 import { BlowOut } from '../../QuickTransferAdvancedSettings/BlowOut'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux-resources/analytics')
 vi.mock('/app/organisms/ToasterOven')
 vi.mock('../../QuickTransferAdvancedSettings/PipettePath')
@@ -28,7 +29,7 @@ vi.mock('../../QuickTransferAdvancedSettings/AirGap')
 vi.mock('../../QuickTransferAdvancedSettings/BlowOut')
 
 const render = (
-  props: React.ComponentProps<typeof QuickTransferAdvancedSettings>
+  props: ComponentProps<typeof QuickTransferAdvancedSettings>
 ): any => {
   return renderWithProviders(<QuickTransferAdvancedSettings {...props} />, {
     i18nInstance: i18n,
@@ -38,7 +39,7 @@ let mockTrackEventWithRobotSerial: any
 let mockMakeSnackbar: any
 
 describe('QuickTransferAdvancedSettings', () => {
-  let props: React.ComponentProps<typeof QuickTransferAdvancedSettings>
+  let props: ComponentProps<typeof QuickTransferAdvancedSettings>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TipPosition.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TipPosition.test.tsx
index dc109c2c302..02e5022785c 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TipPosition.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TipPosition.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { TipPositionEntry } from '../../QuickTransferAdvancedSettings/TipPosition'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof TipPositionEntry>) => {
+const render = (props: ComponentProps<typeof TipPositionEntry>) => {
   return renderWithProviders(<TipPositionEntry {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof TipPositionEntry>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('TipPosition', () => {
-  let props: React.ComponentProps<typeof TipPositionEntry>
+  let props: ComponentProps<typeof TipPositionEntry>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TouchTip.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TouchTip.test.tsx
index cc30db0a54f..a5338c8aa71 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TouchTip.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TouchTip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { TouchTip } from '../../QuickTransferAdvancedSettings/TouchTip'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof TouchTip>) => {
+const render = (props: ComponentProps<typeof TouchTip>) => {
   return renderWithProviders(<TouchTip {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof TouchTip>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('TouchTip', () => {
-  let props: React.ComponentProps<typeof TouchTip>
+  let props: ComponentProps<typeof TouchTip>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectDestLabware.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectDestLabware.test.tsx
index 6448542c14e..38007f7cc58 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectDestLabware.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectDestLabware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -6,15 +5,17 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SelectDestLabware } from '../SelectDestLabware'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
-const render = (props: React.ComponentProps<typeof SelectDestLabware>) => {
+const render = (props: ComponentProps<typeof SelectDestLabware>) => {
   return renderWithProviders(<SelectDestLabware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SelectDestLabware', () => {
-  let props: React.ComponentProps<typeof SelectDestLabware>
+  let props: ComponentProps<typeof SelectDestLabware>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectPipette.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectPipette.test.tsx
index e32f7645593..b614041b127 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectPipette.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectPipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
@@ -8,17 +7,19 @@ import { i18n } from '/app/i18n'
 import { useIsOEMMode } from '/app/resources/robot-settings/hooks'
 import { SelectPipette } from '../SelectPipette'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/robot-settings/hooks')
 
-const render = (props: React.ComponentProps<typeof SelectPipette>) => {
+const render = (props: ComponentProps<typeof SelectPipette>) => {
   return renderWithProviders(<SelectPipette {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SelectPipette', () => {
-  let props: React.ComponentProps<typeof SelectPipette>
+  let props: ComponentProps<typeof SelectPipette>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectSourceLabware.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectSourceLabware.test.tsx
index 73121ea7b2d..99e53fab15b 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectSourceLabware.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectSourceLabware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -6,15 +5,17 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SelectSourceLabware } from '../SelectSourceLabware'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
-const render = (props: React.ComponentProps<typeof SelectSourceLabware>) => {
+const render = (props: ComponentProps<typeof SelectSourceLabware>) => {
   return renderWithProviders(<SelectSourceLabware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SelectSourceLabware', () => {
-  let props: React.ComponentProps<typeof SelectSourceLabware>
+  let props: ComponentProps<typeof SelectSourceLabware>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectTipRack.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectTipRack.test.tsx
index f4ee22bd2b9..1489e744ec6 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectTipRack.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectTipRack.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -6,15 +5,17 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SelectTipRack } from '../SelectTipRack'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
-const render = (props: React.ComponentProps<typeof SelectTipRack>) => {
+const render = (props: ComponentProps<typeof SelectTipRack>) => {
   return renderWithProviders(<SelectTipRack {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SelectTipRack', () => {
-  let props: React.ComponentProps<typeof SelectTipRack>
+  let props: ComponentProps<typeof SelectTipRack>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SummaryAndSettings.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SummaryAndSettings.test.tsx
index 0f5f7c7742c..246fa343260 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SummaryAndSettings.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SummaryAndSettings.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -16,6 +15,8 @@ import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { SummaryAndSettings } from '../SummaryAndSettings'
 import { NameQuickTransfer } from '../NameQuickTransfer'
 import { Overview } from '../Overview'
+
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -41,7 +42,7 @@ vi.mock('../utils/createQuickTransferFile')
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/deck_configuration')
 
-const render = (props: React.ComponentProps<typeof SummaryAndSettings>) => {
+const render = (props: ComponentProps<typeof SummaryAndSettings>) => {
   return renderWithProviders(<SummaryAndSettings {...props} />, {
     i18nInstance: i18n,
   })
@@ -49,7 +50,7 @@ const render = (props: React.ComponentProps<typeof SummaryAndSettings>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('SummaryAndSettings', () => {
-  let props: React.ComponentProps<typeof SummaryAndSettings>
+  let props: ComponentProps<typeof SummaryAndSettings>
   const createProtocol = vi.fn()
   const createRun = vi.fn()
 
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/ChangeTip.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/ChangeTip.test.tsx
index 213633678e5..cfe5b0a5086 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/ChangeTip.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/ChangeTip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,9 +7,11 @@ import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '/app/redux/analytics'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { ChangeTip } from '../../TipManagement/ChangeTip'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux-resources/analytics')
 
-const render = (props: React.ComponentProps<typeof ChangeTip>): any => {
+const render = (props: ComponentProps<typeof ChangeTip>): any => {
   return renderWithProviders(<ChangeTip {...props} />, {
     i18nInstance: i18n,
   })
@@ -19,7 +20,7 @@ const render = (props: React.ComponentProps<typeof ChangeTip>): any => {
 let mockTrackEventWithRobotSerial: any
 
 describe('ChangeTip', () => {
-  let props: React.ComponentProps<typeof ChangeTip>
+  let props: ComponentProps<typeof ChangeTip>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipDropLocation.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipDropLocation.test.tsx
index aed3d143b31..712e7e2217e 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipDropLocation.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipDropLocation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -9,10 +8,12 @@ import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '/app/redux/analytics'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { TipDropLocation } from '../../TipManagement/TipDropLocation'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/deck_configuration')
 vi.mock('/app/redux-resources/analytics')
 
-const render = (props: React.ComponentProps<typeof TipDropLocation>): any => {
+const render = (props: ComponentProps<typeof TipDropLocation>): any => {
   return renderWithProviders(<TipDropLocation {...props} />, {
     i18nInstance: i18n,
   })
@@ -20,7 +21,7 @@ const render = (props: React.ComponentProps<typeof TipDropLocation>): any => {
 let mockTrackEventWithRobotSerial: any
 
 describe('TipDropLocation', () => {
-  let props: React.ComponentProps<typeof TipDropLocation>
+  let props: ComponentProps<typeof TipDropLocation>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipManagement.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipManagement.test.tsx
index 618153a8b53..61f38149a99 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipManagement.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipManagement.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -10,11 +9,13 @@ import { ChangeTip } from '../../TipManagement/ChangeTip'
 import { TipDropLocation } from '../../TipManagement/TipDropLocation'
 import { TipManagement } from '../../TipManagement/'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../TipManagement/ChangeTip')
 vi.mock('../../TipManagement/TipDropLocation')
 vi.mock('/app/redux-resources/analytics')
 
-const render = (props: React.ComponentProps<typeof TipManagement>): any => {
+const render = (props: ComponentProps<typeof TipManagement>): any => {
   return renderWithProviders(<TipManagement {...props} />, {
     i18nInstance: i18n,
   })
@@ -22,7 +23,7 @@ const render = (props: React.ComponentProps<typeof TipManagement>): any => {
 let mockTrackEventWithRobotSerial: any
 
 describe('TipManagement', () => {
-  let props: React.ComponentProps<typeof TipManagement>
+  let props: ComponentProps<typeof TipManagement>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/VolumeEntry.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/VolumeEntry.test.tsx
index 8a14b9a5993..e96ea2515cd 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/VolumeEntry.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/VolumeEntry.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -10,6 +9,8 @@ import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard'
 import { getVolumeRange } from '../utils'
 import { VolumeEntry } from '../VolumeEntry'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/SoftwareKeyboard')
 vi.mock('../utils')
 
@@ -21,14 +22,14 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof VolumeEntry>) => {
+const render = (props: ComponentProps<typeof VolumeEntry>) => {
   return renderWithProviders(<VolumeEntry {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('VolumeEntry', () => {
-  let props: React.ComponentProps<typeof VolumeEntry>
+  let props: ComponentProps<typeof VolumeEntry>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx b/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx
index 10ee119176e..cb1b541b39b 100644
--- a/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx
+++ b/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { formatDistance } from 'date-fns'
 import { MemoryRouter } from 'react-router-dom'
@@ -26,6 +25,7 @@ import { useCloneRun, useNotifyAllRunsQuery } from '/app/resources/runs'
 import { useRerunnableStatusText } from '../hooks'
 import { RecentRunProtocolCard } from '../'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { ProtocolHardware } from '/app/transformations/commands'
 
@@ -103,7 +103,7 @@ const mockBadRunData = {
 
 const mockCloneRun = vi.fn()
 
-const render = (props: React.ComponentProps<typeof RecentRunProtocolCard>) => {
+const render = (props: ComponentProps<typeof RecentRunProtocolCard>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RecentRunProtocolCard {...props} />
@@ -120,7 +120,7 @@ const mockTrackProtocolRunEvent = vi.fn(
 )
 
 describe('RecentRunProtocolCard', () => {
-  let props: React.ComponentProps<typeof RecentRunProtocolCard>
+  let props: ComponentProps<typeof RecentRunProtocolCard>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx b/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx
index 277edf80d87..31026884d3c 100644
--- a/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx
+++ b/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { beforeEach, describe, it, vi } from 'vitest'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { useNotifyAllRunsQuery } from '/app/resources/runs'
 import { RecentRunProtocolCard, RecentRunProtocolCarousel } from '..'
 
+import type { ComponentProps } from 'react'
 import type { RunData } from '@opentrons/api-client'
 
 vi.mock('@opentrons/react-api-client')
@@ -30,14 +30,12 @@ const mockRun = {
   runTimeParameters: [],
 }
 
-const render = (
-  props: React.ComponentProps<typeof RecentRunProtocolCarousel>
-) => {
+const render = (props: ComponentProps<typeof RecentRunProtocolCarousel>) => {
   return renderWithProviders(<RecentRunProtocolCarousel {...props} />)
 }
 
 describe('RecentRunProtocolCarousel', () => {
-  let props: React.ComponentProps<typeof RecentRunProtocolCarousel>
+  let props: ComponentProps<typeof RecentRunProtocolCarousel>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx b/app/src/organisms/ODD/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx
index f209e69f5ec..996e00d56c7 100644
--- a/app/src/organisms/ODD/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx
+++ b/app/src/organisms/ODD/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { renderHook } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,10 +6,12 @@ import { i18n } from '/app/i18n'
 import { useFeatureFlag } from '/app/redux/config'
 import { useHardwareStatusText } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
+
 vi.mock('/app/redux/config')
 
 describe('useHardwareStatusText', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     wrapper = ({ children }) => (
       <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSelectAuthenticationType.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSelectAuthenticationType.tsx
index f8ce5e6a205..8193a44b23b 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSelectAuthenticationType.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSelectAuthenticationType.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
@@ -6,6 +5,7 @@ import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { SelectAuthenticationType } from '../../NetworkSettings'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { WifiSecurityType } from '@opentrons/api-client'
 import type { SetSettingOption } from '../types'
 
@@ -13,7 +13,7 @@ interface RobotSettingsSelectAuthenticationTypeProps {
   handleWifiConnect: () => void
   selectedAuthType: WifiSecurityType
   setCurrentOption: SetSettingOption
-  setSelectedAuthType: React.Dispatch<React.SetStateAction<WifiSecurityType>>
+  setSelectedAuthType: Dispatch<SetStateAction<WifiSecurityType>>
 }
 
 /**
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx
index 9204f22f5c4..aaafbf5d590 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
@@ -6,13 +5,14 @@ import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { SetWifiCred } from '../../NetworkSettings/SetWifiCred'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { SetSettingOption } from '../types'
 
 interface RobotSettingsSetWifiCredProps {
   handleConnect: () => void
   password: string
   setCurrentOption: SetSettingOption
-  setPassword: React.Dispatch<React.SetStateAction<string>>
+  setPassword: Dispatch<SetStateAction<string>>
 }
 
 /**
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx
index add3565fe74..67edb5249ff 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
@@ -6,11 +5,12 @@ import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { WifiConnectionDetails } from './WifiConnectionDetails'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { WifiSecurityType } from '@opentrons/api-client'
 import type { SetSettingOption } from '../types'
 
 interface RobotSettingsWifiProps {
-  setSelectedSsid: React.Dispatch<React.SetStateAction<string>>
+  setSelectedSsid: Dispatch<SetStateAction<string>>
   setCurrentOption: SetSettingOption
   activeSsid?: string
   connectedWifiAuthType?: WifiSecurityType
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/EthernetConnectionDetails.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/EthernetConnectionDetails.test.tsx
index ddefd80196d..d034b6b6e7c 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/EthernetConnectionDetails.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/EthernetConnectionDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -11,13 +10,13 @@ import { getLocalRobot } from '/app/redux/discovery'
 import { mockConnectedRobot } from '/app/redux/discovery/__fixtures__'
 import { EthernetConnectionDetails } from '../EthernetConnectionDetails'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux/discovery/selectors')
 vi.mock('/app/redux/networking/selectors')
 
-const render = (
-  props: React.ComponentProps<typeof EthernetConnectionDetails>
-) => {
+const render = (props: ComponentProps<typeof EthernetConnectionDetails>) => {
   return renderWithProviders(<EthernetConnectionDetails {...props} />, {
     i18nInstance: i18n,
   })
@@ -31,7 +30,7 @@ const mockEthernet = {
 }
 
 describe('EthernetConnectionDetails', () => {
-  let props: React.ComponentProps<typeof EthernetConnectionDetails>
+  let props: ComponentProps<typeof EthernetConnectionDetails>
   beforeEach(() => {
     props = {
       handleGoBack: vi.fn(),
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkDetailsModal.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkDetailsModal.test.tsx
index 76b4c6f1be0..6b4048dbcfc 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkDetailsModal.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkDetailsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -7,16 +6,18 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { NetworkDetailsModal } from '../NetworkDetailsModal'
 
+import type { ComponentProps } from 'react'
+
 const mockFn = vi.fn()
 
-const render = (props: React.ComponentProps<typeof NetworkDetailsModal>) => {
+const render = (props: ComponentProps<typeof NetworkDetailsModal>) => {
   return renderWithProviders(<NetworkDetailsModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('NetworkDetailsModal', () => {
-  let props: React.ComponentProps<typeof NetworkDetailsModal>
+  let props: ComponentProps<typeof NetworkDetailsModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkSettings.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkSettings.test.tsx
index 266778c0c81..37a5db9c3f2 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkSettings.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkSettings.test.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable testing-library/no-node-access */
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -12,6 +11,7 @@ import { WifiConnectionDetails } from '../WifiConnectionDetails'
 import { EthernetConnectionDetails } from '../EthernetConnectionDetails'
 import { NetworkSettings } from '..'
 
+import type { ComponentProps } from 'react'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 import type { WifiNetwork } from '/app/redux/networking/types'
 
@@ -22,14 +22,14 @@ vi.mock('../EthernetConnectionDetails')
 
 const mockSetCurrentOption = vi.fn()
 
-const render = (props: React.ComponentProps<typeof NetworkSettings>) => {
+const render = (props: ComponentProps<typeof NetworkSettings>) => {
   return renderWithProviders(<NetworkSettings {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('NetworkSettings', () => {
-  let props: React.ComponentProps<typeof NetworkSettings>
+  let props: ComponentProps<typeof NetworkSettings>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
index 9650a89b76c..c7311087fe4 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -10,6 +9,8 @@ import { getLocalRobot } from '/app/redux/discovery'
 import * as Networking from '/app/redux/networking'
 import { NetworkDetailsModal } from '../NetworkDetailsModal'
 import { WifiConnectionDetails } from '../WifiConnectionDetails'
+
+import type { ComponentProps } from 'react'
 import type * as Dom from 'react-router-dom'
 import type { State } from '/app/redux/types'
 
@@ -36,14 +37,14 @@ const initialMockWifi = {
   type: Networking.INTERFACE_WIFI,
 }
 
-const render = (props: React.ComponentProps<typeof WifiConnectionDetails>) => {
+const render = (props: ComponentProps<typeof WifiConnectionDetails>) => {
   return renderWithProviders(<WifiConnectionDetails {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WifiConnectionDetails', () => {
-  let props: React.ComponentProps<typeof WifiConnectionDetails>
+  let props: ComponentProps<typeof WifiConnectionDetails>
   beforeEach(() => {
     props = {
       activeSsid: 'mock wifi ssid',
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/index.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/index.tsx
index db73b89dae3..9afeeb15cc0 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/index.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 
@@ -19,6 +18,7 @@ import {
 
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 
+import type { ComponentProps } from 'react'
 import type { IconName, ChipType } from '@opentrons/components'
 import type { NetworkConnection } from '/app/resources/networking/hooks/useNetworkConnection'
 import type { SetSettingOption } from '../types'
@@ -87,7 +87,7 @@ export function NetworkSettings({
   )
 }
 
-interface NetworkSettingButtonProps extends React.ComponentProps<typeof Btn> {
+interface NetworkSettingButtonProps extends ComponentProps<typeof Btn> {
   buttonTitle: string
   iconName: IconName
   chipType: ChipType
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx
index f777c9fcb77..1a47e3bbe4e 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import {
@@ -20,6 +19,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { IconName } from '@opentrons/components'
 
 const SETTING_BUTTON_STYLE = css`
@@ -36,10 +36,10 @@ const SETTING_BUTTON_STYLE = css`
 
 interface RobotSettingButtonProps {
   settingName: string
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
   iconName?: IconName
   settingInfo?: string
-  rightElement?: React.ReactNode
+  rightElement?: ReactNode
   dataTestId?: string
 }
 
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/DeviceReset.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/DeviceReset.test.tsx
index 9f71205231e..3f273ab2df2 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/DeviceReset.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/DeviceReset.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -9,6 +8,7 @@ import { useDispatchApiRequest } from '/app/redux/robot-api'
 
 import { DeviceReset } from '../DeviceReset'
 
+import type { ComponentProps } from 'react'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
 
 vi.mock('/app/redux/robot-admin')
@@ -47,7 +47,7 @@ const mockResetConfigOptions = [
   },
 ]
 
-const render = (props: React.ComponentProps<typeof DeviceReset>) => {
+const render = (props: ComponentProps<typeof DeviceReset>) => {
   return renderWithProviders(
     <DeviceReset {...props} />,
 
@@ -56,7 +56,7 @@ const render = (props: React.ComponentProps<typeof DeviceReset>) => {
 }
 
 describe('DeviceReset', () => {
-  let props: React.ComponentProps<typeof DeviceReset>
+  let props: ComponentProps<typeof DeviceReset>
   let dispatchApiRequest: DispatchApiRequestType
 
   beforeEach(() => {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx
index fe90eb2e1cb..50ce6edc7e6 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -17,20 +16,22 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { LanguageSetting } from '../LanguageSetting'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 vi.mock('/app/redux-resources/analytics')
 
 const mockSetCurrentOption = vi.fn()
 const mockTrackEvent = vi.fn()
 
-const render = (props: React.ComponentProps<typeof LanguageSetting>) => {
+const render = (props: ComponentProps<typeof LanguageSetting>) => {
   return renderWithProviders(<LanguageSetting {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('LanguageSetting', () => {
-  let props: React.ComponentProps<typeof LanguageSetting>
+  let props: ComponentProps<typeof LanguageSetting>
   beforeEach(() => {
     props = {
       setCurrentOption: mockSetCurrentOption,
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/Privacy.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/Privacy.test.tsx
index 03f4a987462..d281ccecf6f 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/Privacy.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/Privacy.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 
@@ -9,17 +8,19 @@ import { getRobotSettings } from '/app/redux/robot-settings'
 
 import { Privacy } from '../Privacy'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/analytics')
 vi.mock('/app/redux/robot-settings')
 
-const render = (props: React.ComponentProps<typeof Privacy>) => {
+const render = (props: ComponentProps<typeof Privacy>) => {
   return renderWithProviders(<Privacy {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Privacy', () => {
-  let props: React.ComponentProps<typeof Privacy>
+  let props: ComponentProps<typeof Privacy>
   beforeEach(() => {
     props = {
       robotName: 'Otie',
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersion.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersion.test.tsx
index ad30e2539fa..955161149d8 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersion.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersion.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -9,12 +8,14 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { RobotSystemVersion } from '../RobotSystemVersion'
 import { RobotSystemVersionModal } from '../RobotSystemVersionModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/shell')
 vi.mock('../RobotSystemVersionModal')
 
 const mockBack = vi.fn()
 
-const render = (props: React.ComponentProps<typeof RobotSystemVersion>) => {
+const render = (props: ComponentProps<typeof RobotSystemVersion>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotSystemVersion {...props} />
@@ -26,7 +27,7 @@ const render = (props: React.ComponentProps<typeof RobotSystemVersion>) => {
 }
 
 describe('RobotSystemVersion', () => {
-  let props: React.ComponentProps<typeof RobotSystemVersion>
+  let props: ComponentProps<typeof RobotSystemVersion>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersionModal.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersionModal.test.tsx
index 0d7a125eb1f..0b8f891f1a5 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersionModal.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersionModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,6 +5,8 @@ import '@testing-library/jest-dom/vitest'
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { RobotSystemVersionModal } from '../RobotSystemVersionModal'
+
+import type { ComponentProps } from 'react'
 import type * as Dom from 'react-router-dom'
 
 const mockFn = vi.fn()
@@ -19,16 +20,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (
-  props: React.ComponentProps<typeof RobotSystemVersionModal>
-) => {
+const render = (props: ComponentProps<typeof RobotSystemVersionModal>) => {
   return renderWithProviders(<RobotSystemVersionModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('RobotSystemVersionModal', () => {
-  let props: React.ComponentProps<typeof RobotSystemVersionModal>
+  let props: ComponentProps<typeof RobotSystemVersionModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TextSize.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TextSize.test.tsx
index 703323c0d7e..3ca0124810a 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TextSize.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TextSize.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
@@ -6,15 +5,17 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { TextSize } from '../TextSize'
 
+import type { ComponentProps } from 'react'
+
 const mockFunc = vi.fn()
-const render = (props: React.ComponentProps<typeof TextSize>) => {
+const render = (props: ComponentProps<typeof TextSize>) => {
   return renderWithProviders(<TextSize {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('TextSize', () => {
-  let props: React.ComponentProps<typeof TextSize>
+  let props: ComponentProps<typeof TextSize>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchScreenSleep.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchScreenSleep.test.tsx
index 990c6bcf436..6c75c584cfe 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchScreenSleep.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchScreenSleep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { i18n } from '/app/i18n'
@@ -6,19 +5,21 @@ import { updateConfigValue } from '/app/redux/config'
 import { TouchScreenSleep } from '../TouchScreenSleep'
 import { renderWithProviders } from '/app/__testing-utils__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
 // Note (kj:06/28/2023) this line is to avoid causing errors for scrollIntoView
 window.HTMLElement.prototype.scrollIntoView = vi.fn()
 
-const render = (props: React.ComponentProps<typeof TouchScreenSleep>) => {
+const render = (props: ComponentProps<typeof TouchScreenSleep>) => {
   return renderWithProviders(<TouchScreenSleep {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('TouchScreenSleep', () => {
-  let props: React.ComponentProps<typeof TouchScreenSleep>
+  let props: ComponentProps<typeof TouchScreenSleep>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchscreenBrightness.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchscreenBrightness.test.tsx
index 76993c42300..0dd4c87331d 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchscreenBrightness.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchscreenBrightness.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
@@ -10,18 +9,20 @@ import {
 import { renderWithProviders } from '/app/__testing-utils__'
 import { TouchscreenBrightness } from '../TouchscreenBrightness'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
 const mockFunc = vi.fn()
 
-const render = (props: React.ComponentProps<typeof TouchscreenBrightness>) => {
+const render = (props: ComponentProps<typeof TouchscreenBrightness>) => {
   return renderWithProviders(<TouchscreenBrightness {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('TouchscreenBrightness', () => {
-  let props: React.ComponentProps<typeof TouchscreenBrightness>
+  let props: ComponentProps<typeof TouchscreenBrightness>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/UpdateChannel.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/UpdateChannel.test.tsx
index c25e9582a4b..5cf5d34ffde 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/UpdateChannel.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/UpdateChannel.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -13,6 +12,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { UpdateChannel } from '../UpdateChannel'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
 const mockChannelOptions = [
@@ -26,14 +27,14 @@ const mockChannelOptions = [
 
 const mockhandleBackPress = vi.fn()
 
-const render = (props: React.ComponentProps<typeof UpdateChannel>) => {
+const render = (props: ComponentProps<typeof UpdateChannel>) => {
   return renderWithProviders(<UpdateChannel {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('UpdateChannel', () => {
-  let props: React.ComponentProps<typeof UpdateChannel>
+  let props: ComponentProps<typeof UpdateChannel>
   beforeEach(() => {
     props = {
       handleBackPress: mockhandleBackPress,
diff --git a/app/src/organisms/ODD/RobotSetupHeader/index.tsx b/app/src/organisms/ODD/RobotSetupHeader/index.tsx
index 6b7a3fa1049..3e828ddb061 100644
--- a/app/src/organisms/ODD/RobotSetupHeader/index.tsx
+++ b/app/src/organisms/ODD/RobotSetupHeader/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   ALIGN_CENTER,
   Btn,
@@ -17,14 +15,15 @@ import {
 import { SmallButton } from '/app/atoms/buttons'
 import { InlineNotification } from '/app/atoms/InlineNotification'
 
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { InlineNotificationProps } from '/app/atoms/InlineNotification'
 
 interface RobotSetupHeaderProps {
   header: string
-  buttonText?: React.ReactNode
+  buttonText?: ReactNode
   inlineNotification?: InlineNotificationProps
-  onClickBack?: React.MouseEventHandler
-  onClickButton?: React.MouseEventHandler
+  onClickBack?: MouseEventHandler
+  onClickButton?: MouseEventHandler
 }
 
 export function RobotSetupHeader({
diff --git a/app/src/organisms/ODD/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx b/app/src/organisms/ODD/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx
index 69f610d3ef8..bef530f1458 100644
--- a/app/src/organisms/ODD/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx
+++ b/app/src/organisms/ODD/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
@@ -21,6 +20,7 @@ import { mockConnectedRobot } from '/app/redux/discovery/__fixtures__'
 import { ConfirmCancelRunModal } from '../ConfirmCancelRunModal'
 import { CancelingRunModal } from '../CancelingRunModal'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 vi.mock('@opentrons/react-api-client')
@@ -46,7 +46,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ConfirmCancelRunModal>) => {
+const render = (props: ComponentProps<typeof ConfirmCancelRunModal>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ConfirmCancelRunModal {...props} />
@@ -63,7 +63,7 @@ const ROBOT_NAME = 'otie'
 const mockFn = vi.fn()
 
 describe('ConfirmCancelRunModal', () => {
-  let props: React.ComponentProps<typeof ConfirmCancelRunModal>
+  let props: ComponentProps<typeof ConfirmCancelRunModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx b/app/src/organisms/ODD/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx
index 581df7c013c..ceda8df2e42 100644
--- a/app/src/organisms/ODD/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx
+++ b/app/src/organisms/ODD/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -12,6 +11,8 @@ import { useRunningStepCounts } from '/app/resources/protocols/hooks'
 import { useNotifyAllCommandsQuery } from '/app/resources/runs'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/runs')
 vi.mock('/app/resources/protocols/hooks')
 
@@ -28,7 +29,7 @@ const mockRunTimer = {
 }
 
 const render = (
-  props: React.ComponentProps<typeof CurrentRunningProtocolCommand>
+  props: ComponentProps<typeof CurrentRunningProtocolCommand>
 ) => {
   return renderWithProviders(<CurrentRunningProtocolCommand {...props} />, {
     i18nInstance: i18n,
@@ -36,7 +37,7 @@ const render = (
 }
 
 describe('CurrentRunningProtocolCommand', () => {
-  let props: React.ComponentProps<typeof CurrentRunningProtocolCommand>
+  let props: ComponentProps<typeof CurrentRunningProtocolCommand>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RunningProtocol/__tests__/RunFailedModal.test.tsx b/app/src/organisms/ODD/RunningProtocol/__tests__/RunFailedModal.test.tsx
index 8dcfd2e5b88..40e1366d324 100644
--- a/app/src/organisms/ODD/RunningProtocol/__tests__/RunFailedModal.test.tsx
+++ b/app/src/organisms/ODD/RunningProtocol/__tests__/RunFailedModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -12,6 +11,8 @@ import { RunFailedModal } from '../RunFailedModal'
 import type { NavigateFunction } from 'react-router-dom'
 import { RUN_STATUS_FAILED } from '@opentrons/api-client'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
 const RUN_ID = 'mock_runID'
@@ -82,7 +83,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof RunFailedModal>) => {
+const render = (props: ComponentProps<typeof RunFailedModal>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RunFailedModal {...props} />
@@ -94,7 +95,7 @@ const render = (props: React.ComponentProps<typeof RunFailedModal>) => {
 }
 
 describe('RunFailedModal', () => {
-  let props: React.ComponentProps<typeof RunFailedModal>
+  let props: ComponentProps<typeof RunFailedModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx b/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx
index 199ae940c3b..5f2ceba8121 100644
--- a/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx
+++ b/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -10,20 +9,20 @@ import { i18n } from '/app/i18n'
 import { mockRobotSideAnalysis } from '/app/molecules/Command/__fixtures__'
 import { RunningProtocolCommandList } from '../RunningProtocolCommandList'
 
+import type { ComponentProps } from 'react'
+
 const mockPlayRun = vi.fn()
 const mockPauseRun = vi.fn()
 const mockShowModal = vi.fn()
 
-const render = (
-  props: React.ComponentProps<typeof RunningProtocolCommandList>
-) => {
+const render = (props: ComponentProps<typeof RunningProtocolCommandList>) => {
   return renderWithProviders(<RunningProtocolCommandList {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('RunningProtocolCommandList', () => {
-  let props: React.ComponentProps<typeof RunningProtocolCommandList>
+  let props: ComponentProps<typeof RunningProtocolCommandList>
   beforeEach(() => {
     props = {
       runStatus: RUN_STATUS_RUNNING,
diff --git a/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx b/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx
index 656d4d250d1..fcd48819c49 100644
--- a/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx
+++ b/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx
@@ -1,18 +1,17 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { RunningProtocolSkeleton } from '../RunningProtocolSkeleton'
 
-const render = (
-  props: React.ComponentProps<typeof RunningProtocolSkeleton>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof RunningProtocolSkeleton>) => {
   return renderWithProviders(<RunningProtocolSkeleton {...props} />)
 }
 
 describe('RunningProtocolSkeleton', () => {
-  let props: React.ComponentProps<typeof RunningProtocolSkeleton>
+  let props: ComponentProps<typeof RunningProtocolSkeleton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/PipetteWizardFlows/CheckPipetteButton.tsx b/app/src/organisms/PipetteWizardFlows/CheckPipetteButton.tsx
index 2300204b65b..25438c1442c 100644
--- a/app/src/organisms/PipetteWizardFlows/CheckPipetteButton.tsx
+++ b/app/src/organisms/PipetteWizardFlows/CheckPipetteButton.tsx
@@ -1,11 +1,12 @@
-import type * as React from 'react'
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import { PrimaryButton } from '@opentrons/components'
 import { SmallButton } from '/app/atoms/buttons'
 
+import type { Dispatch, SetStateAction } from 'react'
+
 interface CheckPipetteButtonProps {
   proceedButtonText: string
-  setFetching: React.Dispatch<React.SetStateAction<boolean>>
+  setFetching: Dispatch<SetStateAction<boolean>>
   isFetching: boolean
   isOnDevice: boolean | null
   proceed?: () => void
diff --git a/app/src/organisms/PipetteWizardFlows/MountPipette.tsx b/app/src/organisms/PipetteWizardFlows/MountPipette.tsx
index 9ba1b036785..b750aee0ad2 100644
--- a/app/src/organisms/PipetteWizardFlows/MountPipette.tsx
+++ b/app/src/organisms/PipetteWizardFlows/MountPipette.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   SINGLE_MOUNT_PIPETTES,
@@ -17,11 +16,13 @@ import { Skeleton } from '/app/atoms/Skeleton'
 import { CheckPipetteButton } from './CheckPipetteButton'
 import { BODY_STYLE, SECTIONS } from './constants'
 import { getPipetteAnimations, getPipetteAnimations96 } from './utils'
+
+import type { Dispatch, ReactNode, SetStateAction } from 'react'
 import type { PipetteWizardStepProps } from './types'
 
 interface MountPipetteProps extends PipetteWizardStepProps {
   isFetching: boolean
-  setFetching: React.Dispatch<React.SetStateAction<boolean>>
+  setFetching: Dispatch<SetStateAction<boolean>>
 }
 const BACKGROUND_SIZE = '47rem'
 
@@ -47,7 +48,7 @@ export const MountPipette = (props: MountPipetteProps): JSX.Element => {
       backgroundSize={BACKGROUND_SIZE}
     />
   )
-  let bodyText: React.ReactNode = <div></div>
+  let bodyText: ReactNode = <div></div>
   if (isFetching) {
     bodyText = (
       <>
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx
index 00120fe438a..0bbab02ebc5 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -16,7 +15,9 @@ import { FLOWS } from '../constants'
 import { AttachProbe } from '../AttachProbe'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
-const render = (props: React.ComponentProps<typeof AttachProbe>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof AttachProbe>) => {
   return renderWithProviders(<AttachProbe {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -24,7 +25,7 @@ const render = (props: React.ComponentProps<typeof AttachProbe>) => {
 vi.mock('/app/resources/deck_configuration')
 
 describe('AttachProbe', () => {
-  let props: React.ComponentProps<typeof AttachProbe>
+  let props: ComponentProps<typeof AttachProbe>
   beforeEach(() => {
     props = {
       mount: LEFT,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx
index a75e8bfe97a..db8b03816c2 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect, afterEach } from 'vitest'
 
@@ -19,19 +18,21 @@ import { BeforeBeginning } from '../BeforeBeginning'
 import { FLOWS } from '../constants'
 import { getIsGantryEmpty } from '../utils'
 
+import type { ComponentProps } from 'react'
+
 //  TODO(jr, 11/3/22): uncomment out the get help link when we have
 //  the correct URL to link it to
 vi.mock('/app/molecules/InProgressModal/InProgressModal')
 vi.mock('../utils')
 
-const render = (props: React.ComponentProps<typeof BeforeBeginning>) => {
+const render = (props: ComponentProps<typeof BeforeBeginning>) => {
   return renderWithProviders(<BeforeBeginning {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('BeforeBeginning', () => {
-  let props: React.ComponentProps<typeof BeforeBeginning>
+  let props: ComponentProps<typeof BeforeBeginning>
   beforeEach(() => {
     props = {
       selectedPipette: SINGLE_MOUNT_PIPETTES,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/Carriage.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/Carriage.test.tsx
index 17c8140ebe8..389fde2801f 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/Carriage.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/Carriage.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -11,14 +10,16 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { FLOWS } from '../constants'
 import { Carriage } from '../Carriage'
 
-const render = (props: React.ComponentProps<typeof Carriage>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Carriage>) => {
   return renderWithProviders(<Carriage {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('Carriage', () => {
-  let props: React.ComponentProps<typeof Carriage>
+  let props: ComponentProps<typeof Carriage>
   beforeEach(() => {
     props = {
       mount: LEFT,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/CheckPipetteButton.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/CheckPipetteButton.test.tsx
index e5dfc5fe3de..76c60357b46 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/CheckPipetteButton.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/CheckPipetteButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 
@@ -7,14 +6,16 @@ import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { CheckPipetteButton } from '../CheckPipetteButton'
 
-const render = (props: React.ComponentProps<typeof CheckPipetteButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof CheckPipetteButton>) => {
   return renderWithProviders(<CheckPipetteButton {...props} />)[0]
 }
 
 vi.mock('@opentrons/react-api-client')
 
 describe('CheckPipetteButton', () => {
-  let props: React.ComponentProps<typeof CheckPipetteButton>
+  let props: ComponentProps<typeof CheckPipetteButton>
   const refetch = vi.fn(() => Promise.resolve())
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx
index bda196f388c..ab14c846013 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   LEFT,
   NINETY_SIX_CHANNEL,
@@ -17,18 +16,20 @@ import { useAttachedPipettesFromInstrumentsQuery } from '/app/resources/instrume
 import { ChoosePipette } from '../ChoosePipette'
 import { getIsGantryEmpty } from '../utils'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../utils')
 vi.mock('/app/resources/instruments')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof ChoosePipette>) => {
+const render = (props: ComponentProps<typeof ChoosePipette>) => {
   return renderWithProviders(<ChoosePipette {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ChoosePipette', () => {
-  let props: React.ComponentProps<typeof ChoosePipette>
+  let props: ComponentProps<typeof ChoosePipette>
   beforeEach(() => {
     vi.mocked(getIsOnDevice).mockReturnValue(false)
     vi.mocked(getIsGantryEmpty).mockReturnValue(true)
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx
index d7777ed368c..a8f85ef3d73 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -19,17 +18,19 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { FLOWS } from '../constants'
 import { DetachPipette } from '../DetachPipette'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../CheckPipetteButton')
 vi.mock('/app/molecules/InProgressModal/InProgressModal')
 
-const render = (props: React.ComponentProps<typeof DetachPipette>) => {
+const render = (props: ComponentProps<typeof DetachPipette>) => {
   return renderWithProviders(<DetachPipette {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('DetachPipette', () => {
-  let props: React.ComponentProps<typeof DetachPipette>
+  let props: ComponentProps<typeof DetachPipette>
   beforeEach(() => {
     props = {
       selectedPipette: SINGLE_MOUNT_PIPETTES,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx
index 059846aebb5..755c795e0d4 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -12,16 +11,18 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { FLOWS } from '../constants'
 import { DetachProbe } from '../DetachProbe'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/InProgressModal/InProgressModal')
 
-const render = (props: React.ComponentProps<typeof DetachProbe>) => {
+const render = (props: ComponentProps<typeof DetachProbe>) => {
   return renderWithProviders(<DetachProbe {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('DetachProbe', () => {
-  let props: React.ComponentProps<typeof DetachProbe>
+  let props: ComponentProps<typeof DetachProbe>
   beforeEach(() => {
     props = {
       selectedPipette: SINGLE_MOUNT_PIPETTES,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/ExitModal.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/ExitModal.test.tsx
index a30407379a2..b09319fcb94 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/ExitModal.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/ExitModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -7,14 +6,16 @@ import { i18n } from '/app/i18n'
 import { FLOWS } from '../constants'
 import { ExitModal } from '../ExitModal'
 
-const render = (props: React.ComponentProps<typeof ExitModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ExitModal>) => {
   return renderWithProviders(<ExitModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ExitModal', () => {
-  let props: React.ComponentProps<typeof ExitModal>
+  let props: ComponentProps<typeof ExitModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/MountPipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/MountPipette.test.tsx
index 4c5d9dda2e0..24e8bb926b8 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/MountPipette.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/MountPipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 
@@ -16,16 +15,18 @@ import { FLOWS } from '../constants'
 import { CheckPipetteButton } from '../CheckPipetteButton'
 import { MountPipette } from '../MountPipette'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../CheckPipetteButton')
 
-const render = (props: React.ComponentProps<typeof MountPipette>) => {
+const render = (props: ComponentProps<typeof MountPipette>) => {
   return renderWithProviders(<MountPipette {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('MountPipette', () => {
-  let props: React.ComponentProps<typeof MountPipette>
+  let props: ComponentProps<typeof MountPipette>
   beforeEach(() => {
     props = {
       selectedPipette: SINGLE_MOUNT_PIPETTES,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/MountingPlate.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/MountingPlate.test.tsx
index 38744ad1bab..2393d1080d5 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/MountingPlate.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/MountingPlate.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 
@@ -10,14 +9,16 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { FLOWS } from '../constants'
 import { MountingPlate } from '../MountingPlate'
 
-const render = (props: React.ComponentProps<typeof MountingPlate>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof MountingPlate>) => {
   return renderWithProviders(<MountingPlate {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('MountingPlate', () => {
-  let props: React.ComponentProps<typeof MountingPlate>
+  let props: ComponentProps<typeof MountingPlate>
   beforeEach(() => {
     props = {
       mount: LEFT,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx
index 3382ac401a0..df53d95cdb7 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { act, fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
@@ -18,19 +17,20 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { Results } from '../Results'
 import { FLOWS } from '../constants'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/robot-settings/hooks')
 
-const render = (props: React.ComponentProps<typeof Results>) => {
+const render = (props: ComponentProps<typeof Results>) => {
   return renderWithProviders(<Results {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('Results', () => {
-  let props: React.ComponentProps<typeof Results>
+  let props: ComponentProps<typeof Results>
   let pipettePromise: Promise<void>
   let mockRefetchInstruments: Mock
   beforeEach(() => {
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/UnskippableModal.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/UnskippableModal.test.tsx
index bc738d0caf3..f2d51af9a5f 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/UnskippableModal.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/UnskippableModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { UnskippableModal } from '../UnskippableModal'
 
-const render = (props: React.ComponentProps<typeof UnskippableModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof UnskippableModal>) => {
   return renderWithProviders(<UnskippableModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('UnskippableModal', () => {
-  let props: React.ComponentProps<typeof UnskippableModal>
+  let props: ComponentProps<typeof UnskippableModal>
   it('returns the correct information for unskippable modal, pressing return button calls goBack prop', () => {
     props = {
       goBack: vi.fn(),
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx
index f44bd96fc6e..996ec520af2 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 import { I18nextProvider } from 'react-i18next'
 import { renderHook } from '@testing-library/react'
@@ -16,6 +15,8 @@ import {
 import { FLOWS } from '../constants'
 import { usePipetteFlowWizardHeaderText } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
+
 const BASE_PROPS_FOR_RUN_SETUP = {
   flowType: FLOWS.CALIBRATE,
   selectedPipette: SINGLE_MOUNT_PIPETTES,
@@ -23,7 +24,7 @@ const BASE_PROPS_FOR_RUN_SETUP = {
 }
 
 describe('usePipetteFlowWizardHeaderText', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     wrapper = ({ children }) => (
       <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
diff --git a/app/src/organisms/PipetteWizardFlows/types.ts b/app/src/organisms/PipetteWizardFlows/types.ts
index a8785e8a31c..3870141ab6e 100644
--- a/app/src/organisms/PipetteWizardFlows/types.ts
+++ b/app/src/organisms/PipetteWizardFlows/types.ts
@@ -1,6 +1,7 @@
-import type { SECTIONS, FLOWS } from './constants'
+import type { Dispatch, SetStateAction } from 'react'
 import type { useCreateCommandMutation } from '@opentrons/react-api-client'
 import type { PipetteMount, CreateCommand } from '@opentrons/shared-data'
+import type { SECTIONS, FLOWS } from './constants'
 import type { AttachedPipettesFromInstrumentsQuery } from '/app/resources/instruments'
 
 export type PipetteWizardStep =
@@ -78,7 +79,7 @@ export interface PipetteWizardStepProps {
   isRobotMoving: boolean
   maintenanceRunId?: string
   attachedPipettes: AttachedPipettesFromInstrumentsQuery
-  setShowErrorMessage: React.Dispatch<React.SetStateAction<string | null>>
+  setShowErrorMessage: Dispatch<SetStateAction<string | null>>
   errorMessage: string | null
   selectedPipette: SelectablePipettes
   isOnDevice: boolean | null
diff --git a/app/src/organisms/TakeoverModal/TakeoverModal.tsx b/app/src/organisms/TakeoverModal/TakeoverModal.tsx
index 8f6441124a7..34a0754609e 100644
--- a/app/src/organisms/TakeoverModal/TakeoverModal.tsx
+++ b/app/src/organisms/TakeoverModal/TakeoverModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 
@@ -18,12 +17,13 @@ import { getTopPortalEl } from '/app/App/portal'
 import { SmallButton } from '/app/atoms/buttons'
 import { OddModal } from '/app/molecules/OddModal'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
 
 interface TakeoverModalProps {
   title: string
   showConfirmTerminateModal: boolean
-  setShowConfirmTerminateModal: React.Dispatch<React.SetStateAction<boolean>>
+  setShowConfirmTerminateModal: Dispatch<SetStateAction<boolean>>
   confirmTerminate: () => void
   terminateInProgress: boolean
 }
diff --git a/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx b/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx
index 94a59aa903a..92c286e9bbd 100644
--- a/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx
+++ b/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -8,6 +7,7 @@ import { useMaintenanceRunTakeover } from '../useMaintenanceRunTakeover'
 import { MaintenanceRunTakeover } from '../MaintenanceRunTakeover'
 import { useNotifyCurrentMaintenanceRun } from '/app/resources/maintenance_runs'
 
+import type { ComponentProps } from 'react'
 import type { MaintenanceRunStatus } from '../MaintenanceRunStatusProvider'
 
 vi.mock('../useMaintenanceRunTakeover')
@@ -21,14 +21,14 @@ const MOCK_MAINTENANCE_RUN: MaintenanceRunStatus = {
   setOddRunIds: () => null,
 }
 
-const render = (props: React.ComponentProps<typeof MaintenanceRunTakeover>) => {
+const render = (props: ComponentProps<typeof MaintenanceRunTakeover>) => {
   return renderWithProviders(<MaintenanceRunTakeover {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('MaintenanceRunTakeover', () => {
-  let props: React.ComponentProps<typeof MaintenanceRunTakeover>
+  let props: ComponentProps<typeof MaintenanceRunTakeover>
   const testComponent = <div>{'Test Component'}</div>
 
   beforeEach(() => {
diff --git a/app/src/organisms/TakeoverModal/__tests__/TakeoverModal.test.tsx b/app/src/organisms/TakeoverModal/__tests__/TakeoverModal.test.tsx
index a902544e4a0..4f3ffd78894 100644
--- a/app/src/organisms/TakeoverModal/__tests__/TakeoverModal.test.tsx
+++ b/app/src/organisms/TakeoverModal/__tests__/TakeoverModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { TakeoverModal } from '../TakeoverModal'
 
-const render = (props: React.ComponentProps<typeof TakeoverModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof TakeoverModal>) => {
   return renderWithProviders(<TakeoverModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TakeoverModal', () => {
-  let props: React.ComponentProps<typeof TakeoverModal>
+  let props: ComponentProps<typeof TakeoverModal>
   beforeEach(() => {
     props = {
       showConfirmTerminateModal: false,
diff --git a/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx b/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx
index f1629e15b64..ab1b44991b6 100644
--- a/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx
+++ b/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -14,9 +13,11 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface ErrorUpdateSoftwareProps {
   errorMessage: string
-  children: React.ReactNode
+  children: ReactNode
 }
 export function ErrorUpdateSoftware({
   errorMessage,
diff --git a/app/src/organisms/UpdateRobotSoftware/__tests__/CompleteUpdateSoftware.test.tsx b/app/src/organisms/UpdateRobotSoftware/__tests__/CompleteUpdateSoftware.test.tsx
index b6b91424b92..be6d9056cc0 100644
--- a/app/src/organisms/UpdateRobotSoftware/__tests__/CompleteUpdateSoftware.test.tsx
+++ b/app/src/organisms/UpdateRobotSoftware/__tests__/CompleteUpdateSoftware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,16 +5,18 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { CompleteUpdateSoftware } from '../CompleteUpdateSoftware'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/robot-admin')
 
-const render = (props: React.ComponentProps<typeof CompleteUpdateSoftware>) => {
+const render = (props: ComponentProps<typeof CompleteUpdateSoftware>) => {
   return renderWithProviders(<CompleteUpdateSoftware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('CompleteUpdateSoftware', () => {
-  let props: React.ComponentProps<typeof CompleteUpdateSoftware>
+  let props: ComponentProps<typeof CompleteUpdateSoftware>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/UpdateRobotSoftware/__tests__/ErrorUpdateSoftware.test.tsx b/app/src/organisms/UpdateRobotSoftware/__tests__/ErrorUpdateSoftware.test.tsx
index d1706a4bf18..6f585d31db0 100644
--- a/app/src/organisms/UpdateRobotSoftware/__tests__/ErrorUpdateSoftware.test.tsx
+++ b/app/src/organisms/UpdateRobotSoftware/__tests__/ErrorUpdateSoftware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ErrorUpdateSoftware } from '../ErrorUpdateSoftware'
 
-const render = (props: React.ComponentProps<typeof ErrorUpdateSoftware>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ErrorUpdateSoftware>) => {
   return renderWithProviders(<ErrorUpdateSoftware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ErrorUpdateSoftware', () => {
-  let props: React.ComponentProps<typeof ErrorUpdateSoftware>
+  let props: ComponentProps<typeof ErrorUpdateSoftware>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx b/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx
index 93deeb27956..76344df2c4c 100644
--- a/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx
+++ b/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { UpdateSoftware } from '../UpdateSoftware'
 
-const render = (props: React.ComponentProps<typeof UpdateSoftware>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof UpdateSoftware>) => {
   return renderWithProviders(<UpdateSoftware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('UpdateSoftware', () => {
-  let props: React.ComponentProps<typeof UpdateSoftware>
+  let props: ComponentProps<typeof UpdateSoftware>
   beforeEach(() => {
     props = {
       updateType: 'downloading',
diff --git a/app/src/pages/Desktop/Labware/__tests__/hooks.test.tsx b/app/src/pages/Desktop/Labware/__tests__/hooks.test.tsx
index 5fe55c260dc..c2edcacd08a 100644
--- a/app/src/pages/Desktop/Labware/__tests__/hooks.test.tsx
+++ b/app/src/pages/Desktop/Labware/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
@@ -20,6 +19,7 @@ import {
 import { useLabwareFailure, useNewLabwareName } from '../hooks'
 import { useAllLabware } from '/app/local-resources/labware'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 import type { FailedLabwareFile } from '/app/redux/custom-labware/types'
@@ -39,7 +39,7 @@ describe('useAllLabware hook', () => {
   })
 
   it('should return object with only definition and modified date', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(() => useAllLabware('reverse', 'all'), {
@@ -53,7 +53,7 @@ describe('useAllLabware hook', () => {
     expect(labware2.definition).toBe(mockValidLabware.definition)
   })
   it('should return alphabetically sorted list', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(() => useAllLabware('alphabetical', 'all'), {
@@ -67,7 +67,7 @@ describe('useAllLabware hook', () => {
     expect(labware1.definition).toBe(mockValidLabware.definition)
   })
   it('should return no labware if not the right filter', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(() => useAllLabware('reverse', 'reservoir'), {
@@ -80,7 +80,7 @@ describe('useAllLabware hook', () => {
     expect(labware2).toBe(undefined)
   })
   it('should return labware with wellPlate filter', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(() => useAllLabware('reverse', 'wellPlate'), {
@@ -94,7 +94,7 @@ describe('useAllLabware hook', () => {
     expect(labware2.definition).toBe(mockValidLabware.definition)
   })
   it('should return custom labware with customLabware filter', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(
@@ -127,7 +127,7 @@ describe('useLabwareFailure hook', () => {
     vi.restoreAllMocks()
   })
   it('should return invalid labware definition', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <Provider store={store}>
@@ -147,7 +147,7 @@ describe('useLabwareFailure hook', () => {
       errorMessage: null,
     })
 
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <Provider store={store}>
@@ -170,7 +170,7 @@ describe('useLabwareFailure hook', () => {
       errorMessage: null,
     })
 
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <Provider store={store}>
@@ -190,7 +190,7 @@ describe('useLabwareFailure hook', () => {
       errorMessage: 'error',
     })
 
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <Provider store={store}>
@@ -217,7 +217,7 @@ describe('useNewLabwareName hook', () => {
   })
 
   it('should return filename as a string', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(useNewLabwareName, { wrapper })
diff --git a/app/src/pages/ODD/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx b/app/src/pages/ODD/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx
index 9efbfd5c3dc..0caa3a6ba10 100644
--- a/app/src/pages/ODD/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx
+++ b/app/src/pages/ODD/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { DisplayConnectionStatus } from '../DisplayConnectionStatus'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockFunc = vi.fn()
@@ -18,16 +18,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (
-  props: React.ComponentProps<typeof DisplayConnectionStatus>
-) => {
+const render = (props: ComponentProps<typeof DisplayConnectionStatus>) => {
   return renderWithProviders(<DisplayConnectionStatus {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('DisplayConnectionStatus', () => {
-  let props: React.ComponentProps<typeof DisplayConnectionStatus>
+  let props: ComponentProps<typeof DisplayConnectionStatus>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/ConnectViaEthernet/__tests__/TitleHeader.test.tsx b/app/src/pages/ODD/ConnectViaEthernet/__tests__/TitleHeader.test.tsx
index cffa8e9c63a..8c8667619b9 100644
--- a/app/src/pages/ODD/ConnectViaEthernet/__tests__/TitleHeader.test.tsx
+++ b/app/src/pages/ODD/ConnectViaEthernet/__tests__/TitleHeader.test.tsx
@@ -1,10 +1,10 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { TitleHeader } from '../TitleHeader'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -16,12 +16,12 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof TitleHeader>) => {
+const render = (props: ComponentProps<typeof TitleHeader>) => {
   return renderWithProviders(<TitleHeader {...props} />)
 }
 
 describe('TitleHeader', () => {
-  let props: React.ComponentProps<typeof TitleHeader>
+  let props: ComponentProps<typeof TitleHeader>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/ConnectViaWifi/SetWifiCred.tsx b/app/src/pages/ODD/ConnectViaWifi/SetWifiCred.tsx
index e2716fc2282..2d81286d058 100644
--- a/app/src/pages/ODD/ConnectViaWifi/SetWifiCred.tsx
+++ b/app/src/pages/ODD/ConnectViaWifi/SetWifiCred.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Flex, DIRECTION_COLUMN } from '@opentrons/components'
@@ -6,13 +5,14 @@ import { Flex, DIRECTION_COLUMN } from '@opentrons/components'
 import { SetWifiCred as SetWifiCredComponent } from '/app/organisms/ODD/NetworkSettings'
 import { RobotSetupHeader } from '/app/organisms/ODD/RobotSetupHeader'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { WifiScreenOption } from './'
 
 interface SetWifiCredProps {
   handleConnect: () => void
   password: string
   setCurrentOption: (option: WifiScreenOption) => void
-  setPassword: React.Dispatch<React.SetStateAction<string>>
+  setPassword: Dispatch<SetStateAction<string>>
 }
 
 export function SetWifiCred({
diff --git a/app/src/pages/ODD/InitialLoadingScreen/index.tsx b/app/src/pages/ODD/InitialLoadingScreen/index.tsx
index f35fad13b56..003d37e549e 100644
--- a/app/src/pages/ODD/InitialLoadingScreen/index.tsx
+++ b/app/src/pages/ODD/InitialLoadingScreen/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import {
   ALIGN_CENTER,
@@ -12,10 +11,12 @@ import {
 import { useRobotSettingsQuery } from '@opentrons/react-api-client'
 import { getIsShellReady } from '/app/redux/shell'
 
+import type { ReactNode } from 'react'
+
 export function InitialLoadingScreen({
   children,
 }: {
-  children?: React.ReactNode
+  children?: ReactNode
 }): JSX.Element {
   const isShellReady = useSelector(getIsShellReady)
 
diff --git a/app/src/pages/ODD/InstrumentsDashboard/index.tsx b/app/src/pages/ODD/InstrumentsDashboard/index.tsx
index acc88714979..49268c0ec51 100644
--- a/app/src/pages/ODD/InstrumentsDashboard/index.tsx
+++ b/app/src/pages/ODD/InstrumentsDashboard/index.tsx
@@ -7,6 +7,7 @@ import { AttachedInstrumentMountItem } from '/app/organisms/ODD/InstrumentMountI
 import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows'
 import { getShowPipetteCalibrationWarning } from '/app/transformations/instruments'
 import { PipetteRecalibrationODDWarning } from '/app/organisms/ODD/PipetteRecalibrationODDWarning'
+import type { ComponentProps } from 'react'
 import type { GripperData, PipetteData } from '@opentrons/api-client'
 
 const FETCH_PIPETTE_CAL_POLL = 10000
@@ -16,8 +17,8 @@ export const InstrumentsDashboard = (): JSX.Element => {
     refetchInterval: FETCH_PIPETTE_CAL_POLL,
   })
   const [wizardProps, setWizardProps] = useState<
-    | React.ComponentProps<typeof GripperWizardFlows>
-    | React.ComponentProps<typeof PipetteWizardFlows>
+    | ComponentProps<typeof GripperWizardFlows>
+    | ComponentProps<typeof PipetteWizardFlows>
     | null
   >(null)
 
diff --git a/app/src/pages/ODD/ProtocolDashboard/PinnedProtocolCarousel.tsx b/app/src/pages/ODD/ProtocolDashboard/PinnedProtocolCarousel.tsx
index 59e9fc5c117..267b77a5cea 100644
--- a/app/src/pages/ODD/ProtocolDashboard/PinnedProtocolCarousel.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/PinnedProtocolCarousel.tsx
@@ -1,4 +1,4 @@
-import type * as React from 'react'
+import styled from 'styled-components'
 import {
   ALIGN_FLEX_START,
   DIRECTION_ROW,
@@ -9,13 +9,13 @@ import {
 import { useNotifyAllRunsQuery } from '/app/resources/runs'
 import { PinnedProtocol } from './PinnedProtocol'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { ProtocolResource } from '@opentrons/shared-data'
 import type { CardSizeType } from './PinnedProtocol'
-import styled from 'styled-components'
 
 interface PinnedProtocolCarouselProps {
   pinnedProtocols: ProtocolResource[]
-  longPress: React.Dispatch<React.SetStateAction<boolean>>
+  longPress: Dispatch<SetStateAction<boolean>>
   setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void
   setTargetProtocolId: (targetProtocolId: string) => void
   isRequiredCSV?: boolean
diff --git a/app/src/pages/ODD/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ODD/ProtocolDashboard/ProtocolCard.tsx
index 61a0bcb9061..6786205d889 100644
--- a/app/src/pages/ODD/ProtocolDashboard/ProtocolCard.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/ProtocolCard.tsx
@@ -35,6 +35,7 @@ import { LongPressModal } from './LongPressModal'
 import { formatTimeWithUtcLabel } from '/app/resources/runs'
 import { useUpdatedLastRunTime } from '/app/pages/ODD/ProtocolDashboard/hooks'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { UseLongPressResult } from '@opentrons/components'
 import type { ProtocolResource } from '@opentrons/shared-data'
 import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
@@ -43,7 +44,7 @@ const REFETCH_INTERVAL = 5000
 
 interface ProtocolCardProps {
   protocol: ProtocolResource
-  longPress: React.Dispatch<React.SetStateAction<boolean>>
+  longPress: Dispatch<SetStateAction<boolean>>
   setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void
   setTargetProtocolId: (targetProtocolId: string) => void
   lastRun?: string
diff --git a/app/src/pages/ODD/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx b/app/src/pages/ODD/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx
index 1c55405dbde..059e62f85e5 100644
--- a/app/src/pages/ODD/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { act, fireEvent, screen } from '@testing-library/react'
@@ -10,6 +9,8 @@ import { useHost, useProtocolQuery } from '@opentrons/react-api-client'
 import { i18n } from '/app/i18n'
 import { useToaster } from '/app/organisms/ToasterOven'
 import { DeleteProtocolConfirmationModal } from '../DeleteProtocolConfirmationModal'
+
+import type { ComponentProps } from 'react'
 import type { HostConfig } from '@opentrons/api-client'
 
 vi.mock('@opentrons/api-client')
@@ -22,7 +23,7 @@ const mockMakeSnackbar = vi.fn()
 const MOCK_HOST_CONFIG = {} as HostConfig
 
 const render = (
-  props: React.ComponentProps<typeof DeleteProtocolConfirmationModal>
+  props: ComponentProps<typeof DeleteProtocolConfirmationModal>
 ) => {
   return renderWithProviders(<DeleteProtocolConfirmationModal {...props} />, {
     i18nInstance: i18n,
@@ -30,7 +31,7 @@ const render = (
 }
 
 describe('DeleteProtocolConfirmationModal', () => {
-  let props: React.ComponentProps<typeof DeleteProtocolConfirmationModal>
+  let props: ComponentProps<typeof DeleteProtocolConfirmationModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx b/app/src/pages/ODD/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx
index f92904573d0..a98f0478d6d 100644
--- a/app/src/pages/ODD/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { act, fireEvent, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
@@ -10,9 +9,10 @@ import { i18n } from '/app/i18n'
 import { useFeatureFlag } from '/app/redux/config'
 import { PinnedProtocol } from '../PinnedProtocol'
 
+import type { ComponentProps } from 'react'
+import type { NavigateFunction } from 'react-router-dom'
 import type { Chip } from '@opentrons/components'
 import type { ProtocolResource } from '@opentrons/shared-data'
-import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
 
@@ -50,7 +50,7 @@ const mockProtocol: ProtocolResource = {
   key: '26ed5a82-502f-4074-8981-57cdda1d066d',
 }
 
-const render = (props: React.ComponentProps<typeof PinnedProtocol>) => {
+const render = (props: ComponentProps<typeof PinnedProtocol>) => {
   return renderWithProviders(
     <MemoryRouter>
       <PinnedProtocol {...props} />
@@ -62,7 +62,7 @@ const render = (props: React.ComponentProps<typeof PinnedProtocol>) => {
 }
 
 describe('Pinned Protocol', () => {
-  let props: React.ComponentProps<typeof PinnedProtocol>
+  let props: ComponentProps<typeof PinnedProtocol>
   vi.useFakeTimers()
 
   beforeEach(() => {
diff --git a/app/src/pages/ODD/ProtocolDashboard/__tests__/ProtocolCard.test.tsx b/app/src/pages/ODD/ProtocolDashboard/__tests__/ProtocolCard.test.tsx
index c26b429e29e..5f1587242d8 100644
--- a/app/src/pages/ODD/ProtocolDashboard/__tests__/ProtocolCard.test.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/__tests__/ProtocolCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { act, fireEvent, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
@@ -14,6 +13,7 @@ import { i18n } from '/app/i18n'
 import { useFeatureFlag } from '/app/redux/config'
 import { ProtocolCard } from '../ProtocolCard'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { UseQueryResult } from 'react-query'
 import type {
@@ -77,7 +77,7 @@ const mockProtocolWithCSV: ProtocolResource = {
   key: '26ed5a82-502f-4074-8981-57cdda1d066d',
 }
 
-const render = (props: React.ComponentProps<typeof ProtocolCard>) => {
+const render = (props: ComponentProps<typeof ProtocolCard>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ProtocolCard {...props} />
@@ -89,7 +89,7 @@ const render = (props: React.ComponentProps<typeof ProtocolCard>) => {
 }
 
 describe('ProtocolCard', () => {
-  let props: React.ComponentProps<typeof ProtocolCard>
+  let props: ComponentProps<typeof ProtocolCard>
   vi.useFakeTimers()
 
   beforeEach(() => {
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/Deck.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/Deck.test.tsx
index a99e2c3f82e..902cd1d3b8c 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/Deck.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/Deck.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -12,6 +11,7 @@ import {
 import { i18n } from '/app/i18n'
 import { Deck } from '../Deck'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 import type { Protocol } from '@opentrons/api-client'
@@ -141,14 +141,14 @@ const MOCK_PROTOCOL_ANALYSIS = {
   ],
 }
 
-const render = (props: React.ComponentProps<typeof Deck>) => {
+const render = (props: ComponentProps<typeof Deck>) => {
   return renderWithProviders(<Deck {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Deck', () => {
-  let props: React.ComponentProps<typeof Deck>
+  let props: ComponentProps<typeof Deck>
   beforeEach(() => {
     props = {
       protocolId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/EmptySection.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/EmptySection.test.tsx
index 32b388ef1f3..9c1832fc08f 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/EmptySection.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/EmptySection.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { it, describe } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { EmptySection } from '../EmptySection'
 
-const render = (props: React.ComponentProps<typeof EmptySection>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof EmptySection>) => {
   return renderWithProviders(<EmptySection {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EmptySection', () => {
-  let props: React.ComponentProps<typeof EmptySection>
+  let props: ComponentProps<typeof EmptySection>
 
   it('should render text for labware', () => {
     props = {
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/Hardware.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/Hardware.test.tsx
index a8f78c8a121..7d03ce6ba3d 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/Hardware.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/Hardware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -12,19 +11,21 @@ import { i18n } from '/app/i18n'
 import { useRequiredProtocolHardware } from '/app/resources/protocols'
 import { Hardware } from '../Hardware'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/protocols')
 vi.mock('/app/redux/config')
 
 const MOCK_PROTOCOL_ID = 'mock_protocol_id'
 
-const render = (props: React.ComponentProps<typeof Hardware>) => {
+const render = (props: ComponentProps<typeof Hardware>) => {
   return renderWithProviders(<Hardware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Hardware', () => {
-  let props: React.ComponentProps<typeof Hardware>
+  let props: ComponentProps<typeof Hardware>
   beforeEach(() => {
     props = {
       protocolId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/Labware.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/Labware.test.tsx
index 0c1aab61196..14568a6ceb3 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/Labware.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/Labware.test.tsx
@@ -1,10 +1,6 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach, afterEach } from 'vitest'
+import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
-import { renderWithProviders } from '/app/__testing-utils__'
-import { i18n } from '/app/i18n'
-import { useRequiredProtocolLabware } from '/app/resources/protocols'
-import { Labware } from '../Labware'
 
 import {
   fixtureTiprack10ul,
@@ -12,21 +8,26 @@ import {
   fixture96Plate,
 } from '@opentrons/shared-data'
 
+import { renderWithProviders } from '/app/__testing-utils__'
+import { i18n } from '/app/i18n'
+import { useRequiredProtocolLabware } from '/app/resources/protocols'
+import { Labware } from '../Labware'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import { screen } from '@testing-library/react'
 
 vi.mock('/app/resources/protocols')
 
 const MOCK_PROTOCOL_ID = 'mock_protocol_id'
 
-const render = (props: React.ComponentProps<typeof Labware>) => {
+const render = (props: ComponentProps<typeof Labware>) => {
   return renderWithProviders(<Labware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Labware', () => {
-  let props: React.ComponentProps<typeof Labware>
+  let props: ComponentProps<typeof Labware>
   beforeEach(() => {
     props = {
       protocolId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/Liquids.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/Liquids.test.tsx
index be019dd6cf1..23233c6c50d 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/Liquids.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/Liquids.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
@@ -16,6 +15,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { Liquids } from '../Liquids'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { Protocol } from '@opentrons/api-client'
 import type * as SharedData from '@opentrons/shared-data'
@@ -180,14 +180,14 @@ const MOCK_LABWARE_INFO_BY_LIQUID_ID = {
   ],
 }
 
-const render = (props: React.ComponentProps<typeof Liquids>) => {
+const render = (props: ComponentProps<typeof Liquids>) => {
   return renderWithProviders(<Liquids {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Liquids', () => {
-  let props: React.ComponentProps<typeof Liquids>
+  let props: ComponentProps<typeof Liquids>
   beforeEach(() => {
     props = {
       protocolId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/Parameters.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/Parameters.test.tsx
index f41115cf638..b2d60c57c92 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/Parameters.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/Parameters.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { it, describe, beforeEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -9,17 +8,19 @@ import { useRunTimeParameters } from '/app/resources/protocols'
 import { Parameters } from '../Parameters'
 import { mockRunTimeParameterData } from '/app/organisms/ODD/ProtocolSetup/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/organisms/ToasterOven')
 vi.mock('/app/resources/protocols')
 
-const render = (props: React.ComponentProps<typeof Parameters>) => {
+const render = (props: ComponentProps<typeof Parameters>) => {
   return renderWithProviders(<Parameters {...props} />, {
     i18nInstance: i18n,
   })
 }
 const MOCK_MAKE_SNACK_BAR = vi.fn()
 describe('Parameters', () => {
-  let props: React.ComponentProps<typeof Parameters>
+  let props: ComponentProps<typeof Parameters>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx b/app/src/pages/ODD/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx
index f06e36df20d..5a9b2ea98bc 100644
--- a/app/src/pages/ODD/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx
+++ b/app/src/pages/ODD/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -7,17 +6,19 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmAttachedModal } from '../ConfirmAttachedModal'
 
+import type { ComponentProps } from 'react'
+
 const mockOnCloseClick = vi.fn()
 const mockOnConfirmClick = vi.fn()
 
-const render = (props: React.ComponentProps<typeof ConfirmAttachedModal>) => {
+const render = (props: ComponentProps<typeof ConfirmAttachedModal>) => {
   return renderWithProviders(<ConfirmAttachedModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ConfirmAttachedModal', () => {
-  let props: React.ComponentProps<typeof ConfirmAttachedModal>
+  let props: ComponentProps<typeof ConfirmAttachedModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/QuickTransferDashboard/PinnedTransferCarousel.tsx b/app/src/pages/ODD/QuickTransferDashboard/PinnedTransferCarousel.tsx
index 8b6554c3aa1..fc5b127b437 100644
--- a/app/src/pages/ODD/QuickTransferDashboard/PinnedTransferCarousel.tsx
+++ b/app/src/pages/ODD/QuickTransferDashboard/PinnedTransferCarousel.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled from 'styled-components'
 import {
   ALIGN_FLEX_START,
@@ -11,12 +10,13 @@ import {
 
 import { PinnedTransfer } from './PinnedTransfer'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { ProtocolResource } from '@opentrons/shared-data'
 import type { CardSizeType } from './PinnedTransfer'
 
 export function PinnedTransferCarousel(props: {
   pinnedTransfers: ProtocolResource[]
-  longPress: React.Dispatch<React.SetStateAction<boolean>>
+  longPress: Dispatch<SetStateAction<boolean>>
   setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void
   setTargetTransferId: (targetTransferId: string) => void
 }): JSX.Element {
diff --git a/app/src/pages/ODD/QuickTransferDashboard/__tests__/DeleteTransferConfirmationModal.test.tsx b/app/src/pages/ODD/QuickTransferDashboard/__tests__/DeleteTransferConfirmationModal.test.tsx
index 1b42a6a5e3e..e7cb5ad92e6 100644
--- a/app/src/pages/ODD/QuickTransferDashboard/__tests__/DeleteTransferConfirmationModal.test.tsx
+++ b/app/src/pages/ODD/QuickTransferDashboard/__tests__/DeleteTransferConfirmationModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { act, fireEvent, screen } from '@testing-library/react'
@@ -11,6 +10,7 @@ import { i18n } from '/app/i18n'
 import { useToaster } from '/app/organisms/ToasterOven'
 import { DeleteTransferConfirmationModal } from '../DeleteTransferConfirmationModal'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { HostConfig } from '@opentrons/api-client'
 
@@ -33,7 +33,7 @@ const mockMakeSnackbar = vi.fn()
 const MOCK_HOST_CONFIG = {} as HostConfig
 
 const render = (
-  props: React.ComponentProps<typeof DeleteTransferConfirmationModal>
+  props: ComponentProps<typeof DeleteTransferConfirmationModal>
 ) => {
   return renderWithProviders(<DeleteTransferConfirmationModal {...props} />, {
     i18nInstance: i18n,
@@ -41,7 +41,7 @@ const render = (
 }
 
 describe('DeleteTransferConfirmationModal', () => {
-  let props: React.ComponentProps<typeof DeleteTransferConfirmationModal>
+  let props: ComponentProps<typeof DeleteTransferConfirmationModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/QuickTransferDetails/__tests__/Deck.test.tsx b/app/src/pages/ODD/QuickTransferDetails/__tests__/Deck.test.tsx
index e15296037d5..415a25fdc65 100644
--- a/app/src/pages/ODD/QuickTransferDetails/__tests__/Deck.test.tsx
+++ b/app/src/pages/ODD/QuickTransferDetails/__tests__/Deck.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -12,6 +11,7 @@ import {
 import { i18n } from '/app/i18n'
 import { Deck } from '../Deck'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 import type { Protocol } from '@opentrons/api-client'
@@ -141,14 +141,14 @@ const MOCK_PROTOCOL_ANALYSIS = {
   ],
 }
 
-const render = (props: React.ComponentProps<typeof Deck>) => {
+const render = (props: ComponentProps<typeof Deck>) => {
   return renderWithProviders(<Deck {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Deck', () => {
-  let props: React.ComponentProps<typeof Deck>
+  let props: ComponentProps<typeof Deck>
   beforeEach(() => {
     props = {
       transferId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/QuickTransferDetails/__tests__/Hardware.test.tsx b/app/src/pages/ODD/QuickTransferDetails/__tests__/Hardware.test.tsx
index 2b4af1a5178..a5f707fdf85 100644
--- a/app/src/pages/ODD/QuickTransferDetails/__tests__/Hardware.test.tsx
+++ b/app/src/pages/ODD/QuickTransferDetails/__tests__/Hardware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -12,20 +11,22 @@ import { i18n } from '/app/i18n'
 import { useRequiredProtocolHardware } from '/app/resources/protocols'
 import { Hardware } from '../Hardware'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/transformations/commands')
 vi.mock('/app/resources/protocols')
 vi.mock('/app/redux/config')
 
 const MOCK_PROTOCOL_ID = 'mock_protocol_id'
 
-const render = (props: React.ComponentProps<typeof Hardware>) => {
+const render = (props: ComponentProps<typeof Hardware>) => {
   return renderWithProviders(<Hardware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Hardware', () => {
-  let props: React.ComponentProps<typeof Hardware>
+  let props: ComponentProps<typeof Hardware>
   beforeEach(() => {
     props = {
       transferId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/QuickTransferDetails/__tests__/Labware.test.tsx b/app/src/pages/ODD/QuickTransferDetails/__tests__/Labware.test.tsx
index 7dd49d4f279..09f09f73718 100644
--- a/app/src/pages/ODD/QuickTransferDetails/__tests__/Labware.test.tsx
+++ b/app/src/pages/ODD/QuickTransferDetails/__tests__/Labware.test.tsx
@@ -1,32 +1,31 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
-import { renderWithProviders } from '/app/__testing-utils__'
-import { i18n } from '/app/i18n'
-import { useRequiredProtocolLabware } from '/app/resources/protocols'
-import { Labware } from '../Labware'
-
+import { screen } from '@testing-library/react'
 import {
   fixtureTiprack10ul,
   fixtureTiprack300ul,
   fixture96Plate,
 } from '@opentrons/shared-data'
+import { renderWithProviders } from '/app/__testing-utils__'
+import { i18n } from '/app/i18n'
+import { useRequiredProtocolLabware } from '/app/resources/protocols'
+import { Labware } from '../Labware'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import { screen } from '@testing-library/react'
 
 vi.mock('/app/resources/protocols')
 
 const MOCK_PROTOCOL_ID = 'mock_protocol_id'
 
-const render = (props: React.ComponentProps<typeof Labware>) => {
+const render = (props: ComponentProps<typeof Labware>) => {
   return renderWithProviders(<Labware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Labware', () => {
-  let props: React.ComponentProps<typeof Labware>
+  let props: ComponentProps<typeof Labware>
   beforeEach(() => {
     props = {
       transferId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/RobotDashboard/__tests__/WelcomeModal.test.tsx b/app/src/pages/ODD/RobotDashboard/__tests__/WelcomeModal.test.tsx
index 7fc9bf46ea2..8258f29f281 100644
--- a/app/src/pages/ODD/RobotDashboard/__tests__/WelcomeModal.test.tsx
+++ b/app/src/pages/ODD/RobotDashboard/__tests__/WelcomeModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -9,6 +8,7 @@ import { i18n } from '/app/i18n'
 import { updateConfigValue } from '/app/redux/config'
 import { WelcomeModal } from '../WelcomeModal'
 
+import type { ComponentProps } from 'react'
 import type { SetStatusBarCreateCommand } from '@opentrons/shared-data'
 
 vi.mock('/app/redux/config')
@@ -17,14 +17,14 @@ vi.mock('@opentrons/react-api-client')
 const mockFunc = vi.fn()
 const WELCOME_MODAL_IMAGE_NAME = 'welcome_dashboard_modal.png'
 
-const render = (props: React.ComponentProps<typeof WelcomeModal>) => {
+const render = (props: ComponentProps<typeof WelcomeModal>) => {
   return renderWithProviders(<WelcomeModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WelcomeModal', () => {
-  let props: React.ComponentProps<typeof WelcomeModal>
+  let props: ComponentProps<typeof WelcomeModal>
   let mockCreateLiveCommand = vi.fn()
 
   beforeEach(() => {
diff --git a/app/src/redux-resources/analytics/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx b/app/src/redux-resources/analytics/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx
index b99b66c8816..1f0501e0c96 100644
--- a/app/src/redux-resources/analytics/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx
+++ b/app/src/redux-resources/analytics/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { renderHook, waitFor } from '@testing-library/react'
@@ -14,6 +13,8 @@ import { useStoredProtocolAnalysis } from '/app/resources/analysis'
 import { useProtocolMetadata } from '/app/resources/protocols'
 import { formatInterval } from '/app/transformations/commands'
 import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/analytics/hash')
@@ -23,7 +24,7 @@ vi.mock('/app/resources/analysis')
 vi.mock('/app/resources/runs')
 vi.mock('/app/transformations/commands')
 
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 let store: Store<any> = createStore(vi.fn(), {})
 
 const RUN_ID = '1'
diff --git a/app/src/redux-resources/analytics/hooks/__tests__/useRobotAnalyticsData.test.tsx b/app/src/redux-resources/analytics/hooks/__tests__/useRobotAnalyticsData.test.tsx
index a781d71c495..bdb7407f843 100644
--- a/app/src/redux-resources/analytics/hooks/__tests__/useRobotAnalyticsData.test.tsx
+++ b/app/src/redux-resources/analytics/hooks/__tests__/useRobotAnalyticsData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { renderHook } from '@testing-library/react'
@@ -18,6 +17,7 @@ import {
   getRobotSerialNumber,
 } from '/app/redux/discovery'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 import type { AttachedPipettesByMount } from '/app/redux/pipettes/types'
@@ -41,7 +41,7 @@ const ATTACHED_PIPETTES = {
 }
 const ROBOT_SERIAL_NUMBER = 'OT123'
 
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 let store: Store<any> = createStore(vi.fn(), {})
 
 describe('useRobotAnalyticsData hook', () => {
diff --git a/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx b/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx
index c12bcd5dbeb..b387efa58fd 100644
--- a/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx
+++ b/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -16,6 +15,7 @@ import { getAppLanguage } from '/app/redux/config'
 import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
 import { useRobot } from '/app/redux-resources/robots'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { Mock } from 'vitest'
 
@@ -33,7 +33,7 @@ const PROTOCOL_PROPERTIES = { protocolType: 'python' }
 
 let mockTrackEvent: Mock
 let mockGetProtocolRunAnalyticsData: Mock
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 let store: Store<any> = createStore(vi.fn(), {})
 
 describe('useTrackProtocolRunEvent hook', () => {
diff --git a/app/src/redux-resources/config/__tests__/useIsUnboxingFlowOngoing.test.tsx b/app/src/redux-resources/config/__tests__/useIsUnboxingFlowOngoing.test.tsx
index d7610096015..cc65ca15100 100644
--- a/app/src/redux-resources/config/__tests__/useIsUnboxingFlowOngoing.test.tsx
+++ b/app/src/redux-resources/config/__tests__/useIsUnboxingFlowOngoing.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { renderHook } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { Provider } from 'react-redux'
@@ -7,6 +6,7 @@ import { createStore } from 'redux'
 import { getIsOnDevice, getOnDeviceDisplaySettings } from '/app/redux/config'
 import { useIsUnboxingFlowOngoing } from '../useIsUnboxingFlowOngoing'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -22,7 +22,7 @@ const mockDisplaySettings = {
 }
 
 describe('useIsUnboxingFlowOngoing', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     wrapper = ({ children }) => <Provider store={store}>{children}</Provider>
     vi.mocked(getOnDeviceDisplaySettings).mockReturnValue(mockDisplaySettings)
diff --git a/app/src/redux-resources/robots/hooks/__tests__/useIsFlex.test.tsx b/app/src/redux-resources/robots/hooks/__tests__/useIsFlex.test.tsx
index acb68840dfe..19ca25dff24 100644
--- a/app/src/redux-resources/robots/hooks/__tests__/useIsFlex.test.tsx
+++ b/app/src/redux-resources/robots/hooks/__tests__/useIsFlex.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { Provider } from 'react-redux'
@@ -9,6 +8,8 @@ import { QueryClient, QueryClientProvider } from 'react-query'
 import { getRobotModelByName } from '/app/redux/discovery'
 
 import { useIsFlex } from '..'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/discovery/selectors')
@@ -16,7 +17,7 @@ vi.mock('/app/redux/discovery/selectors')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useIsFlex hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/redux-resources/robots/hooks/__tests__/useIsRobotViewable.test.tsx b/app/src/redux-resources/robots/hooks/__tests__/useIsRobotViewable.test.tsx
index 8b659d25656..38e908b8452 100644
--- a/app/src/redux-resources/robots/hooks/__tests__/useIsRobotViewable.test.tsx
+++ b/app/src/redux-resources/robots/hooks/__tests__/useIsRobotViewable.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { Provider } from 'react-redux'
@@ -13,6 +12,8 @@ import {
   mockUnreachableRobot,
 } from '/app/redux/discovery/__fixtures__'
 import { useIsRobotViewable } from '../useIsRobotViewable'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/discovery')
@@ -20,7 +21,7 @@ vi.mock('/app/redux/discovery')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useIsRobotViewable hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/redux-resources/robots/hooks/__tests__/useRobot.test.tsx b/app/src/redux-resources/robots/hooks/__tests__/useRobot.test.tsx
index df7e05347dd..f99452c7994 100644
--- a/app/src/redux-resources/robots/hooks/__tests__/useRobot.test.tsx
+++ b/app/src/redux-resources/robots/hooks/__tests__/useRobot.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { Provider } from 'react-redux'
@@ -11,6 +10,7 @@ import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
 
 import { useRobot } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/discovery')
@@ -18,7 +18,7 @@ vi.mock('/app/redux/discovery')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useRobot hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/redux/robot-update/__tests__/hooks.test.tsx b/app/src/redux/robot-update/__tests__/hooks.test.tsx
index 7528bf290bc..bf9cee3afbc 100644
--- a/app/src/redux/robot-update/__tests__/hooks.test.tsx
+++ b/app/src/redux/robot-update/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { createStore } from 'redux'
 import { renderHook } from '@testing-library/react'
@@ -9,11 +8,12 @@ import { i18n } from '/app/i18n'
 import { useDispatchStartRobotUpdate } from '../hooks'
 import { startRobotUpdate, clearRobotUpdateSession } from '../actions'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '../../types'
 
 describe('useDispatchStartRobotUpdate', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let store: Store<State>
   const mockRobotName = 'robotName'
   const mockSystemFile = 'systemFile'
diff --git a/app/src/resources/analysis/hooks/__tests__/useStoredProtocolAnalysis.test.tsx b/app/src/resources/analysis/hooks/__tests__/useStoredProtocolAnalysis.test.tsx
index 2437ed6e1a7..8bebe10c0e7 100644
--- a/app/src/resources/analysis/hooks/__tests__/useStoredProtocolAnalysis.test.tsx
+++ b/app/src/resources/analysis/hooks/__tests__/useStoredProtocolAnalysis.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -25,6 +24,7 @@ import {
 } from '../__fixtures__/storedProtocolAnalysis'
 import { useNotifyRunQuery } from '/app/resources/runs'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { UseQueryResult } from 'react-query'
 import type { Protocol, Run } from '@opentrons/api-client'
@@ -63,7 +63,7 @@ const PROTOCOL_ID = 'the_protocol_id'
 const PROTOCOL_KEY = 'the_protocol_key'
 
 describe('useStoredProtocolAnalysis hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/resources/calibration/__tests__/useDeckCalibrationStatus.test.tsx b/app/src/resources/calibration/__tests__/useDeckCalibrationStatus.test.tsx
index 768c4152ff2..3cf71852f01 100644
--- a/app/src/resources/calibration/__tests__/useDeckCalibrationStatus.test.tsx
+++ b/app/src/resources/calibration/__tests__/useDeckCalibrationStatus.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { Provider } from 'react-redux'
@@ -12,6 +11,8 @@ import { getDiscoverableRobotByName } from '/app/redux/discovery'
 
 import { useDeckCalibrationStatus } from '..'
 import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('@opentrons/react-api-client')
@@ -21,7 +22,7 @@ vi.mock('/app/redux/discovery')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useDeckCalibrationStatus hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/resources/devices/hooks/__tests__/useLights.test.tsx b/app/src/resources/devices/hooks/__tests__/useLights.test.tsx
index 7485a61f757..e190902f24b 100644
--- a/app/src/resources/devices/hooks/__tests__/useLights.test.tsx
+++ b/app/src/resources/devices/hooks/__tests__/useLights.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
@@ -11,6 +10,7 @@ import {
 
 import { useLights } from '../useLights'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { Mock } from 'vitest'
 
@@ -19,7 +19,7 @@ vi.mock('@opentrons/react-api-client')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useLights hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let setLights: Mock
 
   beforeEach(() => {
diff --git a/app/src/resources/instruments/__tests__/useAttachedPipetteCalibrations.test.tsx b/app/src/resources/instruments/__tests__/useAttachedPipetteCalibrations.test.tsx
index ef5309a52d5..02316923bd3 100644
--- a/app/src/resources/instruments/__tests__/useAttachedPipetteCalibrations.test.tsx
+++ b/app/src/resources/instruments/__tests__/useAttachedPipetteCalibrations.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { vi, it, expect, describe, beforeEach } from 'vitest'
 import { Provider } from 'react-redux'
@@ -21,6 +20,8 @@ import {
 } from '/app/redux/calibration/tip-length/__fixtures__'
 
 import { useAttachedPipetteCalibrations } from '..'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -43,7 +44,7 @@ const PIPETTE_CALIBRATIONS = {
 }
 
 describe('useAttachedPipetteCalibrations hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/resources/instruments/__tests__/useAttachedPipettes.test.tsx b/app/src/resources/instruments/__tests__/useAttachedPipettes.test.tsx
index 35dbd023839..30f9922a1a7 100644
--- a/app/src/resources/instruments/__tests__/useAttachedPipettes.test.tsx
+++ b/app/src/resources/instruments/__tests__/useAttachedPipettes.test.tsx
@@ -8,7 +8,8 @@ import {
   pipetteResponseFixtureLeft,
   pipetteResponseFixtureRight,
 } from '@opentrons/api-client'
-import type * as React from 'react'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { FetchPipettesResponseBody } from '@opentrons/api-client'
 import type { PipetteModelSpecs } from '@opentrons/shared-data'
@@ -17,7 +18,7 @@ vi.mock('@opentrons/react-api-client')
 vi.mock('@opentrons/shared-data')
 
 describe('useAttachedPipettes hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     vi.mocked(getPipetteModelSpecs).mockReturnValue({
       name: 'mockName',
diff --git a/app/src/resources/instruments/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts b/app/src/resources/instruments/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts
index a0ae4757582..cc2bdbdc081 100644
--- a/app/src/resources/instruments/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts
+++ b/app/src/resources/instruments/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts
@@ -7,7 +7,7 @@ import {
 } from '@opentrons/api-client'
 import { useIsOEMMode } from '/app/resources/robot-settings/hooks'
 import { useAttachedPipettesFromInstrumentsQuery } from '..'
-import type * as React from 'react'
+import type { FunctionComponent, ReactNode } from 'react'
 
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/robot-settings/hooks')
@@ -17,7 +17,7 @@ describe('useAttachedPipettesFromInstrumentsQuery hook', () => {
     vi.mocked(useIsOEMMode).mockReturnValue(false)
   })
 
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   it('returns attached pipettes', () => {
     vi.mocked(useInstrumentsQuery).mockReturnValue({
       data: {
diff --git a/app/src/resources/modules/hooks/__tests__/useAttachedModules.test.tsx b/app/src/resources/modules/hooks/__tests__/useAttachedModules.test.tsx
index 49fba0eeaa0..6eec9e0996f 100644
--- a/app/src/resources/modules/hooks/__tests__/useAttachedModules.test.tsx
+++ b/app/src/resources/modules/hooks/__tests__/useAttachedModules.test.tsx
@@ -4,13 +4,14 @@ import { mockModulesResponse } from '@opentrons/api-client'
 import { useModulesQuery } from '@opentrons/react-api-client'
 import { useAttachedModules } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { Modules } from '@opentrons/api-client'
 
 vi.mock('@opentrons/react-api-client')
 
 describe('useAttachedModules hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
 
   it('returns attached modules', () => {
     vi.mocked(useModulesQuery).mockReturnValue({
diff --git a/app/src/resources/networking/hooks/__tests__/useCanDisconnect.test.tsx b/app/src/resources/networking/hooks/__tests__/useCanDisconnect.test.tsx
index 3985dc36ca8..d8788bf7ee1 100644
--- a/app/src/resources/networking/hooks/__tests__/useCanDisconnect.test.tsx
+++ b/app/src/resources/networking/hooks/__tests__/useCanDisconnect.test.tsx
@@ -1,18 +1,18 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
-import { SECURITY_WPA_EAP } from '@opentrons/api-client'
 import { renderHook } from '@testing-library/react'
+import { SECURITY_WPA_EAP } from '@opentrons/api-client'
 import { getRobotApiVersionByName } from '/app/redux/discovery'
 
 import { useIsFlex } from '/app/redux-resources/robots'
 import { useCanDisconnect } from '../useCanDisconnect'
 import { useWifiList } from '../useWifiList'
 
-import type { WifiNetwork } from '@opentrons/api-client'
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
+import type { WifiNetwork } from '@opentrons/api-client'
 import type { State } from '/app/redux/types'
 
 vi.mock('../useWifiList')
@@ -21,9 +21,9 @@ vi.mock('/app/redux/discovery')
 
 const store: Store<State> = createStore(state => state, {})
 
-const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
-  children,
-}) => <Provider store={store}>{children}</Provider>
+const wrapper: FunctionComponent<{ children: ReactNode }> = ({ children }) => (
+  <Provider store={store}>{children}</Provider>
+)
 
 const mockWifiNetwork: WifiNetwork = {
   ssid: 'linksys',
diff --git a/app/src/resources/networking/hooks/__tests__/useNetworkConnection.test.tsx b/app/src/resources/networking/hooks/__tests__/useNetworkConnection.test.tsx
index 2c0e6257e42..9335c7eafea 100644
--- a/app/src/resources/networking/hooks/__tests__/useNetworkConnection.test.tsx
+++ b/app/src/resources/networking/hooks/__tests__/useNetworkConnection.test.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { when } from 'vitest-when'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { Provider } from 'react-redux'
@@ -14,6 +12,8 @@ import * as Fixtures from '/app/redux/networking/__fixtures__'
 import { getNetworkInterfaces } from '/app/redux/networking'
 
 import { useNetworkConnection } from '../useNetworkConnection'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/networking/selectors')
@@ -48,7 +48,7 @@ const store: Store<any> = createStore(vi.fn(), {})
 
 // ToDo (kj:0202/2023) USB test cases will be added when USB is out
 describe('useNetworkConnection', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
 
   beforeEach(() => {
     wrapper = ({ children }) => (
diff --git a/app/src/resources/protocols/hooks/__tests__/useProtocolMetadata.test.tsx b/app/src/resources/protocols/hooks/__tests__/useProtocolMetadata.test.tsx
index 48ced67d25f..bea57c80284 100644
--- a/app/src/resources/protocols/hooks/__tests__/useProtocolMetadata.test.tsx
+++ b/app/src/resources/protocols/hooks/__tests__/useProtocolMetadata.test.tsx
@@ -1,5 +1,4 @@
 // tests for the HostConfig context and hook
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { Provider } from 'react-redux'
@@ -8,6 +7,7 @@ import { renderHook } from '@testing-library/react'
 import { useCurrentProtocol } from '../useCurrentProtocol'
 import { useProtocolMetadata } from '../useProtocolMetadata'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -39,7 +39,7 @@ describe('useProtocolMetadata', () => {
   })
 
   it('should return author, lastUpdated, method, description, and robot type', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(useProtocolMetadata, { wrapper })
diff --git a/app/src/resources/runs/__tests__/useCloneRun.test.tsx b/app/src/resources/runs/__tests__/useCloneRun.test.tsx
index 9323bbf8073..cf9de675f67 100644
--- a/app/src/resources/runs/__tests__/useCloneRun.test.tsx
+++ b/app/src/resources/runs/__tests__/useCloneRun.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { renderHook } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -13,6 +12,7 @@ import {
 import { useCloneRun } from '../useCloneRun'
 import { useNotifyRunQuery } from '../useNotifyRunQuery'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { HostConfig } from '@opentrons/api-client'
 
 vi.mock('@opentrons/react-api-client')
@@ -23,7 +23,7 @@ const RUN_ID_NO_RTP: string = 'run_id_no_rtp'
 const RUN_ID_RTP: string = 'run_id_rtp'
 
 describe('useCloneRun hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
 
   beforeEach(() => {
     when(vi.mocked(useHost)).calledWith().thenReturn(HOST_CONFIG)
@@ -90,8 +90,8 @@ describe('useCloneRun hook', () => {
     } as any)
 
     const queryClient = new QueryClient()
-    const clientProvider: React.FunctionComponent<{
-      children: React.ReactNode
+    const clientProvider: FunctionComponent<{
+      children: ReactNode
     }> = ({ children }) => (
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     )
diff --git a/app/src/resources/runs/__tests__/useLPCDisabledReason.test.tsx b/app/src/resources/runs/__tests__/useLPCDisabledReason.test.tsx
index 0be19bc19d3..349804ac58b 100644
--- a/app/src/resources/runs/__tests__/useLPCDisabledReason.test.tsx
+++ b/app/src/resources/runs/__tests__/useLPCDisabledReason.test.tsx
@@ -1,13 +1,14 @@
-import type * as React from 'react'
 import { renderHook } from '@testing-library/react'
 import { Provider } from 'react-redux'
 import { I18nextProvider } from 'react-i18next'
 import { createStore } from 'redux'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
+
 import {
   getLoadedLabwareDefinitionsByUri,
   simple_v6 as _uncastedSimpleV6Protocol,
 } from '@opentrons/shared-data'
+
 import { i18n } from '/app/i18n'
 import { RUN_ID_1 } from '..//__fixtures__'
 import { useStoredProtocolAnalysis } from '/app/resources/analysis'
@@ -17,6 +18,7 @@ import { useRunCalibrationStatus } from '../useRunCalibrationStatus'
 import { useMostRecentCompletedAnalysis } from '../useMostRecentCompletedAnalysis'
 import { useRunHasStarted } from '../useRunHasStarted'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type * as SharedData from '@opentrons/shared-data'
 import type { State } from '/app/redux/types'
@@ -38,7 +40,7 @@ const simpleV6Protocol = (_uncastedSimpleV6Protocol as unknown) as SharedData.Pr
 
 describe('useLPCDisabledReason', () => {
   const store: Store<State> = createStore(vi.fn(), {})
-  const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+  const wrapper: FunctionComponent<{ children: ReactNode }> = ({
     children,
   }) => (
     <I18nextProvider i18n={i18n}>
diff --git a/app/src/resources/runs/__tests__/useModuleCalibrationStatus.test.tsx b/app/src/resources/runs/__tests__/useModuleCalibrationStatus.test.tsx
index 5691230dbaf..fef1217b173 100644
--- a/app/src/resources/runs/__tests__/useModuleCalibrationStatus.test.tsx
+++ b/app/src/resources/runs/__tests__/useModuleCalibrationStatus.test.tsx
@@ -1,4 +1,5 @@
-import type * as React from 'react'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { renderHook } from '@testing-library/react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
@@ -10,15 +11,13 @@ import { useIsFlex } from '/app/redux-resources/robots'
 
 import { mockMagneticModuleGen2 } from '/app/redux/modules/__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { ModuleModel, ModuleType } from '@opentrons/shared-data'
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-
 vi.mock('/app/redux-resources/robots')
 vi.mock('../useModuleRenderInfoForProtocolById')
 
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 
 const mockMagneticModuleDefinition = {
   moduleId: 'someMagneticModule',
diff --git a/app/src/resources/runs/__tests__/useRunCalibrationStatus.test.tsx b/app/src/resources/runs/__tests__/useRunCalibrationStatus.test.tsx
index d0a81ff3e50..a93a3fe5d7a 100644
--- a/app/src/resources/runs/__tests__/useRunCalibrationStatus.test.tsx
+++ b/app/src/resources/runs/__tests__/useRunCalibrationStatus.test.tsx
@@ -1,10 +1,11 @@
-import type * as React from 'react'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { renderHook } from '@testing-library/react'
 import { vi, it, expect, describe, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
-import { mockTipRackDefinition } from '/app/redux/custom-labware/__fixtures__'
 
+import { mockTipRackDefinition } from '/app/redux/custom-labware/__fixtures__'
 import {
   useRunCalibrationStatus,
   useRunPipetteInfoByMount,
@@ -13,9 +14,8 @@ import {
 import { useDeckCalibrationStatus } from '/app/resources/calibration'
 import { useIsFlex } from '/app/redux-resources/robots'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { PipetteInfo } from '/app/redux/pipettes'
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
 
 vi.mock('../useRunPipetteInfoByMount')
 vi.mock('../useNotifyRunQuery')
@@ -23,7 +23,7 @@ vi.mock('/app/resources/calibration')
 vi.mock('/app/resources/analysis')
 vi.mock('/app/redux-resources/robots')
 
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 
 describe('useRunCalibrationStatus hook', () => {
   beforeEach(() => {
diff --git a/app/src/resources/runs/utils.ts b/app/src/resources/runs/utils.ts
index d9b6781f4b2..1ab7c205158 100644
--- a/app/src/resources/runs/utils.ts
+++ b/app/src/resources/runs/utils.ts
@@ -1,6 +1,6 @@
 import { format } from 'date-fns'
 
-import type * as React from 'react'
+import type { Dispatch, SetStateAction } from 'react'
 import type { UseMutateAsyncFunction } from 'react-query'
 import type { CommandData } from '@opentrons/api-client'
 import type { CreateCommand } from '@opentrons/shared-data'
@@ -11,7 +11,7 @@ export const chainRunCommandsRecursive = (
   commands: CreateCommand[],
   createRunCommand: CreateRunCommand,
   continuePastCommandFailure: boolean = true,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setIsLoading: Dispatch<SetStateAction<boolean>>
 ): Promise<CommandData[]> => {
   if (commands.length < 1) {
     return Promise.reject(new Error('no commands to execute'))
@@ -57,7 +57,7 @@ export const chainLiveCommandsRecursive = (
     CreateLiveCommandMutateParams
   >,
   continuePastCommandFailure: boolean = true,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setIsLoading: Dispatch<SetStateAction<boolean>>
 ): Promise<CommandData[]> => {
   if (commands.length < 1) {
     return Promise.reject(new Error('no commands to execute'))
@@ -100,7 +100,7 @@ export const chainMaintenanceCommandsRecursive = (
   commands: CreateCommand[],
   createMaintenanceCommand: CreateMaintenanceCommand,
   continuePastCommandFailure: boolean = true,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setIsLoading: Dispatch<SetStateAction<boolean>>
 ): Promise<CommandData[]> => {
   if (commands.length < 1) {
     return Promise.reject(new Error('no commands to execute'))
diff --git a/app/src/transformations/commands/hooks/__tests__/useMissingProtocolHardware.test.tsx b/app/src/transformations/commands/hooks/__tests__/useMissingProtocolHardware.test.tsx
index 99ce33a9de3..54fd39d607f 100644
--- a/app/src/transformations/commands/hooks/__tests__/useMissingProtocolHardware.test.tsx
+++ b/app/src/transformations/commands/hooks/__tests__/useMissingProtocolHardware.test.tsx
@@ -1,8 +1,7 @@
 import omitBy from 'lodash/omitBy'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
-import type { UseQueryResult } from 'react-query'
 import { renderHook } from '@testing-library/react'
-import type { Protocol } from '@opentrons/api-client'
+
 import {
   useProtocolQuery,
   useProtocolAnalysisAsDocumentQuery,
@@ -14,14 +13,19 @@ import {
   WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE,
   fixtureTiprack300ul,
 } from '@opentrons/shared-data'
+
+import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration/useNotifyDeckConfigurationQuery'
+import { useMissingProtocolHardware } from '../useMissingProtocolHardware'
+import { mockHeaterShaker } from '/app/redux/modules/__fixtures__'
+
+import type { FunctionComponent, ReactNode } from 'react'
+import type { UseQueryResult } from 'react-query'
+import type { Protocol } from '@opentrons/api-client'
 import type {
   CompletedProtocolAnalysis,
   DeckConfiguration,
   LabwareDefinition2,
 } from '@opentrons/shared-data'
-import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration/useNotifyDeckConfigurationQuery'
-import { useMissingProtocolHardware } from '../useMissingProtocolHardware'
-import { mockHeaterShaker } from '/app/redux/modules/__fixtures__'
 
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/deck_configuration/useNotifyDeckConfigurationQuery')
@@ -161,7 +165,7 @@ const PROTOCOL_ANALYSIS = {
   runTimeParameters: mockRTPData,
 } as any
 describe.only('useMissingProtocolHardware', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     vi.mocked(useInstrumentsQuery).mockReturnValue({
       data: { data: [] },
diff --git a/protocol-designer/src/__testing-utils__/renderWithProviders.tsx b/protocol-designer/src/__testing-utils__/renderWithProviders.tsx
index 11e3ba16d9b..4c3115281f5 100644
--- a/protocol-designer/src/__testing-utils__/renderWithProviders.tsx
+++ b/protocol-designer/src/__testing-utils__/renderWithProviders.tsx
@@ -1,6 +1,5 @@
 // render using targetted component using @testing-library/react
 // with wrapping providers for i18next and redux
-import type * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
@@ -8,16 +7,22 @@ import { vi } from 'vitest'
 import { render } from '@testing-library/react'
 import { createStore } from 'redux'
 
+import type {
+  ComponentProps,
+  ComponentType,
+  PropsWithChildren,
+  ReactElement,
+} from 'react'
 import type { PreloadedState, Store } from 'redux'
 import type { RenderOptions, RenderResult } from '@testing-library/react'
 
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
   initialState?: State
-  i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n']
+  i18nInstance: ComponentProps<typeof I18nextProvider>['i18n']
 }
 
 export function renderWithProviders<State>(
-  Component: React.ReactElement,
+  Component: ReactElement,
   options?: RenderWithProvidersOptions<State>
 ): [RenderResult, Store<State>] {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -32,7 +37,7 @@ export function renderWithProviders<State>(
 
   const queryClient = new QueryClient()
 
-  const ProviderWrapper: React.ComponentType<React.PropsWithChildren<{}>> = ({
+  const ProviderWrapper: ComponentType<PropsWithChildren<{}>> = ({
     children,
   }) => {
     const BaseWrapper = (
diff --git a/protocol-designer/src/atoms/ToggleButton/index.tsx b/protocol-designer/src/atoms/ToggleButton/index.tsx
index 0dfb605ec7b..732430b9d4e 100644
--- a/protocol-designer/src/atoms/ToggleButton/index.tsx
+++ b/protocol-designer/src/atoms/ToggleButton/index.tsx
@@ -1,8 +1,8 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import { Btn, Icon, COLORS, Flex } from '@opentrons/components'
 
+import type { MouseEvent } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 const TOGGLE_DISABLED_STYLES = css`
@@ -42,7 +42,7 @@ interface ToggleButtonProps extends StyleProps {
   label?: string | null
   disabled?: boolean | null
   id?: string
-  onClick?: (e: React.MouseEvent) => void
+  onClick?: (e: MouseEvent) => void
 }
 
 export function ToggleButton(props: ToggleButtonProps): JSX.Element {
diff --git a/protocol-designer/src/labware-defs/actions.ts b/protocol-designer/src/labware-defs/actions.ts
index 20959a37b5d..5a6526d7956 100644
--- a/protocol-designer/src/labware-defs/actions.ts
+++ b/protocol-designer/src/labware-defs/actions.ts
@@ -11,6 +11,8 @@ import {
 } from '@opentrons/shared-data'
 import { getAllWellSetsForLabware } from '../utils'
 import * as labwareDefSelectors from './selectors'
+
+import type { SyntheticEvent } from 'react'
 import type { ThunkAction } from '../types'
 import type { LabwareUploadMessage } from './types'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
@@ -89,7 +91,7 @@ const getIsOverwriteMismatched = (
 const _createCustomLabwareDef: (
   onlyTiprack: boolean
 ) => (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ) => ThunkAction<any> = onlyTiprack => event => (dispatch, getState) => {
   const customLabwareDefs = values(
     labwareDefSelectors.getCustomLabwareDefsByURI(getState())
@@ -242,11 +244,11 @@ const _createCustomLabwareDef: (
 }
 
 export const createCustomLabwareDef: (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ) => ThunkAction<any> = _createCustomLabwareDef(false)
 
 export const createCustomTiprackDef: (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ) => ThunkAction<any> = _createCustomLabwareDef(true)
 
 interface DismissLabwareUploadMessage {
diff --git a/protocol-designer/src/load-file/actions.ts b/protocol-designer/src/load-file/actions.ts
index a698696c525..a42a998edc2 100644
--- a/protocol-designer/src/load-file/actions.ts
+++ b/protocol-designer/src/load-file/actions.ts
@@ -1,6 +1,8 @@
 import { migration } from './migration'
 import { selectors as fileDataSelectors } from '../file-data'
 import { saveFile } from './utils'
+
+import type { SyntheticEvent } from 'react'
 import type { PDProtocolFile } from '../file-types'
 import type { GetState, ThunkAction, ThunkDispatch } from '../types'
 import type {
@@ -32,7 +34,7 @@ export const loadFileAction = (payload: PDProtocolFile): LoadFileAction => ({
 })
 // load file thunk, handles file loading errors
 export const loadProtocolFile = (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ): ThunkAction<any> => (dispatch: ThunkDispatch<any>, getState: GetState) => {
   const fileError = (
     errorType: FileUploadErrorType,
diff --git a/protocol-designer/src/molecules/CheckboxExpandStepFormField/index.tsx b/protocol-designer/src/molecules/CheckboxExpandStepFormField/index.tsx
index 5c4d749d228..7b58de44ae0 100644
--- a/protocol-designer/src/molecules/CheckboxExpandStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/CheckboxExpandStepFormField/index.tsx
@@ -13,12 +13,14 @@ import {
   useHoverTooltip,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface CheckboxExpandStepFormFieldProps {
   title: string
   checkboxUpdateValue: (value: unknown) => void
   checkboxValue: unknown
   isChecked: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   tooltipText?: string | null
   disabled?: boolean
 }
diff --git a/protocol-designer/src/molecules/CheckboxStepFormField/index.tsx b/protocol-designer/src/molecules/CheckboxStepFormField/index.tsx
index bb6d1748418..3ee5c057b7e 100644
--- a/protocol-designer/src/molecules/CheckboxStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/CheckboxStepFormField/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   Checkbox,
   Flex,
@@ -7,13 +6,15 @@ import {
   Tooltip,
   useHoverTooltip,
 } from '@opentrons/components'
+
+import type { ReactElement, ReactNode } from 'react'
 import type { Placement } from '@opentrons/components'
 import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
 
 type CheckboxStepFormFieldProps = FieldProps & {
-  children?: React.ReactElement
+  children?: ReactElement
   label?: string
-  tooltipContent?: React.ReactNode
+  tooltipContent?: ReactNode
   tooltipPlacement?: Placement
 }
 
diff --git a/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx b/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx
index 14110951a76..da88e015f64 100644
--- a/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx
+++ b/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -18,20 +17,22 @@ import {
   dismissTimelineWarning,
 } from '../../../dismiss/actions'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../dismiss/actions')
 vi.mock('../../../ui/steps')
 vi.mock('../../../top-selectors/timelineWarnings')
 vi.mock('../../../dismiss/selectors')
 vi.mock('../../../step-forms/selectors')
 
-const render = (props: React.ComponentProps<typeof FormAlerts>) => {
+const render = (props: ComponentProps<typeof FormAlerts>) => {
   return renderWithProviders(<FormAlerts {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FormAlerts', () => {
-  let props: React.ComponentProps<typeof FormAlerts>
+  let props: ComponentProps<typeof FormAlerts>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/Alerts/types.ts b/protocol-designer/src/organisms/Alerts/types.ts
index 0453688d667..c3396ad79d0 100644
--- a/protocol-designer/src/organisms/Alerts/types.ts
+++ b/protocol-designer/src/organisms/Alerts/types.ts
@@ -1,9 +1,11 @@
+import type { ReactNode } from 'react'
+
 export type AlertLevel = 'timeline' | 'form'
 type AlertType = 'error' | 'warning'
 
 interface AlertData {
   title: string
-  description: React.ReactNode
+  description: ReactNode
   dismissId?: string
 }
 
diff --git a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
index 269d78d5c05..841923adfec 100644
--- a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
+++ b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
@@ -32,6 +32,8 @@ import {
 import { deselectAllWells } from '../../well-selection/actions'
 import { DefineLiquidsModal } from '../DefineLiquidsModal'
 import { LiquidCard } from './LiquidCard'
+
+import type { ChangeEvent } from 'react'
 import type { DropdownOption } from '@opentrons/components'
 import type { ContentsByWell } from '../../labware-ingred/types'
 
@@ -131,9 +133,7 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
     }
   }
 
-  const handleChangeVolume: (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => void = e => {
+  const handleChangeVolume: (e: ChangeEvent<HTMLInputElement>) => void = e => {
     const value: string | null | undefined = e.currentTarget.value
     const masked = fieldProcessors.composeMaskers(
       fieldProcessors.maskToFloat,
diff --git a/protocol-designer/src/organisms/BlockingHintModal/useBlockingHint.tsx b/protocol-designer/src/organisms/BlockingHintModal/useBlockingHint.tsx
index 1f9548fc99b..e47341eaf46 100644
--- a/protocol-designer/src/organisms/BlockingHintModal/useBlockingHint.tsx
+++ b/protocol-designer/src/organisms/BlockingHintModal/useBlockingHint.tsx
@@ -1,6 +1,8 @@
 import { useSelector } from 'react-redux'
 import { getDismissedHints } from '../../tutorial/selectors'
 import { BlockingHintModal } from './index'
+
+import type { ReactNode } from 'react'
 import type { HintKey } from '../../tutorial'
 
 export interface HintProps {
@@ -9,7 +11,7 @@ export interface HintProps {
    * useBlockingHint expects the parent to disable the hint on cancel/continue */
   enabled: boolean
   hintKey: HintKey | null
-  content: React.ReactNode
+  content: ReactNode
   handleCancel: () => void
   handleContinue: () => void
 }
diff --git a/protocol-designer/src/organisms/ConfirmDeleteModal/index.tsx b/protocol-designer/src/organisms/ConfirmDeleteModal/index.tsx
index 89de28330b6..70a767706a7 100644
--- a/protocol-designer/src/organisms/ConfirmDeleteModal/index.tsx
+++ b/protocol-designer/src/organisms/ConfirmDeleteModal/index.tsx
@@ -12,7 +12,7 @@ import {
   StyledText,
 } from '@opentrons/components'
 import { getMainPagePortalEl } from '../Portal'
-import type * as React from 'react'
+import type { MouseEvent } from 'react'
 
 export const DELETE_PROFILE_CYCLE: 'deleteProfileCycle' = 'deleteProfileCycle'
 export const CLOSE_STEP_FORM_WITH_CHANGES: 'closeStepFormWithChanges' =
@@ -36,7 +36,7 @@ interface Props {
   modalType: DeleteModalType
   onCancelClick: () => unknown
   // TODO(sa, 2021-7-2): iron out this type, I think the weirdness comes from the return type of onConditionalConfirm
-  onContinueClick: ((event: React.MouseEvent) => unknown) | (() => unknown)
+  onContinueClick: ((event: MouseEvent) => unknown) | (() => unknown)
 }
 
 export function ConfirmDeleteModal(props: Props): JSX.Element {
diff --git a/protocol-designer/src/organisms/EditNickNameModal/__tests__/EditNickNameModal.test.tsx b/protocol-designer/src/organisms/EditNickNameModal/__tests__/EditNickNameModal.test.tsx
index 27b8f43b73c..aba82c9bf2c 100644
--- a/protocol-designer/src/organisms/EditNickNameModal/__tests__/EditNickNameModal.test.tsx
+++ b/protocol-designer/src/organisms/EditNickNameModal/__tests__/EditNickNameModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
@@ -7,17 +6,19 @@ import { EditNickNameModal } from '..'
 import { getLabwareNicknamesById } from '../../../ui/labware/selectors'
 import { renameLabware } from '../../../labware-ingred/actions'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../ui/labware/selectors')
 vi.mock('../../../labware-ingred/actions')
 
-const render = (props: React.ComponentProps<typeof EditNickNameModal>) => {
+const render = (props: ComponentProps<typeof EditNickNameModal>) => {
   return renderWithProviders(<EditNickNameModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EditNickNameModal', () => {
-  let props: React.ComponentProps<typeof EditNickNameModal>
+  let props: ComponentProps<typeof EditNickNameModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/EditProtocolMetadataModal/__tests__/EditProtocolMetadataModal.test.tsx b/protocol-designer/src/organisms/EditProtocolMetadataModal/__tests__/EditProtocolMetadataModal.test.tsx
index 3d4b8aace51..6eee963d099 100644
--- a/protocol-designer/src/organisms/EditProtocolMetadataModal/__tests__/EditProtocolMetadataModal.test.tsx
+++ b/protocol-designer/src/organisms/EditProtocolMetadataModal/__tests__/EditProtocolMetadataModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,18 +6,18 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { EditProtocolMetadataModal } from '..'
 import { selectors as fileSelectors } from '../../../file-data'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../file-data')
 
-const render = (
-  props: React.ComponentProps<typeof EditProtocolMetadataModal>
-) => {
+const render = (props: ComponentProps<typeof EditProtocolMetadataModal>) => {
   return renderWithProviders(<EditProtocolMetadataModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EditProtocolMetadataModal', () => {
-  let props: React.ComponentProps<typeof EditProtocolMetadataModal>
+  let props: ComponentProps<typeof EditProtocolMetadataModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/FileUploadMessagesModal/utils.tsx b/protocol-designer/src/organisms/FileUploadMessagesModal/utils.tsx
index 8b10662278f..72f0f9fa2c2 100644
--- a/protocol-designer/src/organisms/FileUploadMessagesModal/utils.tsx
+++ b/protocol-designer/src/organisms/FileUploadMessagesModal/utils.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import {
   COLORS,
@@ -8,11 +7,12 @@ import {
   StyledText,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
 import type { FileUploadMessage } from '../../load-file'
 
 export interface ModalContents {
   title: string
-  body: React.ReactNode
+  body: ReactNode
 }
 
 interface ModalProps {
diff --git a/protocol-designer/src/organisms/IncompatibleTipsModal/__tests__/IncompatibleTipsModal.test.tsx b/protocol-designer/src/organisms/IncompatibleTipsModal/__tests__/IncompatibleTipsModal.test.tsx
index 2a1a8cf7e4e..7cb887d706e 100644
--- a/protocol-designer/src/organisms/IncompatibleTipsModal/__tests__/IncompatibleTipsModal.test.tsx
+++ b/protocol-designer/src/organisms/IncompatibleTipsModal/__tests__/IncompatibleTipsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
@@ -6,16 +5,18 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { setFeatureFlags } from '../../../feature-flags/actions'
 import { IncompatibleTipsModal } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../feature-flags/actions')
 
-const render = (props: React.ComponentProps<typeof IncompatibleTipsModal>) => {
+const render = (props: ComponentProps<typeof IncompatibleTipsModal>) => {
   return renderWithProviders(<IncompatibleTipsModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('IncompatibleTipsModal', () => {
-  let props: React.ComponentProps<typeof IncompatibleTipsModal>
+  let props: ComponentProps<typeof IncompatibleTipsModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/Labware/SelectableLabware.tsx b/protocol-designer/src/organisms/Labware/SelectableLabware.tsx
index 25c904d7407..27c77f7e7cb 100644
--- a/protocol-designer/src/organisms/Labware/SelectableLabware.tsx
+++ b/protocol-designer/src/organisms/Labware/SelectableLabware.tsx
@@ -12,7 +12,7 @@ import { SingleLabware } from './SingleLabware'
 import { WellTooltip } from './WellTooltip'
 import { SelectionRect } from './SelectionRect'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type {
   WellMouseEvent,
   WellGroup,
@@ -25,10 +25,7 @@ import type { GenericRect } from '../../collision-types'
 import type { NozzleType } from '../../types'
 
 export interface SelectableLabwareProps {
-  labwareProps: Omit<
-    React.ComponentProps<typeof SingleLabware>,
-    'selectedWells'
-  >
+  labwareProps: Omit<ComponentProps<typeof SingleLabware>, 'selectedWells'>
   /** array of primary wells. Overrides labwareProps.selectedWells */
   selectedPrimaryWells: WellGroup
   selectWells: (wellGroup: WellGroup) => unknown
diff --git a/protocol-designer/src/organisms/Labware/SelectionRect.tsx b/protocol-designer/src/organisms/Labware/SelectionRect.tsx
index 73c7229c39e..97e834fdded 100644
--- a/protocol-designer/src/organisms/Labware/SelectionRect.tsx
+++ b/protocol-designer/src/organisms/Labware/SelectionRect.tsx
@@ -1,12 +1,14 @@
-import * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { css } from 'styled-components'
+
+import type { ReactNode, MouseEventHandler } from 'react'
 import type { DragRect, GenericRect } from '../../collision-types'
 
 interface SelectionRectProps {
   onSelectionMove?: (e: MouseEvent, arg: GenericRect) => void
   onSelectionDone?: (e: MouseEvent, arg: GenericRect) => void
   svg?: boolean // set true if this is an embedded SVG
-  children?: React.ReactNode
+  children?: ReactNode
   originXOffset?: number
   originYOffset?: number
 }
@@ -20,9 +22,9 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     originXOffset = 0,
     originYOffset = 0,
   } = props
-  const [positions, setPositions] = React.useState<DragRect | null>(null)
-  const parentRef = React.useRef<HTMLElement | SVGElement | null>(null)
-  const renderRect = (args: DragRect): React.ReactNode => {
+  const [positions, setPositions] = useState<DragRect | null>(null)
+  const parentRef = useRef<HTMLElement | SVGElement | null>(null)
+  const renderRect = (args: DragRect): ReactNode => {
     const { xStart, yStart, xDynamic, yDynamic } = args
     const left = Math.min(xStart, xDynamic)
     const top = Math.min(yStart, yDynamic)
@@ -117,7 +119,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     onSelectionDone && finalRect && onSelectionDone(e, finalRect)
   }
 
-  const handleMouseDown: React.MouseEventHandler = e => {
+  const handleMouseDown: MouseEventHandler = e => {
     setPositions({
       xStart: e.clientX,
       xDynamic: e.clientX,
@@ -126,7 +128,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     })
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener('mousemove', handleDrag)
     document.addEventListener('mouseup', handleMouseUp)
     return () => {
diff --git a/protocol-designer/src/organisms/Labware/SingleLabware.tsx b/protocol-designer/src/organisms/Labware/SingleLabware.tsx
index 1952fea3fc8..a0f7e5c4774 100644
--- a/protocol-designer/src/organisms/Labware/SingleLabware.tsx
+++ b/protocol-designer/src/organisms/Labware/SingleLabware.tsx
@@ -1,7 +1,7 @@
 import { LabwareRender, RobotWorkSpace } from '@opentrons/components'
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
-type Props = React.ComponentProps<typeof LabwareRender>
+type Props = ComponentProps<typeof LabwareRender>
 
 /** Avoid boilerplate for viewbox-based-on-labware-dimensions */
 export function SingleLabware(props: Props): JSX.Element {
diff --git a/protocol-designer/src/organisms/Labware/WellTooltip.tsx b/protocol-designer/src/organisms/Labware/WellTooltip.tsx
index 51e9236427e..0479aaf58fc 100644
--- a/protocol-designer/src/organisms/Labware/WellTooltip.tsx
+++ b/protocol-designer/src/organisms/Labware/WellTooltip.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment, useState } from 'react'
 import { useSelector } from 'react-redux'
 import map from 'lodash/map'
 import reduce from 'lodash/reduce'
@@ -9,6 +9,8 @@ import { getMainPagePortalEl } from '../../organisms'
 import { selectors } from '../../labware-ingred/selectors'
 import { formatVolume } from '../../pages/Designer/ProtocolSteps/Timeline/utils'
 import { swatchColors } from '../DefineLiquidsModal/swatchColors'
+
+import type { MouseEvent, ReactNode } from 'react'
 import type { LocationLiquidState } from '@opentrons/step-generation'
 import type { WellIngredientNames } from '../../steplist/types'
 
@@ -19,13 +21,13 @@ interface WellTooltipParams {
   makeHandleMouseEnterWell: (
     wellName: string,
     wellIngreds: LocationLiquidState
-  ) => (e: React.MouseEvent<any>) => void
+  ) => (e: MouseEvent<any>) => void
   handleMouseLeaveWell: (val: unknown) => void
   tooltipWellName?: string | null
 }
 
 interface WellTooltipProps {
-  children: (wellTooltipParams: WellTooltipParams) => React.ReactNode
+  children: (wellTooltipParams: WellTooltipParams) => ReactNode
   ingredNames: WellIngredientNames
 }
 
@@ -46,14 +48,12 @@ const initialTooltipState: State = {
 
 export const WellTooltip = (props: WellTooltipProps): JSX.Element => {
   const { children } = props
-  const [tooltipState, setTooltipState] = React.useState<State>(
-    initialTooltipState
-  )
+  const [tooltipState, setTooltipState] = useState<State>(initialTooltipState)
 
   const makeHandleMouseEnterWell: (
     wellName: string,
     wellIngreds: LocationLiquidState
-  ) => (e: React.MouseEvent) => void = (wellName, wellIngreds) => e => {
+  ) => (e: MouseEvent) => void = (wellName, wellIngreds) => e => {
     const { target } = e
     if (target instanceof Element) {
       const wellBoundingRect = target.getBoundingClientRect()
@@ -211,7 +211,7 @@ export const WellTooltip = (props: WellTooltipProps): JSX.Element => {
                       </tbody>
                     </table>
                     {hasMultipleIngreds && (
-                      <React.Fragment>
+                      <Fragment>
                         <div
                           css={css`
                             height: 1px;
@@ -229,7 +229,7 @@ export const WellTooltip = (props: WellTooltipProps): JSX.Element => {
                           <span>{`${tooltipWellName} Total Volume`}</span>
                           <span>{formatVolume(totalLiquidVolume, 2)}µl</span>
                         </div>
-                      </React.Fragment>
+                      </Fragment>
                     )}
                   </div>
                   <div
diff --git a/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx b/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx
index 26e2d0fb098..7ed8ecc9e33 100644
--- a/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx
+++ b/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -11,6 +10,7 @@ import { getRobotType } from '../../../file-data/selectors'
 import { getInitialDeckSetup } from '../../../step-forms/selectors'
 import { MaterialsListModal } from '..'
 
+import type { ComponentProps } from 'react'
 import type { InfoScreen } from '@opentrons/components'
 import type { LabwareOnDeck, ModuleOnDeck } from '../../../step-forms'
 import type { FixtureInList } from '..'
@@ -63,14 +63,14 @@ const mockLabware = [
   },
 ] as LabwareOnDeck[]
 
-const render = (props: React.ComponentProps<typeof MaterialsListModal>) => {
+const render = (props: ComponentProps<typeof MaterialsListModal>) => {
   return renderWithProviders(<MaterialsListModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('MaterialsListModal', () => {
-  let props: React.ComponentProps<typeof MaterialsListModal>
+  let props: ComponentProps<typeof MaterialsListModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/Navigation/index.tsx b/protocol-designer/src/organisms/Navigation/index.tsx
index 0f5b423ddc6..f1487fc6af1 100644
--- a/protocol-designer/src/organisms/Navigation/index.tsx
+++ b/protocol-designer/src/organisms/Navigation/index.tsx
@@ -18,6 +18,8 @@ import { actions as loadFileActions } from '../../load-file'
 import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getHasUnsavedChanges } from '../../load-file/selectors'
 import { SettingsIcon } from '../SettingsIcon'
+
+import type { ChangeEvent } from 'react'
 import type { ThunkDispatch } from '../../types'
 
 export function Navigation(): JSX.Element | null {
@@ -25,9 +27,7 @@ export function Navigation(): JSX.Element | null {
   const location = useLocation()
   const navigate = useNavigate()
   const dispatch: ThunkDispatch<any> = useDispatch()
-  const loadFile = (
-    fileChangeEvent: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const loadFile = (fileChangeEvent: ChangeEvent<HTMLInputElement>): void => {
     dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
     dispatch(toggleNewProtocolModal(false))
   }
diff --git a/protocol-designer/src/organisms/PipetteInfoItem/__tests__/PipetteInfoItem.test.tsx b/protocol-designer/src/organisms/PipetteInfoItem/__tests__/PipetteInfoItem.test.tsx
index ae60f21c4fb..50c05f24fb4 100644
--- a/protocol-designer/src/organisms/PipetteInfoItem/__tests__/PipetteInfoItem.test.tsx
+++ b/protocol-designer/src/organisms/PipetteInfoItem/__tests__/PipetteInfoItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,16 +6,18 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { getLabwareDefsByURI } from '../../../labware-defs/selectors'
 import { PipetteInfoItem } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../labware-defs/selectors')
 
-const render = (props: React.ComponentProps<typeof PipetteInfoItem>) => {
+const render = (props: ComponentProps<typeof PipetteInfoItem>) => {
   return renderWithProviders(<PipetteInfoItem {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('PipetteInfoItem', () => {
-  let props: React.ComponentProps<typeof PipetteInfoItem>
+  let props: ComponentProps<typeof PipetteInfoItem>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/RenameStepModal/__tests__/RenameStepModal.test.tsx b/protocol-designer/src/organisms/RenameStepModal/__tests__/RenameStepModal.test.tsx
index 3bdc35028ae..e9ac1e790d4 100644
--- a/protocol-designer/src/organisms/RenameStepModal/__tests__/RenameStepModal.test.tsx
+++ b/protocol-designer/src/organisms/RenameStepModal/__tests__/RenameStepModal.test.tsx
@@ -6,16 +6,18 @@ import { PAUSE_UNTIL_RESUME } from '../../../constants'
 import { renameStep } from '../../../labware-ingred/actions'
 import { RenameStepModal } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../labware-ingred/actions')
 
-const render = (props: React.ComponentProps<typeof RenameStepModal>) => {
+const render = (props: ComponentProps<typeof RenameStepModal>) => {
   return renderWithProviders(<RenameStepModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EditNickNameModal', () => {
-  let props: React.ComponentProps<typeof RenameStepModal>
+  let props: ComponentProps<typeof RenameStepModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/SelectWellsModal/__tests__/SelectWellsModal.test.tsx b/protocol-designer/src/organisms/SelectWellsModal/__tests__/SelectWellsModal.test.tsx
index fa1614e240d..104022625c4 100644
--- a/protocol-designer/src/organisms/SelectWellsModal/__tests__/SelectWellsModal.test.tsx
+++ b/protocol-designer/src/organisms/SelectWellsModal/__tests__/SelectWellsModal.test.tsx
@@ -14,6 +14,8 @@ import {
 } from '../../../step-forms/selectors'
 import { SelectableLabware } from '../../Labware/SelectableLabware'
 import { SelectWellsModal } from '..'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
 
 vi.mock('../../../step-forms/selectors')
@@ -21,7 +23,7 @@ vi.mock('../../../labware-ingred/selectors')
 vi.mock('../../../top-selectors/well-contents')
 vi.mock('../../Labware/SelectableLabware')
 
-const render = (props: React.ComponentProps<typeof SelectWellsModal>) => {
+const render = (props: ComponentProps<typeof SelectWellsModal>) => {
   return renderWithProviders(<SelectWellsModal {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -30,7 +32,7 @@ const render = (props: React.ComponentProps<typeof SelectWellsModal>) => {
 const labwareId = 'mockId'
 const pipId = 'mockPipId'
 describe('SelectWellsModal', () => {
-  let props: React.ComponentProps<typeof SelectWellsModal>
+  let props: ComponentProps<typeof SelectWellsModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/SlotInformation/__tests__/SlotInformation.test.tsx b/protocol-designer/src/organisms/SlotInformation/__tests__/SlotInformation.test.tsx
index 784590aeb20..c72b55e3b54 100644
--- a/protocol-designer/src/organisms/SlotInformation/__tests__/SlotInformation.test.tsx
+++ b/protocol-designer/src/organisms/SlotInformation/__tests__/SlotInformation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -7,6 +6,7 @@ import { i18n } from '../../../assets/localization'
 
 import { SlotInformation } from '..'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockLiquids = ['Mastermix', 'Ethanol', 'Water']
@@ -24,14 +24,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SlotInformation>) => {
+const render = (props: ComponentProps<typeof SlotInformation>) => {
   return renderWithProviders(<SlotInformation {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SlotInformation', () => {
-  let props: React.ComponentProps<typeof SlotInformation>
+  let props: ComponentProps<typeof SlotInformation>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx b/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx
index 81fb4ab3c2d..6453824b4d4 100644
--- a/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx
+++ b/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx
@@ -23,6 +23,7 @@ import * as utils from './utils'
 import { TOO_MANY_DECIMALS } from './constants'
 import { TipPositionZOnlyView } from './TipPositionZOnlyView'
 
+import type { ChangeEvent } from 'react'
 import type { StepFieldName } from '../../form-types'
 
 interface ZTipPositionModalProps {
@@ -131,9 +132,7 @@ export function ZTipPositionModal(props: ZTipPositionModalProps): JSX.Element {
     }
   }
 
-  const handleInputFieldChange = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const handleInputFieldChange = (e: ChangeEvent<HTMLInputElement>): void => {
     handleChange(e.currentTarget.value)
     setPristine(false)
   }
diff --git a/protocol-designer/src/organisms/TipPositionModal/__tests__/TipPositionModal.test.tsx b/protocol-designer/src/organisms/TipPositionModal/__tests__/TipPositionModal.test.tsx
index 7a3c871d709..7c1e1da85bb 100644
--- a/protocol-designer/src/organisms/TipPositionModal/__tests__/TipPositionModal.test.tsx
+++ b/protocol-designer/src/organisms/TipPositionModal/__tests__/TipPositionModal.test.tsx
@@ -5,10 +5,10 @@ import { i18n } from '../../../assets/localization'
 import { TipPositionSideView } from '../TipPositionSideView'
 import { TipPositionModal } from '..'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
 vi.mock('../TipPositionSideView')
-const render = (props: React.ComponentProps<typeof TipPositionModal>) => {
+const render = (props: ComponentProps<typeof TipPositionModal>) => {
   return renderWithProviders(<TipPositionModal {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -19,7 +19,7 @@ const mockUpdateXSpec = vi.fn()
 const mockUpdateYSpec = vi.fn()
 
 describe('TipPositionModal', () => {
-  let props: React.ComponentProps<typeof TipPositionModal>
+  let props: ComponentProps<typeof TipPositionModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/TipPositionModal/__tests__/ZTipPositionModal.test.tsx b/protocol-designer/src/organisms/TipPositionModal/__tests__/ZTipPositionModal.test.tsx
index 20e148af0de..31e4a4bf86e 100644
--- a/protocol-designer/src/organisms/TipPositionModal/__tests__/ZTipPositionModal.test.tsx
+++ b/protocol-designer/src/organisms/TipPositionModal/__tests__/ZTipPositionModal.test.tsx
@@ -4,17 +4,18 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../assets/localization'
 import { ZTipPositionModal } from '../ZTipPositionModal'
 import { TipPositionZOnlyView } from '../TipPositionZOnlyView'
-import type * as React from 'react'
+
+import type { ComponentProps } from 'react'
 
 vi.mock('../TipPositionZOnlyView')
-const render = (props: React.ComponentProps<typeof ZTipPositionModal>) => {
+const render = (props: ComponentProps<typeof ZTipPositionModal>) => {
   return renderWithProviders(<ZTipPositionModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ZTipPositionModal', () => {
-  let props: React.ComponentProps<typeof ZTipPositionModal>
+  let props: ComponentProps<typeof ZTipPositionModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/TipPositionModal/index.tsx b/protocol-designer/src/organisms/TipPositionModal/index.tsx
index cb06f4c2fc8..e3e01447bf0 100644
--- a/protocol-designer/src/organisms/TipPositionModal/index.tsx
+++ b/protocol-designer/src/organisms/TipPositionModal/index.tsx
@@ -25,6 +25,7 @@ import * as utils from './utils'
 import { TipPositionTopView } from './TipPositionTopView'
 import { TipPositionSideView } from './TipPositionSideView'
 
+import type { ChangeEvent } from 'react'
 import type { StepFieldName } from '../../form-types'
 
 type Offset = 'x' | 'y' | 'z'
@@ -179,9 +180,7 @@ export function TipPositionModal(
     }
   }
 
-  const handleZInputFieldChange = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const handleZInputFieldChange = (e: ChangeEvent<HTMLInputElement>): void => {
     handleZChange(e.currentTarget.value)
     setPristine(false)
   }
@@ -200,9 +199,7 @@ export function TipPositionModal(
     }
   }
 
-  const handleXInputFieldChange = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const handleXInputFieldChange = (e: ChangeEvent<HTMLInputElement>): void => {
     handleXChange(e.currentTarget.value)
     setPristine(false)
   }
@@ -221,9 +218,7 @@ export function TipPositionModal(
     }
   }
 
-  const handleYInputFieldChange = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const handleYInputFieldChange = (e: ChangeEvent<HTMLInputElement>): void => {
     handleYChange(e.currentTarget.value)
     setPristine(false)
   }
diff --git a/protocol-designer/src/organisms/WellOrderModal/__tests__/WellOrderModal.test.tsx b/protocol-designer/src/organisms/WellOrderModal/__tests__/WellOrderModal.test.tsx
index 798bd8abc89..7afd6d1c139 100644
--- a/protocol-designer/src/organisms/WellOrderModal/__tests__/WellOrderModal.test.tsx
+++ b/protocol-designer/src/organisms/WellOrderModal/__tests__/WellOrderModal.test.tsx
@@ -4,14 +4,16 @@ import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { WellOrderModal } from '..'
 
-const render = (props: React.ComponentProps<typeof WellOrderModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WellOrderModal>) => {
   return renderWithProviders(<WellOrderModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('WellOrderModal', () => {
-  let props: React.ComponentProps<typeof WellOrderModal>
+  let props: ComponentProps<typeof WellOrderModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
index 54a629120a9..ba3f0648672 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
@@ -26,13 +26,15 @@ import four from '../../assets/images/onboarding_animation_4.webm'
 import five from '../../assets/images/onboarding_animation_5.webm'
 import six from '../../assets/images/onboarding_animation_6.webm'
 import { LINK_BUTTON_STYLE } from '../../atoms'
+
+import type { ReactNode } from 'react'
 import type { RobotType } from '@opentrons/shared-data'
 
 interface WizardBodyProps {
   robotType: RobotType
   stepNumber: number
   header: string
-  children: React.ReactNode
+  children: ReactNode
   proceed: () => void
   disabled?: boolean
   goBack?: () => void
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/AddMetadata.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/AddMetadata.test.tsx
index 63bced829a2..2c2731ca9c5 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/AddMetadata.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/AddMetadata.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -7,9 +6,10 @@ import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { AddMetadata } from '../AddMetadata'
 
+import type { ComponentProps } from 'react'
 import type { WizardFormState, WizardTileProps } from '../types'
 
-const render = (props: React.ComponentProps<typeof AddMetadata>) => {
+const render = (props: ComponentProps<typeof AddMetadata>) => {
   return renderWithProviders(<AddMetadata {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -35,7 +35,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('AddMetadata', () => {
-  let props: React.ComponentProps<typeof AddMetadata>
+  let props: ComponentProps<typeof AddMetadata>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectFixtures.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectFixtures.test.tsx
index 42702c2a507..b4d205aeb71 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectFixtures.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectFixtures.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -6,9 +5,11 @@ import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { SelectFixtures } from '../SelectFixtures'
+
+import type { ComponentProps } from 'react'
 import type { WizardFormState, WizardTileProps } from '../types'
 
-const render = (props: React.ComponentProps<typeof SelectFixtures>) => {
+const render = (props: ComponentProps<typeof SelectFixtures>) => {
   return renderWithProviders(<SelectFixtures {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -34,7 +35,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('SelectFixtures', () => {
-  let props: React.ComponentProps<typeof SelectFixtures>
+  let props: ComponentProps<typeof SelectFixtures>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx
index 87ab1bb07e3..fbd0b4c6388 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -7,6 +6,7 @@ import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { SelectGripper } from '../SelectGripper'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { WizardFormState, WizardTileProps } from '../types'
 
@@ -20,7 +20,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SelectGripper>) => {
+const render = (props: ComponentProps<typeof SelectGripper>) => {
   return renderWithProviders(<SelectGripper {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -45,7 +45,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('SelectGripper', () => {
-  let props: React.ComponentProps<typeof SelectGripper>
+  let props: ComponentProps<typeof SelectGripper>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectModules.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectModules.test.tsx
index a18f06bf508..30dcf7fae43 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectModules.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectModules.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -7,11 +6,13 @@ import { i18n } from '../../../assets/localization'
 import { getEnableAbsorbanceReader } from '../../../feature-flags/selectors'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { SelectModules } from '../SelectModules'
+
+import type { ComponentProps } from 'react'
 import type { WizardFormState, WizardTileProps } from '../types'
 
 vi.mock('../../../feature-flags/selectors')
 
-const render = (props: React.ComponentProps<typeof SelectModules>) => {
+const render = (props: ComponentProps<typeof SelectModules>) => {
   return renderWithProviders(<SelectModules {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -37,7 +38,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('SelectModules', () => {
-  let props: React.ComponentProps<typeof SelectModules>
+  let props: ComponentProps<typeof SelectModules>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx
index 016a143a4bc..7af0b1dc597 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -12,6 +11,7 @@ import { createCustomTiprackDef } from '../../../labware-defs/actions'
 import { SelectPipettes } from '../SelectPipettes'
 import { getTiprackOptions } from '../utils'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { WizardFormState, WizardTileProps } from '../types'
 
@@ -31,7 +31,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SelectPipettes>) => {
+const render = (props: ComponentProps<typeof SelectPipettes>) => {
   return renderWithProviders(<SelectPipettes {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -56,7 +56,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('SelectPipettes', () => {
-  let props: React.ComponentProps<typeof SelectPipettes>
+  let props: ComponentProps<typeof SelectPipettes>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx
index 241fdb159ba..29b11194e66 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -6,9 +5,11 @@ import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { SelectRobot } from '../SelectRobot'
+
+import type { ComponentProps } from 'react'
 import type { WizardFormState, WizardTileProps } from '../types'
 
-const render = (props: React.ComponentProps<typeof SelectRobot>) => {
+const render = (props: ComponentProps<typeof SelectRobot>) => {
   return renderWithProviders(<SelectRobot {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -32,7 +33,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('SelectRobot', () => {
-  let props: React.ComponentProps<typeof SelectRobot>
+  let props: ComponentProps<typeof SelectRobot>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/WizardBody.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/WizardBody.test.tsx
index fe33c8266c9..669dc7bac92 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/WizardBody.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/WizardBody.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,14 +6,16 @@ import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { WizardBody } from '../WizardBody'
 
-const render = (props: React.ComponentProps<typeof WizardBody>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WizardBody>) => {
   return renderWithProviders(<WizardBody {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('WizardBody', () => {
-  let props: React.ComponentProps<typeof WizardBody>
+  let props: ComponentProps<typeof WizardBody>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/index.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/index.tsx
index df079c72318..d3451605756 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/index.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/index.tsx
@@ -46,6 +46,8 @@ import { SelectModules } from './SelectModules'
 import { SelectFixtures } from './SelectFixtures'
 import { AddMetadata } from './AddMetadata'
 import { getTrashSlot } from './utils'
+
+import type { Dispatch, SetStateAction } from 'react'
 import type { ThunkDispatch } from 'redux-thunk'
 import type { NormalizedPipette } from '@opentrons/step-generation'
 import type { BaseState } from '../../types'
@@ -389,7 +391,7 @@ interface CreateFileFormProps {
   createProtocolFile: (values: WizardFormState) => void
   goBack: () => void
   proceed: () => void
-  setWizardSteps: React.Dispatch<React.SetStateAction<WizardStep[]>>
+  setWizardSteps: Dispatch<SetStateAction<WizardStep[]>>
   analyticsStartTime: Date
 }
 
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx
index 35961ab04cd..0b480340279 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
@@ -18,6 +17,7 @@ import {
 } from '@opentrons/components'
 import { getDeckSetupForActiveItem } from '../../../top-selectors/labware-locations'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type {
   CoordinateTuple,
   DeckSlotId,
@@ -27,12 +27,12 @@ import type { DeckSetupTabType } from '../types'
 
 interface DeckItemHoverProps extends DeckSetupTabType {
   hover: string | null
-  setHover: React.Dispatch<React.SetStateAction<string | null>>
+  setHover: Dispatch<SetStateAction<string | null>>
   slotBoundingBox: Dimensions
   //  can be slotId or labwareId (for off-deck labware)
   itemId: string
   slotPosition: CoordinateTuple | null
-  setShowMenuListForId: React.Dispatch<React.SetStateAction<string | null>>
+  setShowMenuListForId: Dispatch<SetStateAction<string | null>>
   menuListId: DeckSlotId | null
   isSelected?: boolean
 }
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx
index d41f2057502..995b06219d6 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx
@@ -61,6 +61,7 @@ import {
   getLabwareCompatibleWithAdapter,
 } from './utils'
 
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react'
 import type { DeckSlotId, LabwareDefinition2 } from '@opentrons/shared-data'
 import type { ModuleOnDeck } from '../../../step-forms'
 import type { ThunkDispatch } from '../../../types'
@@ -75,9 +76,9 @@ interface LabwareToolsProps {
   slot: DeckSlotId
   setHoveredLabware: (defUri: string | null) => void
   searchTerm: string
-  setSearchTerm: React.Dispatch<React.SetStateAction<string>>
+  setSearchTerm: Dispatch<SetStateAction<string>>
   areCategoriesExpanded: CategoryExpand
-  setAreCategoriesExpanded: React.Dispatch<React.SetStateAction<CategoryExpand>>
+  setAreCategoriesExpanded: Dispatch<SetStateAction<CategoryExpand>>
   handleReset: () => void
 }
 
@@ -274,7 +275,7 @@ export function LabwareTools(props: LabwareToolsProps): JSX.Element {
         (isNextToHeaterShaker && robotType === OT2_ROBOT_TYPE) ? (
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
             <CheckboxField
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 isNextToHeaterShaker
                   ? setFilterHeight(e.currentTarget.checked)
                   : setFilterRecommended(e.currentTarget.checked)
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx
index 6a0c7d03c87..6d7cc88479e 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx
@@ -22,7 +22,7 @@ import { getDeckSetupForActiveItem } from '../../../../top-selectors/labware-loc
 import { DeckSetupTools } from '../DeckSetupTools'
 import { LabwareTools } from '../LabwareTools'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 vi.mock('../LabwareTools')
@@ -36,7 +36,7 @@ vi.mock('../../../../labware-ingred/selectors')
 vi.mock('../../../../tutorial/selectors')
 vi.mock('../../../../step-forms/selectors')
 vi.mock('../../../../organisms/Kitchen/hooks')
-const render = (props: React.ComponentProps<typeof DeckSetupTools>) => {
+const render = (props: ComponentProps<typeof DeckSetupTools>) => {
   return renderWithProviders(<DeckSetupTools {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -45,7 +45,7 @@ const render = (props: React.ComponentProps<typeof DeckSetupTools>) => {
 const mockMakeSnackbar = vi.fn()
 
 describe('DeckSetupTools', () => {
-  let props: React.ComponentProps<typeof DeckSetupTools>
+  let props: ComponentProps<typeof DeckSetupTools>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/HoveredItems.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/HoveredItems.test.tsx
index 605af62250e..4f911f558dc 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/HoveredItems.test.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/HoveredItems.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -14,6 +13,8 @@ import { getCustomLabwareDefsByURI } from '../../../../labware-defs/selectors'
 import { getDesignerTab } from '../../../../file-data/selectors'
 import { FixtureRender } from '../FixtureRender'
 import { HoveredItems } from '../HoveredItems'
+
+import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 
 vi.mock('../FixtureRender')
@@ -29,12 +30,12 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof HoveredItems>) => {
+const render = (props: ComponentProps<typeof HoveredItems>) => {
   return renderWithProviders(<HoveredItems {...props} />)[0]
 }
 
 describe('HoveredItems', () => {
-  let props: React.ComponentProps<typeof HoveredItems>
+  let props: ComponentProps<typeof HoveredItems>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx
index d584faf4d27..ce41f0e9210 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -21,6 +20,8 @@ import { createCustomLabwareDef } from '../../../../labware-defs/actions'
 import { getCustomLabwareDefsByURI } from '../../../../labware-defs/selectors'
 import { getRobotType } from '../../../../file-data/selectors'
 import { LabwareTools } from '../LabwareTools'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2, PipetteV2Specs } from '@opentrons/shared-data'
 
 vi.mock('../../../../utils')
@@ -32,14 +33,14 @@ vi.mock('../../../../labware-defs/actions')
 vi.mock('../../../../labware-ingred/selectors')
 vi.mock('../../../../labware-ingred/actions')
 
-const render = (props: React.ComponentProps<typeof LabwareTools>) => {
+const render = (props: ComponentProps<typeof LabwareTools>) => {
   return renderWithProviders(<LabwareTools {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('LabwareTools', () => {
-  let props: React.ComponentProps<typeof LabwareTools>
+  let props: ComponentProps<typeof LabwareTools>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SelectedHoveredItems.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SelectedHoveredItems.test.tsx
index 4c705749bc6..59496c9049b 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SelectedHoveredItems.test.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SelectedHoveredItems.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -17,6 +16,8 @@ import { getDesignerTab } from '../../../../file-data/selectors'
 import { LabwareOnDeck } from '../../../../organisms'
 import { FixtureRender } from '../FixtureRender'
 import { SelectedHoveredItems } from '../SelectedHoveredItems'
+
+import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
@@ -34,12 +35,12 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SelectedHoveredItems>) => {
+const render = (props: ComponentProps<typeof SelectedHoveredItems>) => {
   return renderWithProviders(<SelectedHoveredItems {...props} />)[0]
 }
 
 describe('SelectedHoveredItems', () => {
-  let props: React.ComponentProps<typeof SelectedHoveredItems>
+  let props: ComponentProps<typeof SelectedHoveredItems>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx
index 3fc9f65f8ea..1924ac7c961 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -19,6 +18,7 @@ import { selectors as labwareIngredSelectors } from '../../../../labware-ingred/
 import { getNextAvailableDeckSlot } from '../../../../labware-ingred/utils'
 import { SlotOverflowMenu } from '../SlotOverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
@@ -41,7 +41,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SlotOverflowMenu>) => {
+const render = (props: ComponentProps<typeof SlotOverflowMenu>) => {
   return renderWithProviders(<SlotOverflowMenu {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -51,7 +51,7 @@ const MOCK_STAGING_AREA_ID = 'MOCK_STAGING_AREA_ID'
 const MOCK_MAKE_SNACKBAR = vi.fn()
 
 describe('SlotOverflowMenu', () => {
-  let props: React.ComponentProps<typeof SlotOverflowMenu>
+  let props: ComponentProps<typeof SlotOverflowMenu>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/utils.ts b/protocol-designer/src/pages/Designer/DeckSetup/utils.ts
index a891926d329..a51a850bb84 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/utils.ts
+++ b/protocol-designer/src/pages/Designer/DeckSetup/utils.ts
@@ -22,6 +22,7 @@ import {
   RECOMMENDED_LABWARE_BY_MODULE,
 } from './constants'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type {
   AddressableAreaName,
   CutoutFixture,
@@ -229,7 +230,7 @@ export function zoomInOnCoordinate(props: ZoomInOnCoordinateProps): string {
 export interface AnimateZoomProps {
   targetViewBox: string
   viewBox: string
-  setViewBox: React.Dispatch<React.SetStateAction<string>>
+  setViewBox: Dispatch<SetStateAction<string>>
 }
 
 type ViewBox = [number, number, number, number]
diff --git a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx
index c141ecee427..1a4b2e12c29 100644
--- a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx
+++ b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx
@@ -23,7 +23,7 @@ import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
 import * as labwareIngredActions from '../../labware-ingred/actions'
 
-import type { MouseEvent } from 'react'
+import type { MouseEvent, RefObject } from 'react'
 import type { ThunkDispatch } from '../../types'
 
 const NAV_HEIGHT = '64px'
@@ -31,7 +31,7 @@ const NAV_HEIGHT = '64px'
 interface LiquidsOverflowMenuProps {
   onClose: () => void
   showLiquidsModal: () => void
-  overflowWrapperRef: React.RefObject<HTMLDivElement>
+  overflowWrapperRef: RefObject<HTMLDivElement>
 }
 
 export function LiquidsOverflowMenu(
diff --git a/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx b/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx
index aa442066194..51c2ccd0f1b 100644
--- a/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx
+++ b/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx
@@ -14,6 +14,8 @@ import { getDeckSetupForActiveItem } from '../../../../top-selectors/labware-loc
 import { getAllWellContentsForActiveItem } from '../../../../top-selectors/well-contents'
 import { OffDeckDetails } from '../OffDeckDetails'
 import { HighlightOffdeckSlot } from '../HighlightOffdeckSlot'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type * as Components from '@opentrons/components'
 
@@ -31,14 +33,14 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof OffDeckDetails>) => {
+const render = (props: ComponentProps<typeof OffDeckDetails>) => {
   return renderWithProviders(<OffDeckDetails {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('OffDeckDetails', () => {
-  let props: React.ComponentProps<typeof OffDeckDetails>
+  let props: ComponentProps<typeof OffDeckDetails>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx
index e9676cbb951..691706a2884 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx
@@ -17,6 +17,8 @@ import SINGLE_IMAGE from '../../../../../assets/images/path_single_transfers.svg
 import MULTI_DISPENSE_IMAGE from '../../../../../assets/images/path_multi_dispense.svg'
 import MULTI_ASPIRATE_IMAGE from '../../../../../assets/images/path_multi_aspirate.svg'
 import { getDisabledPathMap } from './utils'
+
+import type { ChangeEvent, ReactNode } from 'react'
 import type { PathOption } from '../../../../../form-types'
 import type { FieldProps } from '../types'
 import type { DisabledPathMap, ValuesForPath } from './utils'
@@ -60,10 +62,10 @@ interface PathButtonProps {
   disabled: boolean
   selected: boolean
   subtitle: string
-  onClick: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onClick: (e: ChangeEvent<HTMLInputElement>) => void
   path: PathOption
   id?: string
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 function PathButton(props: PathButtonProps): JSX.Element {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index 475340bf2d4..68637ec0aa5 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -56,6 +56,8 @@ import {
   capitalizeFirstLetter,
   getIsErrorOnCurrentPage,
 } from './utils'
+
+import type { ComponentType } from 'react'
 import type { StepFieldName } from '../../../../steplist/fieldLevel'
 import type { FormData, StepType } from '../../../../form-types'
 import type { AnalyticsEvent } from '../../../../analytics/mixpanel'
@@ -72,7 +74,7 @@ import {
 } from '../../../../ui/steps/actions/actions'
 
 type StepFormMap = {
-  [K in StepType]?: React.ComponentType<StepFormProps> | null
+  [K in StepType]?: ComponentType<StepFormProps> | null
 }
 
 const STEP_FORM_MAP: StepFormMap = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
index 96d0007e096..1a26a708ed5 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
@@ -33,6 +33,7 @@ import {
 import { uuid } from '../../../../../../utils'
 import { getTimeFromString, getStepIndex } from './utils'
 
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react'
 import type { ThermocyclerStepTypeGeneral } from './ThermocyclerProfileModal'
 import type { ThermocyclerStepType } from './ThermocyclerStep'
 
@@ -57,12 +58,12 @@ interface CycleStepType {
 
 interface ThermocyclerCycleProps {
   steps: ThermocyclerStepTypeGeneral[]
-  setSteps: React.Dispatch<React.SetStateAction<ThermocyclerStepTypeGeneral[]>>
-  setShowCreateNewCycle: React.Dispatch<React.SetStateAction<boolean>>
+  setSteps: Dispatch<SetStateAction<ThermocyclerStepTypeGeneral[]>>
+  setShowCreateNewCycle: Dispatch<SetStateAction<boolean>>
   step?: ThermocyclerCycleType
   backgroundColor?: string
   readOnly?: boolean
-  setIsInEdit: React.Dispatch<React.SetStateAction<boolean>>
+  setIsInEdit: Dispatch<SetStateAction<boolean>>
 }
 
 export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
@@ -394,7 +395,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
                     'capitalize'
                   )}
                   value={stepState.name.value}
-                  onChange={(e: React.ChangeEvent<any>) => {
+                  onChange={(e: ChangeEvent<any>) => {
                     handleValueUpdate(
                       cycleStepId,
                       'name',
@@ -417,7 +418,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
                   )}
                   units={t('units.degrees')}
                   value={stepState.temp.value}
-                  onChange={(e: React.ChangeEvent<any>) => {
+                  onChange={(e: ChangeEvent<any>) => {
                     handleValueUpdate(
                       cycleStepId,
                       'temp',
@@ -454,7 +455,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
                   )}
                   units={t('units.time')}
                   value={stepState.time.value}
-                  onChange={(e: React.ChangeEvent<any>) => {
+                  onChange={(e: ChangeEvent<any>) => {
                     handleValueUpdate(
                       cycleStepId,
                       'time',
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx
index 6c952296ad3..b1f87f6f997 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx
@@ -17,6 +17,7 @@ import {
 import { ThermocyclerCycle } from './ThermocyclerCycle'
 import { ThermocyclerStep } from './ThermocyclerStep'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { FormData } from '../../../../../../form-types'
 import type { FieldPropsByName } from '../../types'
 import type { ThermocyclerCycleType } from './ThermocyclerCycle'
@@ -29,7 +30,7 @@ export type ThermocyclerStepTypeGeneral =
 interface ThermocyclerModalProps {
   formData: FormData
   propsForFields: FieldPropsByName
-  setShowProfileModal: React.Dispatch<React.SetStateAction<boolean>>
+  setShowProfileModal: Dispatch<SetStateAction<boolean>>
 }
 
 export function ThermocyclerProfileModal(
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
index 3e45704c94d..327e3676690 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
@@ -30,6 +30,7 @@ import {
 import { uuid } from '../../../../../../utils'
 import { getTimeFromString, getStepIndex } from './utils'
 
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react'
 import type { ThermocyclerStepTypeGeneral } from './ThermocyclerProfileModal'
 
 export interface ThermocyclerStepType {
@@ -43,9 +44,9 @@ export interface ThermocyclerStepType {
 
 interface ThermocyclerStepProps {
   steps: ThermocyclerStepTypeGeneral[]
-  setSteps: React.Dispatch<React.SetStateAction<ThermocyclerStepTypeGeneral[]>>
-  setShowCreateNewStep: React.Dispatch<React.SetStateAction<boolean>>
-  setIsInEdit: React.Dispatch<React.SetStateAction<boolean>>
+  setSteps: Dispatch<SetStateAction<ThermocyclerStepTypeGeneral[]>>
+  setShowCreateNewStep: Dispatch<SetStateAction<boolean>>
+  setIsInEdit: Dispatch<SetStateAction<boolean>>
   step?: ThermocyclerStepType
   backgroundColor?: string
   readOnly?: boolean
@@ -263,7 +264,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
             'capitalize'
           )}
           value={stepState.name.value}
-          onChange={(e: React.ChangeEvent<any>) => {
+          onChange={(e: ChangeEvent<any>) => {
             handleValueUpdate('name', e.target.value as string)
           }}
         />
@@ -280,7 +281,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
           )}
           units={t('units.degrees')}
           value={stepState.temp.value}
-          onChange={(e: React.ChangeEvent<any>) => {
+          onChange={(e: ChangeEvent<any>) => {
             handleValueUpdate(
               'temp',
               maskToFloat(e.target.value),
@@ -308,7 +309,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
           )}
           units={t('units.time')}
           value={stepState.time.value}
-          onChange={(e: React.ChangeEvent<any>) => {
+          onChange={(e: ChangeEvent<any>) => {
             handleValueUpdate(
               'time',
               maskToTime(e.target.value),
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
index 6078835fbf6..7d5c250462e 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
@@ -31,7 +31,7 @@ const render = (props: ComponentProps<typeof MagnetTools>) => {
 }
 
 describe('MagnetTools', () => {
-  let props: React.ComponentProps<typeof MagnetTools>
+  let props: ComponentProps<typeof MagnetTools>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx
index 904377f66f4..1df389f2d18 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx
@@ -7,6 +7,8 @@ import {
   getTemperatureModuleIds,
 } from '../../../../../../ui/modules/selectors'
 import { TemperatureTools } from '../TemperatureTools'
+
+import type { ComponentProps } from 'react'
 import type * as ModulesSelectors from '../../../../../../ui/modules/selectors'
 
 vi.mock('../../../../../../ui/modules/selectors', async importOriginal => {
@@ -17,14 +19,14 @@ vi.mock('../../../../../../ui/modules/selectors', async importOriginal => {
     getTemperatureModuleIds: vi.fn(),
   }
 })
-const render = (props: React.ComponentProps<typeof TemperatureTools>) => {
+const render = (props: ComponentProps<typeof TemperatureTools>) => {
   return renderWithProviders(<TemperatureTools {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TemperatureTools', () => {
-  let props: React.ComponentProps<typeof TemperatureTools>
+  let props: ComponentProps<typeof TemperatureTools>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts
index ffbfd8b32c3..8e05bda853a 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts
@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction } from 'react'
 import type { FormData, StepFieldName } from '../../../../form-types'
 import type { StepFormErrors } from '../../../../steplist'
 export interface FocusHandlers {
@@ -30,7 +31,7 @@ export interface StepFormProps {
   visibleFormErrors: StepFormErrors
   showFormErrors: boolean
   focusedField?: string | null
-  setShowFormErrors?: React.Dispatch<React.SetStateAction<boolean>>
+  setShowFormErrors?: Dispatch<SetStateAction<boolean>>
   tab: LiquidHandlingTab
-  setTab: React.Dispatch<React.SetStateAction<LiquidHandlingTab>>
+  setTab: Dispatch<SetStateAction<LiquidHandlingTab>>
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
index 1a9ac29f33d..0051499bf15 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux'
-import type { Dispatch, SetStateAction } from 'react'
+
 import { useTranslation } from 'react-i18next'
 import { useConditionalConfirm } from '@opentrons/components'
 import * as timelineWarningSelectors from '../../../../top-selectors/timelineWarnings'
@@ -34,6 +34,7 @@ import {
   nonePressed,
 } from './utils'
 
+import type { Dispatch, MouseEvent, SetStateAction } from 'react'
 import type { ThunkDispatch } from 'redux-thunk'
 import type {
   HoverOnStepAction,
@@ -117,7 +118,7 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
     dispatch(stepsActions.hoverOnStep(stepId))
   const unhighlightStep = (): HoverOnStepAction =>
     dispatch(stepsActions.hoverOnStep(null))
-  const handleSelectStep = (event: React.MouseEvent): void => {
+  const handleSelectStep = (event: MouseEvent): void => {
     if (selectedStep !== stepId) {
       dispatch(toggleViewSubstep(null))
       dispatch(hoverOnStep(null))
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx
index c26460fe472..465e85b577d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx
@@ -25,6 +25,8 @@ import {
   getSavedStepForms,
   getUnsavedForm,
 } from '../../../../step-forms/selectors'
+
+import type { Dispatch, MutableRefObject, SetStateAction } from 'react'
 import type { ThunkDispatch } from 'redux-thunk'
 import type { BaseState } from '../../../../types'
 import type { StepIdType } from '../../../../form-types'
@@ -32,9 +34,9 @@ import type { AnalyticsEvent } from '../../../../analytics/mixpanel'
 
 interface StepOverflowMenuProps {
   stepId: string
-  menuRootRef: React.MutableRefObject<HTMLDivElement | null>
+  menuRootRef: MutableRefObject<HTMLDivElement | null>
   top: number
-  setOpenedOverflowMenuId: React.Dispatch<React.SetStateAction<string | null>>
+  setOpenedOverflowMenuId: Dispatch<SetStateAction<string | null>>
   handleEdit: () => void
   confirmDelete: () => void
   confirmMultiDelete: () => void
@@ -106,7 +108,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
         boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
         backgroundColor={COLORS.white}
         flexDirection={DIRECTION_COLUMN}
-        onClick={(e: React.MouseEvent) => {
+        onClick={(e: MouseEvent) => {
           e.preventDefault()
           e.stopPropagation()
         }}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
index 4933dffe3ed..be874bb60d2 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -8,19 +7,21 @@ import { getUnsavedForm } from '../../../../../step-forms/selectors'
 import { StepContainer } from '../StepContainer'
 import { StepOverflowMenu } from '../StepOverflowMenu'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../../../step-forms/selectors')
 vi.mock('../../../../../ui/steps/actions/actions')
 vi.mock('../../../../../ui/steps/selectors')
 vi.mock('../StepOverflowMenu')
 
-const render = (props: React.ComponentProps<typeof StepContainer>) => {
+const render = (props: ComponentProps<typeof StepContainer>) => {
   return renderWithProviders(<StepContainer {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('StepContainer', () => {
-  let props: React.ComponentProps<typeof StepContainer>
+  let props: ComponentProps<typeof StepContainer>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx
index 9c1de4044d0..55197e85ed4 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx
@@ -20,7 +20,8 @@ import {
   toggleViewSubstep,
 } from '../../../../../ui/steps/actions/actions'
 import { StepOverflowMenu } from '../StepOverflowMenu'
-import type * as React from 'react'
+
+import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 
 const mockConfirm = vi.fn()
@@ -46,7 +47,7 @@ vi.mock('@opentrons/components', async importOriginal => {
     })),
   }
 })
-const render = (props: React.ComponentProps<typeof StepOverflowMenu>) => {
+const render = (props: ComponentProps<typeof StepOverflowMenu>) => {
   return renderWithProviders(<StepOverflowMenu {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -54,7 +55,7 @@ const render = (props: React.ComponentProps<typeof StepOverflowMenu>) => {
 
 const moveLiquidStepId = 'mockId'
 describe('StepOverflowMenu', () => {
-  let props: React.ComponentProps<typeof StepOverflowMenu>
+  let props: ComponentProps<typeof StepOverflowMenu>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/ThermocyclerProfileSubsteps.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/ThermocyclerProfileSubsteps.test.tsx
index b4fb8af436f..a665e82b3a4 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/ThermocyclerProfileSubsteps.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/ThermocyclerProfileSubsteps.test.tsx
@@ -4,11 +4,11 @@ import { renderWithProviders } from '../../../../../__testing-utils__'
 import { i18n } from '../../../../../assets/localization'
 import { getSavedStepForms } from '../../../../../step-forms/selectors'
 import { ThermocyclerProfileSubsteps } from '../ThermocyclerProfileSubsteps'
+
+import type { ComponentProps } from 'react'
 import type { FormData } from '../../../../../form-types'
 
-const render = (
-  props: React.ComponentProps<typeof ThermocyclerProfileSubsteps>
-) => {
+const render = (props: ComponentProps<typeof ThermocyclerProfileSubsteps>) => {
   return renderWithProviders(<ThermocyclerProfileSubsteps {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -55,7 +55,7 @@ const MOCK_THERMOCYCLER_SUBSTEP_ITEMS = {
 }
 
 describe('TimelineToolbox', () => {
-  let props: React.ComponentProps<typeof ThermocyclerProfileSubsteps>
+  let props: ComponentProps<typeof ThermocyclerProfileSubsteps>
   beforeEach(() => {
     props = { stepId: THERMOCYCLER_STEP_ID }
     vi.mocked(getSavedStepForms).mockReturnValue({
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
index b12d5598ca1..0e6620523f7 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
@@ -2,6 +2,7 @@ import round from 'lodash/round'
 import uniq from 'lodash/uniq'
 import { UAParser } from 'ua-parser-js'
 
+import type { MouseEvent } from 'react'
 import type { StepIdType } from '../../../../form-types'
 
 export const capitalizeFirstLetterAfterNumber = (title: string): string =>
@@ -119,7 +120,7 @@ export const nonePressed = (keysPressed: boolean[]): boolean =>
   keysPressed.every(keyPress => keyPress === false)
 
 export const getMouseClickKeyInfo = (
-  event: React.MouseEvent
+  event: MouseEvent
 ): { isShiftKeyPressed: boolean; isMetaKeyPressed: boolean } => {
   const isMac: boolean = getUserOS() === 'Mac OS'
   const isShiftKeyPressed: boolean = event.shiftKey
diff --git a/protocol-designer/src/pages/Landing/index.tsx b/protocol-designer/src/pages/Landing/index.tsx
index 48d2eb27ead..1e0424c5630 100644
--- a/protocol-designer/src/pages/Landing/index.tsx
+++ b/protocol-designer/src/pages/Landing/index.tsx
@@ -28,6 +28,7 @@ import { useAnnouncements } from '../../organisms/AnnouncementModal/announcement
 import { getLocalStorageItem, localStorageAnnouncementKey } from '../../persist'
 import welcomeImage from '../../assets/images/welcome_page.png'
 
+import type { ChangeEvent, ComponentProps } from 'react'
 import type { ThunkDispatch } from '../../types'
 
 export function Landing(): JSX.Element {
@@ -77,9 +78,7 @@ export function Landing(): JSX.Element {
     }
   }, [metadata, navigate])
 
-  const loadFile = (
-    fileChangeEvent: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const loadFile = (fileChangeEvent: ChangeEvent<HTMLInputElement>): void => {
     dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
   }
 
@@ -165,7 +164,7 @@ const ButtonText = styled.span`
   font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
 `
 
-const StyledNavLink = styled(NavLink)<React.ComponentProps<typeof NavLink>>`
+const StyledNavLink = styled(NavLink)<ComponentProps<typeof NavLink>>`
   color: ${COLORS.white};
   text-decoration: none;
 `
diff --git a/protocol-designer/src/pages/ProtocolOverview/UnusedModalContent.tsx b/protocol-designer/src/pages/ProtocolOverview/UnusedModalContent.tsx
index d9c1a575891..75568b4e9c8 100644
--- a/protocol-designer/src/pages/ProtocolOverview/UnusedModalContent.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/UnusedModalContent.tsx
@@ -6,6 +6,7 @@ import {
 } from '@opentrons/components'
 import { getModuleDisplayName } from '@opentrons/shared-data'
 
+import type { ReactNode } from 'react'
 import type { ModuleOnDeck, PipetteOnDeck } from '../../step-forms'
 import type { HintKey } from '../../tutorial'
 import type { Fixture } from './index'
@@ -20,7 +21,7 @@ interface MissingContent {
 }
 
 export interface WarningContent {
-  content: React.ReactNode
+  content: ReactNode
   heading?: string
   titleElement?: JSX.Element
   hintKey?: HintKey
diff --git a/protocol-designer/src/pages/ProtocolOverview/__tests__/DeckThumbnail.test.tsx b/protocol-designer/src/pages/ProtocolOverview/__tests__/DeckThumbnail.test.tsx
index f8b4aafd9af..bdae73a3e8f 100644
--- a/protocol-designer/src/pages/ProtocolOverview/__tests__/DeckThumbnail.test.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/__tests__/DeckThumbnail.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -8,6 +7,8 @@ import { getInitialDeckSetup } from '../../../step-forms/selectors'
 import { LabwareOnDeck } from '../../../organisms'
 import { getRobotType } from '../../../file-data/selectors'
 import { DeckThumbnail } from '../DeckThumbnail'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type * as Components from '@opentrons/components'
 
@@ -23,12 +24,12 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof DeckThumbnail>) => {
+const render = (props: ComponentProps<typeof DeckThumbnail>) => {
   return renderWithProviders(<DeckThumbnail {...props} />)[0]
 }
 
 describe('DeckThumbnail', () => {
-  let props: React.ComponentProps<typeof DeckThumbnail>
+  let props: ComponentProps<typeof DeckThumbnail>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/ProtocolOverview/__tests__/OffdeckThumbnail.test.tsx b/protocol-designer/src/pages/ProtocolOverview/__tests__/OffdeckThumbnail.test.tsx
index ce96b79923a..027eaaab2a8 100644
--- a/protocol-designer/src/pages/ProtocolOverview/__tests__/OffdeckThumbnail.test.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/__tests__/OffdeckThumbnail.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE, fixture12Trough } from '@opentrons/shared-data'
@@ -11,6 +10,7 @@ import { getInitialDeckSetup } from '../../../step-forms/selectors'
 import { getAllWellContentsForActiveItem } from '../../../top-selectors/well-contents'
 import { OffDeckThumbnail } from '../OffdeckThumbnail'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type * as Components from '@opentrons/components'
 
@@ -26,14 +26,14 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof OffDeckThumbnail>) => {
+const render = (props: ComponentProps<typeof OffDeckThumbnail>) => {
   return renderWithProviders(<OffDeckThumbnail {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('OffDeckThumbnail', () => {
-  let props: React.ComponentProps<typeof OffDeckThumbnail>
+  let props: ComponentProps<typeof OffDeckThumbnail>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/step-forms/selectors/index.ts b/protocol-designer/src/step-forms/selectors/index.ts
index 2fe25dc790f..d5a2c308329 100644
--- a/protocol-designer/src/step-forms/selectors/index.ts
+++ b/protocol-designer/src/step-forms/selectors/index.ts
@@ -29,6 +29,7 @@ import { getProfileItemsHaveErrors } from '../utils/getProfileItemsHaveErrors'
 import * as featureFlagSelectors from '../../feature-flags/selectors'
 import { denormalizePipetteEntities, getHydratedForm } from '../utils'
 import { selectors as labwareDefSelectors } from '../../labware-defs'
+import type { ComponentProps } from 'react'
 import type { Selector } from 'reselect'
 import type {
   AdditionalEquipmentEntities,
@@ -400,7 +401,7 @@ export const getEquippedPipetteOptions: Selector<
   )
 })
 // Formats pipette data specifically for file page InstrumentGroup component
-type PipettesForInstrumentGroup = React.ComponentProps<typeof InstrumentGroup>
+type PipettesForInstrumentGroup = ComponentProps<typeof InstrumentGroup>
 export const getPipettesForInstrumentGroup: Selector<
   BaseState,
   PipettesForInstrumentGroup
diff --git a/protocol-designer/src/steplist/formLevel/errors.ts b/protocol-designer/src/steplist/formLevel/errors.ts
index add7662903a..484690e7e37 100644
--- a/protocol-designer/src/steplist/formLevel/errors.ts
+++ b/protocol-designer/src/steplist/formLevel/errors.ts
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { MAGNETIC_MODULE_V1, MAGNETIC_MODULE_V2 } from '@opentrons/shared-data'
 
 import {
@@ -17,6 +15,7 @@ import { canPipetteUseLabware } from '../../utils'
 import { getWellRatio } from '../utils'
 import { getTimeFromForm } from '../utils/getTimeFromForm'
 
+import type { ReactNode } from 'react'
 import type { LabwareDefinition2, PipetteV2Specs } from '@opentrons/shared-data'
 import type { LabwareEntities, PipetteEntity } from '@opentrons/step-generation'
 import type { StepFieldName } from '../../form-types'
@@ -51,7 +50,7 @@ export type FormErrorKey =
 
 export interface FormError {
   title: string
-  body?: React.ReactNode
+  body?: ReactNode
   dependentFields: StepFieldName[]
   showAtField?: boolean
   showAtForm?: boolean
diff --git a/protocol-designer/src/steplist/formLevel/profileErrors.ts b/protocol-designer/src/steplist/formLevel/profileErrors.ts
index d29a6b67708..dee8090dc8d 100644
--- a/protocol-designer/src/steplist/formLevel/profileErrors.ts
+++ b/protocol-designer/src/steplist/formLevel/profileErrors.ts
@@ -1,13 +1,15 @@
 import uniqBy from 'lodash/uniqBy'
 import { THERMOCYCLER_PROFILE } from '../../constants'
 import { PROFILE_STEP } from '../../form-types'
+
+import type { ReactNode } from 'react'
 import type { ProfileStepItem } from '../../form-types'
 
 // TODO: real HydratedFormData type
 type HydratedFormData = any
 export interface ProfileFormError {
   title: string
-  body?: React.ReactNode
+  body?: ReactNode
   dependentProfileFields: string[]
 }
 type ProfileFormErrorKey = 'INVALID_PROFILE_DURATION'
diff --git a/protocol-designer/src/types.ts b/protocol-designer/src/types.ts
index 274f38948ac..3d19d320b4c 100644
--- a/protocol-designer/src/types.ts
+++ b/protocol-designer/src/types.ts
@@ -1,3 +1,4 @@
+import type { FC } from 'react'
 import type { OutputSelector } from 'reselect'
 import type { NozzleConfigurationStyle } from '@opentrons/shared-data'
 import type { RootState as Analytics } from './analytics'
@@ -51,7 +52,7 @@ export interface RouteProps {
   /** the component rendered by a route match
    * drop developed components into slots held by placeholder div components
    * */
-  Component: React.FC
+  Component: FC
   /** a route/page name to render in the nav bar
    */
   name: string
diff --git a/robot-server/robot_server/app_setup.py b/robot-server/robot_server/app_setup.py
index 2a4d8b1f3da..265a6270033 100644
--- a/robot-server/robot_server/app_setup.py
+++ b/robot-server/robot_server/app_setup.py
@@ -114,7 +114,7 @@ async def _lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
 )
 
 # main router
-app.include_router(router=router)
+router.install_on_app(app)
 
 
 def _get_persistence_directory(settings: RobotServerSettings) -> Optional[Path]:
diff --git a/robot-server/robot_server/client_data/router.py b/robot-server/robot_server/client_data/router.py
index 4a2850cb8c1..847c5da59a9 100644
--- a/robot-server/robot_server/client_data/router.py
+++ b/robot-server/robot_server/client_data/router.py
@@ -4,6 +4,7 @@
 from typing import Annotated, Literal
 
 import fastapi
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.client_data.store import (
     ClientData,
@@ -18,7 +19,7 @@
     get_client_data_publisher,
 )
 
-router = fastapi.APIRouter()
+router = LightRouter()
 
 
 Key = Annotated[
diff --git a/robot-server/robot_server/commands/router.py b/robot-server/robot_server/commands/router.py
index 5d99f3e04f7..4d23bb73fbe 100644
--- a/robot-server/robot_server/commands/router.py
+++ b/robot-server/robot_server/commands/router.py
@@ -1,7 +1,8 @@
 """Router for top-level /commands endpoints."""
 from typing import Annotated, Final, List, Literal, Optional, cast
 
-from fastapi import APIRouter, Depends, Query, status
+from fastapi import Depends, Query, status
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.protocol_engine import CommandIntent
 from opentrons.protocol_engine.errors import CommandDoesNotExistError
@@ -25,7 +26,7 @@
 _DEFAULT_COMMAND_LIST_LENGTH: Final = 20
 
 
-commands_router = APIRouter()
+commands_router = LightRouter()
 
 
 class CommandNotFound(ErrorDetails):
diff --git a/robot-server/robot_server/data_files/router.py b/robot-server/robot_server/data_files/router.py
index f9c61afb77a..ba5cac2f7fd 100644
--- a/robot-server/robot_server/data_files/router.py
+++ b/robot-server/robot_server/data_files/router.py
@@ -4,8 +4,9 @@
 from textwrap import dedent
 from typing import Annotated, Optional, Literal, Union
 
-from fastapi import APIRouter, UploadFile, File, Form, Depends, Response, status
+from fastapi import UploadFile, File, Form, Depends, Response, status
 from opentrons.protocol_reader import FileHasher, FileReaderWriter
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.service.json_api import (
     SimpleBody,
@@ -32,7 +33,7 @@
 from ..protocols.dependencies import get_file_hasher, get_file_reader_writer
 from ..service.dependencies import get_current_time, get_unique_id
 
-datafiles_router = APIRouter()
+datafiles_router = LightRouter()
 
 
 class MultipleDataFileSources(ErrorDetails):
diff --git a/robot-server/robot_server/deck_configuration/router.py b/robot-server/robot_server/deck_configuration/router.py
index 77ad38a3975..ce80acafb2a 100644
--- a/robot-server/robot_server/deck_configuration/router.py
+++ b/robot-server/robot_server/deck_configuration/router.py
@@ -6,6 +6,7 @@
 
 import fastapi
 from starlette.status import HTTP_422_UNPROCESSABLE_ENTITY
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons_shared_data.deck.types import DeckDefinitionV5
 
@@ -21,7 +22,7 @@
 from .store import DeckConfigurationStore
 
 
-router = fastapi.APIRouter()
+router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/error_recovery/settings/router.py b/robot-server/robot_server/error_recovery/settings/router.py
index 27dde185f0b..d3c4467a301 100644
--- a/robot-server/robot_server/error_recovery/settings/router.py
+++ b/robot-server/robot_server/error_recovery/settings/router.py
@@ -4,13 +4,14 @@
 from typing import Annotated
 
 import fastapi
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.service.json_api import PydanticResponse, RequestModel, SimpleBody
 from .models import RequestData, ResponseData
 from .store import ErrorRecoverySettingStore, get_error_recovery_setting_store
 
 
-router = fastapi.APIRouter()
+router = LightRouter()
 _PATH = "/errorRecovery/settings"
 
 
diff --git a/robot-server/robot_server/instruments/router.py b/robot-server/robot_server/instruments/router.py
index e059876eb37..d0cc4a212ed 100644
--- a/robot-server/robot_server/instruments/router.py
+++ b/robot-server/robot_server/instruments/router.py
@@ -1,7 +1,8 @@
 """Instruments routes."""
 from typing import Annotated, Optional, Dict, List, cast
 
-from fastapi import APIRouter, status, Depends
+from fastapi import status, Depends
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.hardware_control.instruments.ot3.instrument_calibration import (
     PipetteOffsetSummary,
@@ -50,7 +51,7 @@
 
 from opentrons.hardware_control import OT3HardwareControlAPI
 
-instruments_router = APIRouter()
+instruments_router = LightRouter()
 
 
 def _pipette_dict_to_pipette_res(
diff --git a/robot-server/robot_server/labware_offsets/router.py b/robot-server/robot_server/labware_offsets/router.py
index 241f5b31505..6aca03e4b18 100644
--- a/robot-server/robot_server/labware_offsets/router.py
+++ b/robot-server/robot_server/labware_offsets/router.py
@@ -6,6 +6,8 @@
 from typing import Annotated, Literal
 
 import fastapi
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from opentrons.protocol_engine import LabwareOffset, LabwareOffsetCreate, ModuleModel
 from opentrons.types import DeckSlotName
 
@@ -24,12 +26,12 @@
 from .fastapi_dependencies import get_labware_offset_store
 
 
-router = fastapi.APIRouter(prefix="/labwareOffsets")
+router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
     router.post,
-    path="",
+    path="/labwareOffsets",
     summary="Store a labware offset",
     description=textwrap.dedent(
         """\
@@ -63,7 +65,7 @@ async def post_labware_offset(  # noqa: D103
 
 @PydanticResponse.wrap_route(
     router.get,
-    path="",
+    path="/labwareOffsets",
     summary="Search for labware offsets",
     description=(
         "Get a filtered list of all the labware offsets currently stored on the robot."
@@ -158,7 +160,7 @@ async def get_labware_offsets(  # noqa: D103
 
 @PydanticResponse.wrap_route(
     router.delete,
-    path="/{id}",
+    path="/labwareOffsets/{id}",
     summary="Delete a single labware offset",
     description="Delete a single labware offset. The deleted offset is returned.",
 )
@@ -181,7 +183,7 @@ async def delete_labware_offset(  # noqa: D103
 
 @PydanticResponse.wrap_route(
     router.delete,
-    path="",
+    path="/labwareOffsets",
     summary="Delete all labware offsets",
 )
 async def delete_all_labware_offsets(  # noqa: D103
diff --git a/robot-server/robot_server/maintenance_runs/router/__init__.py b/robot-server/robot_server/maintenance_runs/router/__init__.py
index 11cdd30950c..b017a0a6adf 100644
--- a/robot-server/robot_server/maintenance_runs/router/__init__.py
+++ b/robot-server/robot_server/maintenance_runs/router/__init__.py
@@ -1,12 +1,12 @@
 """Maintenance Runs router."""
-from fastapi import APIRouter
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from .base_router import base_router
 
 from .commands_router import commands_router
 from .labware_router import labware_router
 
-maintenance_runs_router = APIRouter()
+maintenance_runs_router = LightRouter()
 
 maintenance_runs_router.include_router(base_router)
 maintenance_runs_router.include_router(commands_router)
diff --git a/robot-server/robot_server/maintenance_runs/router/base_router.py b/robot-server/robot_server/maintenance_runs/router/base_router.py
index 6f6abaf89b5..3dd2060c2cd 100644
--- a/robot-server/robot_server/maintenance_runs/router/base_router.py
+++ b/robot-server/robot_server/maintenance_runs/router/base_router.py
@@ -8,8 +8,9 @@
 from typing import Annotated, Optional, Callable
 from typing_extensions import Literal
 
-from fastapi import APIRouter, Depends, status
+from fastapi import Depends, status
 from pydantic import BaseModel, Field
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.errors.error_responses import ErrorDetails, ErrorBody
 from robot_server.service.dependencies import get_current_time, get_unique_id
@@ -42,7 +43,7 @@
 from robot_server.service.notifications import get_pe_notify_publishers
 
 log = logging.getLogger(__name__)
-base_router = APIRouter()
+base_router = LightRouter()
 
 
 # TODO (spp, 2023-04-10): move all error types from maintenance & regular runs
diff --git a/robot-server/robot_server/maintenance_runs/router/commands_router.py b/robot-server/robot_server/maintenance_runs/router/commands_router.py
index 6e043006ec3..0bb3d64c192 100644
--- a/robot-server/robot_server/maintenance_runs/router/commands_router.py
+++ b/robot-server/robot_server/maintenance_runs/router/commands_router.py
@@ -3,7 +3,8 @@
 from typing import Annotated, Optional, Union
 from typing_extensions import Final, Literal
 
-from fastapi import APIRouter, Depends, Query, status
+from fastapi import Depends, Query, status
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.protocol_engine import (
     CommandPointer,
@@ -39,7 +40,7 @@
 
 _DEFAULT_COMMAND_LIST_LENGTH: Final = 20
 
-commands_router = APIRouter()
+commands_router = LightRouter()
 
 
 class CommandNotFound(ErrorDetails):
diff --git a/robot-server/robot_server/maintenance_runs/router/labware_router.py b/robot-server/robot_server/maintenance_runs/router/labware_router.py
index 61877c1ab46..53dce4ae6eb 100644
--- a/robot-server/robot_server/maintenance_runs/router/labware_router.py
+++ b/robot-server/robot_server/maintenance_runs/router/labware_router.py
@@ -2,9 +2,10 @@
 from typing import Annotated
 import logging
 
-from fastapi import APIRouter, Depends, status
+from fastapi import Depends, status
 
 from opentrons_shared_data.labware.labware_definition import LabwareDefinition
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.protocol_engine import LabwareOffsetCreate, LabwareOffset
 
@@ -17,7 +18,7 @@
 from .base_router import RunNotFound, RunNotIdle, get_run_data_from_url
 
 log = logging.getLogger(__name__)
-labware_router = APIRouter()
+labware_router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/modules/router.py b/robot-server/robot_server/modules/router.py
index 2f566eb7207..8bbf8a6ae7a 100644
--- a/robot-server/robot_server/modules/router.py
+++ b/robot-server/robot_server/modules/router.py
@@ -1,7 +1,9 @@
 """Modules routes."""
-from fastapi import APIRouter, Depends, status
 from typing import Annotated, List, Dict
 
+from fastapi import Depends, status
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from opentrons.hardware_control import HardwareControlAPI
 from opentrons.hardware_control.modules import module_calibration
 from opentrons.protocol_engine.types import Vec3f
@@ -21,7 +23,7 @@
 from .module_identifier import ModuleIdentifier
 from .module_data_mapper import ModuleDataMapper
 
-modules_router = APIRouter()
+modules_router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/protocols/router.py b/robot-server/robot_server/protocols/router.py
index 28294f99c7d..574f9621004 100644
--- a/robot-server/robot_server/protocols/router.py
+++ b/robot-server/robot_server/protocols/router.py
@@ -15,7 +15,6 @@
 from opentrons.util.performance_helpers import TrackingFunctions
 
 from fastapi import (
-    APIRouter,
     Depends,
     File,
     HTTPException,
@@ -26,6 +25,7 @@
 )
 from fastapi.responses import PlainTextResponse
 from pydantic import BaseModel, Field
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.protocol_reader import (
     ProtocolReader,
@@ -151,7 +151,7 @@ class ProtocolLinks(BaseModel):
     )
 
 
-protocols_router = APIRouter()
+protocols_router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/robot/control/router.py b/robot-server/robot_server/robot/control/router.py
index a39e7fcab7e..037ef1dc96a 100644
--- a/robot-server/robot_server/robot/control/router.py
+++ b/robot-server/robot_server/robot/control/router.py
@@ -1,7 +1,9 @@
 """Router for /robot/control endpoints."""
-from fastapi import APIRouter, status, Depends
 from typing import Annotated, TYPE_CHECKING
 
+from fastapi import status, Depends
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from opentrons_shared_data.robot.types import RobotType
 from opentrons_shared_data.robot.types import RobotTypeEnum
 from robot_server.hardware import get_robot_type
@@ -22,7 +24,7 @@
 if TYPE_CHECKING:
     from opentrons.hardware_control.ot3api import OT3API  # noqa: F401
 
-control_router = APIRouter()
+control_router = LightRouter()
 
 
 async def _get_estop_status_response(
diff --git a/robot-server/robot_server/robot/router.py b/robot-server/robot_server/robot/router.py
index 9fff861d4a6..6c6dd6acc05 100644
--- a/robot-server/robot_server/robot/router.py
+++ b/robot-server/robot_server/robot/router.py
@@ -1,8 +1,8 @@
 """Router for /robot endpoints."""
-from fastapi import APIRouter
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from .control.router import control_router
 
-robot_router = APIRouter()
+robot_router = LightRouter()
 
 robot_router.include_router(router=control_router)
diff --git a/robot-server/robot_server/router.py b/robot-server/robot_server/router.py
index 49d835d7eb9..ab5af067637 100644
--- a/robot-server/robot_server/router.py
+++ b/robot-server/robot_server/router.py
@@ -1,5 +1,7 @@
 """Application routes."""
-from fastapi import APIRouter, Depends, status
+from fastapi import Depends, status
+from server_utils.fastapi_utils.light_router import LightRouter
+
 
 from .constants import V1_TAG
 from .errors.error_responses import LegacyErrorResponse
@@ -26,24 +28,31 @@
 from .subsystems.router import subsystems_router
 from .system.router import system_router
 
-router = APIRouter()
+router = LightRouter()
 
 # Legacy routes
 router.include_router(
     router=legacy_routes,
     tags=[V1_TAG],
+    # todo(mm, 2024-12-19): This `responses` setting is preventing us from
+    # porting legacy_routes from fastapi.APIRouter to our LightRouter.
+    # Either teach LightRouter how to handle `responses` or stop doing
+    # a custom 422 response on these endpoints.
     responses={
         status.HTTP_422_UNPROCESSABLE_ENTITY: {
             "model": LegacyErrorResponse,
         }
     },
 )
-
 router.include_router(
     router=health_router,
     tags=["Health", V1_TAG],
     dependencies=[Depends(check_version_header)],
     responses={
+        # todo(mm, 2024-12-19): This `responses` setting is preventing us from
+        # porting health_router from fastapi.APIRouter to our LightRouter.
+        # Either teach LightRouter how to handle `responses` or stop doing
+        # a custom 422 response on these endpoints.
         status.HTTP_422_UNPROCESSABLE_ENTITY: {
             "model": LegacyErrorResponse,
         }
diff --git a/robot-server/robot_server/runs/router/__init__.py b/robot-server/robot_server/runs/router/__init__.py
index d7a1640edb8..fa8be0cee67 100644
--- a/robot-server/robot_server/runs/router/__init__.py
+++ b/robot-server/robot_server/runs/router/__init__.py
@@ -1,5 +1,5 @@
 """Runs router."""
-from fastapi import APIRouter
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from .base_router import base_router
 from .commands_router import commands_router
@@ -7,7 +7,7 @@
 from .labware_router import labware_router
 from .error_recovery_policy_router import error_recovery_policy_router
 
-runs_router = APIRouter()
+runs_router = LightRouter()
 
 runs_router.include_router(base_router)
 runs_router.include_router(commands_router)
diff --git a/robot-server/robot_server/runs/router/actions_router.py b/robot-server/robot_server/runs/router/actions_router.py
index 80a461f3b59..0bfb16185c7 100644
--- a/robot-server/robot_server/runs/router/actions_router.py
+++ b/robot-server/robot_server/runs/router/actions_router.py
@@ -1,10 +1,12 @@
 """Router for /runs actions endpoints."""
 import logging
 
-from fastapi import APIRouter, Depends, status
 from datetime import datetime
 from typing import Annotated, Literal, Union
 
+from fastapi import Depends, status
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from robot_server.errors.error_responses import ErrorDetails, ErrorBody
 from robot_server.service.dependencies import get_current_time, get_unique_id
 from robot_server.service.json_api import RequestModel, SimpleBody, PydanticResponse
@@ -37,7 +39,7 @@
 )
 
 log = logging.getLogger(__name__)
-actions_router = APIRouter()
+actions_router = LightRouter()
 
 
 class RunActionNotAllowed(ErrorDetails):
diff --git a/robot-server/robot_server/runs/router/base_router.py b/robot-server/robot_server/runs/router/base_router.py
index c51c02de1e4..8e478c08de9 100644
--- a/robot-server/robot_server/runs/router/base_router.py
+++ b/robot-server/robot_server/runs/router/base_router.py
@@ -8,8 +8,10 @@
 from textwrap import dedent
 from typing import Annotated, Callable, Final, Literal, Optional, Union
 
-from fastapi import APIRouter, Depends, status, Query
+from fastapi import Depends, status, Query
 from pydantic import BaseModel, Field
+from server_utils.fastapi_utils.light_router import LightRouter
+
 
 from opentrons_shared_data.errors import ErrorCodes
 from opentrons_shared_data.robot.types import RobotTypeEnum
@@ -87,7 +89,7 @@
 from robot_server.service.notifications import get_pe_notify_publishers
 
 log = logging.getLogger(__name__)
-base_router = APIRouter()
+base_router = LightRouter()
 
 _DEFAULT_COMMAND_ERROR_LIST_LENGTH: Final = 20
 
diff --git a/robot-server/robot_server/runs/router/commands_router.py b/robot-server/robot_server/runs/router/commands_router.py
index 55e1826d5e8..b2cbb79b2bb 100644
--- a/robot-server/robot_server/runs/router/commands_router.py
+++ b/robot-server/robot_server/runs/router/commands_router.py
@@ -2,7 +2,8 @@
 import textwrap
 from typing import Annotated, Final, Literal, Optional, Union
 
-from fastapi import APIRouter, Depends, Query, status
+from fastapi import Depends, Query, status
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.protocol_engine import (
     CommandPointer,
@@ -44,7 +45,7 @@
 
 _DEFAULT_COMMAND_LIST_LENGTH: Final = 20
 
-commands_router = APIRouter()
+commands_router = LightRouter()
 
 
 class CommandNotFound(ErrorDetails):
diff --git a/robot-server/robot_server/runs/router/error_recovery_policy_router.py b/robot-server/robot_server/runs/router/error_recovery_policy_router.py
index a5c3ae0543d..2b1c786b9d4 100644
--- a/robot-server/robot_server/runs/router/error_recovery_policy_router.py
+++ b/robot-server/robot_server/runs/router/error_recovery_policy_router.py
@@ -4,7 +4,8 @@
 from textwrap import dedent
 from typing import Annotated
 
-from fastapi import status, APIRouter, Depends
+from fastapi import status, Depends
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.errors.error_responses import ErrorBody
 from robot_server.service.json_api.request import RequestModel
@@ -20,7 +21,7 @@
 from ..error_recovery_models import ErrorRecoveryPolicy
 
 
-error_recovery_policy_router = APIRouter()
+error_recovery_policy_router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/runs/router/labware_router.py b/robot-server/robot_server/runs/router/labware_router.py
index e3d81f541f6..f9264da51e6 100644
--- a/robot-server/robot_server/runs/router/labware_router.py
+++ b/robot-server/robot_server/runs/router/labware_router.py
@@ -3,10 +3,12 @@
 import logging
 from typing import Annotated, Union
 
-from fastapi import APIRouter, Depends, status
+from fastapi import Depends, status
 
 from opentrons_shared_data.labware.labware_definition import LabwareDefinition
 
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from opentrons.protocol_engine import LabwareOffsetCreate, LabwareOffset
 
 from robot_server.errors.error_responses import ErrorBody
@@ -23,7 +25,7 @@
 from .base_router import RunNotFound, RunStopped, RunNotIdle, get_run_data_from_url
 
 log = logging.getLogger(__name__)
-labware_router = APIRouter()
+labware_router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/service/labware/router.py b/robot-server/robot_server/service/labware/router.py
index a90ed1ca867..6d44f2faeee 100644
--- a/robot-server/robot_server/service/labware/router.py
+++ b/robot-server/robot_server/service/labware/router.py
@@ -6,7 +6,8 @@
 from typing import Annotated, Optional
 from typing_extensions import Literal, NoReturn
 
-from fastapi import APIRouter, Depends, status
+from fastapi import Depends, status
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons_shared_data.errors import ErrorCodes
 from robot_server.errors.error_responses import ErrorDetails, ErrorBody
@@ -15,7 +16,7 @@
 from robot_server.service.errors import RobotServerError, CommonErrorDef
 
 
-router = APIRouter()
+router = LightRouter()
 
 
 class LabwareCalibrationEndpointsRemoved(ErrorDetails):
diff --git a/robot-server/robot_server/subsystems/router.py b/robot-server/robot_server/subsystems/router.py
index 0ce265cc7e6..950cf0505e2 100644
--- a/robot-server/robot_server/subsystems/router.py
+++ b/robot-server/robot_server/subsystems/router.py
@@ -3,9 +3,11 @@
 from datetime import datetime
 from typing import Annotated, Optional, TYPE_CHECKING
 
-from fastapi import APIRouter, status, Depends, Response, Request
+from fastapi import status, Depends, Response, Request
 from typing_extensions import Literal
 
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from robot_server.service.json_api import (
     SimpleMultiBody,
     PydanticResponse,
@@ -45,7 +47,7 @@
 if TYPE_CHECKING:
     from opentrons.hardware_control.ot3api import OT3API  # noqa: F401
 
-subsystems_router = APIRouter()
+subsystems_router = LightRouter()
 
 
 def status_route_for(subsystem: SubSystem) -> str:
diff --git a/robot-server/robot_server/system/router.py b/robot-server/robot_server/system/router.py
index fab9b598ba3..2735dfca01d 100644
--- a/robot-server/robot_server/system/router.py
+++ b/robot-server/robot_server/system/router.py
@@ -5,7 +5,8 @@
 - /system/time: allows the client to read & update robot system time
 """
 from datetime import datetime
-from fastapi import APIRouter
+
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.service.json_api.resource_links import ResourceLinkKey, ResourceLink
 
@@ -13,7 +14,7 @@
 from .time_utils import get_system_time, set_system_time
 
 
-system_router = APIRouter()
+system_router = LightRouter()
 """Router for /system endpoints."""
 
 
diff --git a/server-utils/server_utils/fastapi_utils/light_router.py b/server-utils/server_utils/fastapi_utils/light_router.py
new file mode 100644
index 00000000000..82d82893151
--- /dev/null
+++ b/server-utils/server_utils/fastapi_utils/light_router.py
@@ -0,0 +1,306 @@
+"""See the `LightRouter` class."""
+
+from __future__ import annotations
+
+import dataclasses
+import enum
+import typing
+import typing_extensions
+
+import fastapi
+
+
+_FASTAPI_ROUTE_METHOD_NAMES = {
+    "get",
+    "put",
+    "post",
+    "delete",
+    "options",
+    "head",
+    "patch",
+    "trace",
+}
+
+if typing.TYPE_CHECKING:
+    # This is some chicanery so that @router.get(...), @router.post(...), etc. give us
+    # type-checking and autocomplete that exactly match the regular FastAPI version.
+    # These methods have a lot of parameters with complicated types and it would be
+    # a bear to manually keep them in sync with FastAPI.
+
+    _P = typing.ParamSpec("_P")
+    _ReturnT = typing.TypeVar("_ReturnT")
+
+    # `_CallableLike(FastAPI.foo)` produces a callable with the same signature
+    # as `FastAPI.foo()`.
+    class _CallableLike(typing.Generic[_P, _ReturnT]):
+        def __init__(
+            self,
+            method_to_mimic: typing.Callable[
+                typing.Concatenate[
+                    fastapi.FastAPI,  # The `self` parameter, which we throw away.
+                    _P,  # The actual args and kwargs, which we preserve.
+                ],
+                _ReturnT,
+            ],
+        ) -> None:
+            raise NotImplementedError("This is only for type-checking, not runtime.")
+
+        def __call__(self, *args: _P.args, **kwargs: _P.kwargs) -> _ReturnT:
+            raise NotImplementedError("This is only for type-checking, not runtime.")
+
+    class _FastAPIRouteMethods:
+        get: typing.Final = _CallableLike(fastapi.FastAPI.get)
+        put: typing.Final = _CallableLike(fastapi.FastAPI.put)
+        post: typing.Final = _CallableLike(fastapi.FastAPI.post)
+        delete: typing.Final = _CallableLike(fastapi.FastAPI.delete)
+        options: typing.Final = _CallableLike(fastapi.FastAPI.options)
+        head: typing.Final = _CallableLike(fastapi.FastAPI.head)
+        patch: typing.Final = _CallableLike(fastapi.FastAPI.patch)
+        trace: typing.Final = _CallableLike(fastapi.FastAPI.trace)
+
+else:
+
+    class _FastAPIRouteMethods:
+        pass
+
+
+class LightRouter(_FastAPIRouteMethods):
+    """A lightweight drop-in replacement for `fastapi.APIRouter`.
+
+    Use it like `fastapi.APIRouter`:
+
+        foo_router = LightRouter()
+
+        @router.get("/foo/{id}")
+        def get_health(id: str) -> Response:
+            ...
+
+        bar_router = ...
+
+        root_router = LightRouter()
+        root_router.include_router(foo_router)
+        root_router.include_router(bar_router)
+
+        app = fastapi.FastAPI()
+        root_router.install_on_app(app)
+
+    Rationale:
+
+    With FastAPI's standard `FastAPI` and `APIRouter` classes, the `.include_router()`
+    method has a lot of overhead, accounting for something like 30-40% of
+    robot-server's startup time, which is multiple minutes long at the time of writing.
+    (https://github.com/pydantic/pydantic/issues/6768#issuecomment-1644532429)
+
+    We could avoid the overhead by adding endpoints directly to the top-level FastAPI
+    app, "flat," instead of using `.include_router()`. But that would be bad for code
+    organization; we want to keep our tree of sub-routers. So this class reimplements
+    the important parts of `fastapi.APIRouter`, so we can keep our router tree, but
+    in a lighter-weight way.
+
+    When you call `@router.get()` or `router.include_router()` on this class, it appends
+    to a lightweight internal structure and completely avoids slow calls into FastAPI.
+    Later on, when you do `router.install_on_app()`, everything in the tree is added to
+    the FastAPI app.
+    """
+
+    def __init__(self) -> None:
+        self._routes: list[_Endpoint | _IncludedRouter] = []
+
+    def __getattr__(self, name: str) -> object:
+        """Supply the optimized version of `@router.get()`, `@router.post()`, etc.
+
+        See the FastAPI docs for usage details.
+        """
+        if name in _FASTAPI_ROUTE_METHOD_NAMES:
+            return _EndpointCaptor(method_name=name, on_capture=self._routes.append)
+        else:
+            raise AttributeError(name=name)
+
+    def include_router(
+        self,
+        router: LightRouter | fastapi.APIRouter,
+        **kwargs: typing_extensions.Unpack[_RouterIncludeKwargs],
+    ) -> None:
+        """The optimized version of `fastapi.APIRouter.include_router()`.
+
+        See the FastAPI docs for argument details.
+        """  # noqa: D402
+        self._routes.append(_IncludedRouter(router=router, inclusion_kwargs=kwargs))
+
+    def install_on_app(
+        self,
+        app: fastapi.FastAPI,
+        **kwargs: typing_extensions.Unpack[_RouterIncludeKwargs],
+    ) -> None:
+        """The optimized version of `fastapi.FastAPI.include_router()`.
+
+        See the FastAPI docs for argument details..
+        """
+        for route in self._routes:
+            if isinstance(route, _IncludedRouter):
+                router = route.router
+                combined_kwargs = _merge_kwargs(kwargs, route.inclusion_kwargs)
+                if isinstance(router, fastapi.APIRouter):
+                    app.include_router(router, **combined_kwargs)
+                elif isinstance(route.router, LightRouter):
+                    router.install_on_app(app, **combined_kwargs)
+            else:
+                typing_extensions.assert_type(route, _Endpoint)
+                combined_kwargs = _merge_kwargs(
+                    kwargs,
+                    route.kwargs,  # type: ignore[arg-type]
+                )
+                fastapi_method = getattr(app, route.method_name)
+                fastapi_decorator = fastapi_method(*route.args, **combined_kwargs)
+                fastapi_decorator(route.function)
+
+
+class _RouterIncludeKwargs(typing.TypedDict):
+    """The keyword arguments of FastAPI's `.include_router()` method.
+
+    (At least the arguments that we actually use, anyway.)
+    """
+
+    # Arguments with defaults should be annotated as `NotRequired`.
+    # For example, `foo: str | None = None` becomes `NotRequired[str | None]`.
+
+    tags: typing_extensions.NotRequired[list[str | enum.Enum] | None]
+    responses: typing_extensions.NotRequired[
+        dict[int | str, dict[str, typing.Any]] | None
+    ]
+    dependencies: typing_extensions.NotRequired[
+        typing.Sequence[
+            # FastAPI does not publicly expose the type of the result of a
+            # Depends(...) call, so this needs to be Any.
+            typing.Any
+        ]
+        | None
+    ]
+
+
+def _merge_kwargs(
+    from_parent: _RouterIncludeKwargs, from_child: _RouterIncludeKwargs
+) -> _RouterIncludeKwargs:
+    """Merge kwargs from different levels of a FastAPI router tree.
+
+    FastAPI keyword arguments can be specified at multiple levels in the router tree.
+    For example, the top-level router, subrouters, and finally the endpoint function
+    can each specify their own `tags`. The different levels need to be merged
+    carefully and in argument-specific ways if we want to match FastAPI behavior.
+    For example, the final `tags` value should be the concatenation of the values
+    from all levels.
+    """
+    merge_result: _RouterIncludeKwargs = {}
+    remaining_from_parent = from_parent.copy()
+    remaining_from_child = from_child.copy()
+
+    # When we know how to merge a specific argument's values, do so.
+    # This takes care to leave the argument unset if it's unset in both parent and
+    # child, in order to leave the defaulting up to FastAPI.
+    if "tags" in remaining_from_parent or "tags" in remaining_from_child:
+        merge_result["tags"] = [
+            *(remaining_from_parent.get("tags") or []),
+            *(remaining_from_child.get("tags") or []),
+        ]
+        remaining_from_parent.pop("tags", None)
+        remaining_from_child.pop("tags", None)
+
+    # For any argument whose values we don't know how to merge, we can just pass it
+    # along opaquely, as long as the parent and child aren't both trying to set it.
+    #
+    # If the parent and child *are* both trying to set it, then we have a problem.
+    # It would likely be wrong to arbitrarily choose one to override the other,
+    # so we can only raise an error.
+    colliding_keys = set(remaining_from_parent.keys()).intersection(
+        remaining_from_child.keys()
+    )
+    if not colliding_keys:
+        merge_result.update(remaining_from_parent)
+        merge_result.update(remaining_from_child)
+    else:
+        a_collisions: dict[object, object] = {
+            k: remaining_from_parent[k] for k in colliding_keys  # type: ignore[literal-required]
+        }
+        b_collisions: dict[object, object] = {
+            k: remaining_from_child[k] for k in colliding_keys  # type: ignore[literal-required]
+        }
+        raise NotImplementedError(
+            f"These FastAPI keyword arguments appear at different levels "
+            f"in the router tree, and we don't know how to merge their values:\n"
+            f"{a_collisions}\n{b_collisions}\n"
+            f"Modify {__name__} to handle the merge, or avoid the problem by "
+            f"setting the argument at only one level of the router tree."
+        )
+
+    return merge_result
+
+
+@dataclasses.dataclass
+class _IncludedRouter:
+    router: fastapi.APIRouter | LightRouter
+    inclusion_kwargs: _RouterIncludeKwargs
+
+
+_DecoratedFunctionT = typing.TypeVar(
+    "_DecoratedFunctionT", bound=typing.Callable[..., object]
+)
+
+
+class _EndpointCaptor:
+    """A callable that pretends to be a FastAPI path operation decorator.
+
+    `method_name` is the FastAPI method to pretend to be, e.g. "get" or "post".
+
+    Supposing you have an `_EndpointCaptor` named `get`, when this whole enchilada
+    happens:
+
+        @get("/foo/{id}", description="blah blah")
+        def get_some_endpoint(id: str) -> Response:
+            ...
+
+    Then information about the whole enchilada is sent to the `on_capture` callback.
+    """
+
+    def __init__(
+        self,
+        method_name: str,
+        on_capture: typing.Callable[[_Endpoint], None],
+    ) -> None:
+        self._method_name = method_name
+        self._on_capture = on_capture
+
+    def __call__(
+        self, *fastapi_decorator_args: object, **fastapi_decorator_kwargs: object
+    ) -> typing.Callable[[_DecoratedFunctionT], _DecoratedFunctionT]:
+        def decorate(decorated_function: _DecoratedFunctionT) -> _DecoratedFunctionT:
+            self._on_capture(
+                _Endpoint(
+                    method_name=self._method_name,
+                    args=fastapi_decorator_args,
+                    kwargs=fastapi_decorator_kwargs,
+                    function=decorated_function,
+                )
+            )
+            return decorated_function
+
+        return decorate
+
+
+@dataclasses.dataclass
+class _Endpoint:
+    """Information about an endpoint that's been added to a router."""
+
+    method_name: str
+    """The name of the method on the FastAPI class, e.g. "get"."""
+
+    args: tuple[object, ...]
+    """The positional arguments passed to the FastAPI method, e.g. the URL path."""
+
+    kwargs: dict[str, object]
+    """The keyword arguments passed to the FastAPI method, e.g. `description`."""
+
+    function: typing.Callable[..., object]
+    """The function actually implementing the logic of the endpoint.
+
+    (The "path operation function", in FastAPI terms.)
+    """