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..120c843cb0d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
@@ -2,13 +2,14 @@ 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 =>
   title.replace(
     /(^[\d\W]*)([a-zA-Z])|(-[a-zA-Z])/g,
     (match, prefix, firstLetter) => {
-      if (prefix) {
+      if (prefix != null) {
         return `${prefix}${firstLetter.toUpperCase()}`
       } else {
         return `${match.charAt(0)}${match.charAt(1).toUpperCase()}`
@@ -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