diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
index db8a4acd005..1471ca4c593 100644
--- a/app/src/App/Navbar.tsx
+++ b/app/src/App/Navbar.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { NavLink, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
@@ -118,7 +118,7 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
     ({ navLinkTo }: RouteProps) => navLinkTo != null
   )
 
-  const debouncedNavigate = React.useCallback(
+  const debouncedNavigate = useCallback(
     debounce((path: string) => {
       navigate(path)
     }, DEBOUNCE_DURATION_MS),
diff --git a/app/src/atoms/Slideout/index.tsx b/app/src/atoms/Slideout/index.tsx
index b834bd1c6e5..53a6888efa0 100644
--- a/app/src/atoms/Slideout/index.tsx
+++ b/app/src/atoms/Slideout/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 
@@ -124,9 +124,9 @@ export const Slideout = (props: SlideoutProps): JSX.Element => {
     multiSlideoutSpecs,
   } = props
   const { t } = useTranslation('shared')
-  const slideOutRef = React.useRef<HTMLDivElement>(null)
-  const [isReachedBottom, setIsReachedBottom] = React.useState<boolean>(false)
-  const hasBeenExpanded = React.useRef<boolean>(isExpanded ?? false)
+  const slideOutRef = useRef<HTMLDivElement>(null)
+  const [isReachedBottom, setIsReachedBottom] = useState<boolean>(false)
+  const hasBeenExpanded = useRef<boolean>(isExpanded ?? false)
   const handleScroll = (): void => {
     if (slideOutRef.current == null) return
     const { scrollTop, scrollHeight, clientHeight } = slideOutRef.current
@@ -137,7 +137,7 @@ export const Slideout = (props: SlideoutProps): JSX.Element => {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleScroll()
   }, [slideOutRef])
 
diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx
index b4a9abaae89..2fdf2e30b7e 100644
--- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx
+++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, renderHook, screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { AlphanumericKeyboard } from '..'
 
-const render = (props: React.ComponentProps<typeof AlphanumericKeyboard>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof AlphanumericKeyboard>) => {
   return renderWithProviders(<AlphanumericKeyboard {...props} />)[0]
 }
 
 describe('AlphanumericKeyboard', () => {
   it('should render alphanumeric keyboard - lower case', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -55,7 +57,7 @@ describe('AlphanumericKeyboard', () => {
     })
   })
   it('should render alphanumeric keyboard - upper case, when clicking ABC key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -103,7 +105,7 @@ describe('AlphanumericKeyboard', () => {
   })
 
   it('should render alphanumeric keyboard - numbers, when clicking number key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -133,7 +135,7 @@ describe('AlphanumericKeyboard', () => {
   })
 
   it('should render alphanumeric keyboard - lower case when layout is numbers and clicking abc ', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -182,7 +184,7 @@ describe('AlphanumericKeyboard', () => {
   })
 
   it('should switch each alphanumeric keyboard properly', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
index 4ab8dab1274..73ec9306fee 100644
--- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
+++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import Keyboard from 'react-simple-keyboard'
 import { useSelector } from 'react-redux'
 import { getAppLanguage } from '/app/redux/config'
@@ -24,7 +24,7 @@ export function AlphanumericKeyboard({
   keyboardRef,
   debug = false, // If true, <ENTER> will input a \n
 }: AlphanumericKeyboardProps): JSX.Element {
-  const [layoutName, setLayoutName] = React.useState<string>('default')
+  const [layoutName, setLayoutName] = useState<string>('default')
   const appLanguage = useSelector(getAppLanguage)
   const onKeyPress = (button: string): void => {
     if (button === '{ABC}') handleShift()
diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx
index 728ae462083..90786ff6a6f 100644
--- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx
+++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, renderHook, screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { FullKeyboard } from '..'
 
-const render = (props: React.ComponentProps<typeof FullKeyboard>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof FullKeyboard>) => {
   return renderWithProviders(<FullKeyboard {...props} />)[0]
 }
 
 describe('FullKeyboard', () => {
   it('should render FullKeyboard keyboard', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -59,7 +61,7 @@ describe('FullKeyboard', () => {
   })
 
   it('should render full keyboard when hitting ABC key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -108,7 +110,7 @@ describe('FullKeyboard', () => {
   })
 
   it('should render full keyboard when hitting 123 key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -158,7 +160,7 @@ describe('FullKeyboard', () => {
   })
 
   it('should render the software keyboards when hitting #+= key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -204,7 +206,7 @@ describe('FullKeyboard', () => {
   })
 
   it('should call mock function when clicking a key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx
index eed2a0b5934..2846930ad1e 100644
--- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx
+++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { KeyboardReact as Keyboard } from 'react-simple-keyboard'
 import { useSelector } from 'react-redux'
 import { getAppLanguage } from '/app/redux/config'
@@ -7,6 +7,8 @@ import {
   layoutCandidates,
   fullKeyboardLayout,
 } from '../constants'
+
+import type { MutableRefObject } from 'react'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
 
 import '../index.css'
@@ -15,7 +17,7 @@ import './index.css'
 // TODO (kk:04/05/2024) add debug to make debugging easy
 interface FullKeyboardProps {
   onChange: (input: string) => void
-  keyboardRef: React.MutableRefObject<KeyboardReactInterface | any>
+  keyboardRef: MutableRefObject<KeyboardReactInterface | any>
   debug?: boolean
 }
 
@@ -24,7 +26,7 @@ export function FullKeyboard({
   keyboardRef,
   debug = false,
 }: FullKeyboardProps): JSX.Element {
-  const [layoutName, setLayoutName] = React.useState<string>('default')
+  const [layoutName, setLayoutName] = useState<string>('default')
   const appLanguage = useSelector(getAppLanguage)
   const handleShift = (button: string): void => {
     switch (button) {
diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx
index b29404ba226..ecdbdf9aa78 100644
--- a/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx
+++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { describe, it, vi, expect } from 'vitest'
 import { fireEvent, renderHook, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { IndividualKey } from '..'
 
-const render = (props: React.ComponentProps<typeof IndividualKey>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof IndividualKey>) => {
   return renderWithProviders(<IndividualKey {...props} />)[0]
 }
 
 describe('IndividualKey', () => {
   it('should render the text key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -22,7 +24,7 @@ describe('IndividualKey', () => {
   })
 
   it('should call mock function when clicking text key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx
index 1bda1caaa71..722f50dfcf1 100644
--- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx
+++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, renderHook, screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { NumericalKeyboard } from '..'
 
-const render = (props: React.ComponentProps<typeof NumericalKeyboard>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof NumericalKeyboard>) => {
   return renderWithProviders(<NumericalKeyboard {...props} />)[0]
 }
 
 describe('NumericalKeyboard', () => {
   it('should render numerical keyboard isDecimal: false and hasHyphen: false', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -41,7 +43,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should render numerical keyboard isDecimal: false and hasHyphen: true', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -72,7 +74,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should render numerical keyboard isDecimal: true and hasHyphen: false', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -103,7 +105,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should render numerical keyboard isDecimal: true and hasHyphen: true', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -135,7 +137,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should call mock function when clicking num key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -149,7 +151,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should call mock function when clicking decimal point key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
@@ -163,7 +165,7 @@ describe('NumericalKeyboard', () => {
   })
 
   it('should call mock function when clicking hyphen key', () => {
-    const { result } = renderHook(() => React.useRef(null))
+    const { result } = renderHook(() => useRef(null))
     const props = {
       onChange: vi.fn(),
       keyboardRef: result.current,
diff --git a/app/src/molecules/CollapsibleSection/index.tsx b/app/src/molecules/CollapsibleSection/index.tsx
index 3b9d6c4b8d0..3a359edeb4f 100644
--- a/app/src/molecules/CollapsibleSection/index.tsx
+++ b/app/src/molecules/CollapsibleSection/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { css } from 'styled-components'
 
 import {
@@ -12,6 +12,8 @@ import {
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 const ACCORDION_STYLE = css`
@@ -26,7 +28,7 @@ const ACCORDION_STYLE = css`
 
 interface CollapsibleSectionProps extends StyleProps {
   title: string
-  children: React.ReactNode
+  children: ReactNode
   isExpandedInitially?: boolean
 }
 
@@ -34,7 +36,7 @@ export function CollapsibleSection(
   props: CollapsibleSectionProps
 ): JSX.Element {
   const { title, children, isExpandedInitially = true, ...styleProps } = props
-  const [isExpanded, setIsExpanded] = React.useState(isExpandedInitially)
+  const [isExpanded, setIsExpanded] = useState(isExpandedInitially)
   return (
     <Flex flexDirection={DIRECTION_COLUMN} {...styleProps}>
       <Flex
diff --git a/app/src/molecules/InstrumentCard/MenuOverlay.tsx b/app/src/molecules/InstrumentCard/MenuOverlay.tsx
index 674f5659164..18db4780d18 100644
--- a/app/src/molecules/InstrumentCard/MenuOverlay.tsx
+++ b/app/src/molecules/InstrumentCard/MenuOverlay.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment } from 'react'
 
 import {
   BORDERS,
@@ -12,11 +12,12 @@ import {
 
 import { Divider } from '/app/atoms/structure'
 
+import type { MouseEventHandler, MouseEvent, ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 export interface MenuOverlayItemProps {
-  label: React.ReactNode
-  onClick: React.MouseEventHandler<HTMLButtonElement>
+  label: ReactNode
+  onClick: MouseEventHandler<HTMLButtonElement>
   disabled?: boolean
 }
 
@@ -41,14 +42,14 @@ export function MenuOverlay(props: MenuOverlayProps): JSX.Element {
       right="0"
       whiteSpace={NO_WRAP}
       zIndex={10}
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.preventDefault()
         e.stopPropagation()
         setShowMenuOverlay(false)
       }}
     >
       {menuOverlayItems.map((menuOverlayItem, i) => (
-        <React.Fragment key={`menuItem_${i}`}>
+        <Fragment key={`menuItem_${i}`}>
           {/* insert a divider before the last item if desired */}
           {hasDivider && i === menuOverlayItems.length - 1 ? (
             <Divider marginY="0" />
@@ -59,7 +60,7 @@ export function MenuOverlay(props: MenuOverlayProps): JSX.Element {
           >
             {menuOverlayItem.label}
           </MenuItem>
-        </React.Fragment>
+        </Fragment>
       ))}
     </Flex>
   )
diff --git a/app/src/molecules/InterventionModal/DeckMapContent.tsx b/app/src/molecules/InterventionModal/DeckMapContent.tsx
index a45bc920e0a..6bafed02bd1 100644
--- a/app/src/molecules/InterventionModal/DeckMapContent.tsx
+++ b/app/src/molecules/InterventionModal/DeckMapContent.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect } from 'react'
 import { css } from 'styled-components'
 import {
   Box,
@@ -11,6 +11,7 @@ import {
   useDeckLocationSelect,
 } from '@opentrons/components'
 
+import type { ComponentProps } from 'react'
 import type {
   LabwareDefinition2,
   RobotType,
@@ -22,7 +23,7 @@ export type MapKind = 'intervention' | 'deck-config'
 
 export interface InterventionStyleDeckMapContentProps
   extends Pick<
-    React.ComponentProps<typeof BaseDeck>,
+    ComponentProps<typeof BaseDeck>,
     'deckConfig' | 'robotType' | 'labwareOnDeck' | 'modulesOnDeck'
   > {
   kind: 'intervention'
@@ -107,7 +108,7 @@ function DeckConfigStyleDeckMapContent({
     robotType,
     'default'
   )
-  React.useEffect(() => {
+  useEffect(() => {
     setSelectedLocation != null && setSelectedLocation(selectedLocation)
   }, [selectedLocation, setSelectedLocation])
   return <>{DeckLocationSelect}</>
diff --git a/app/src/molecules/InterventionModal/ModalContentOneColSimpleButtons.tsx b/app/src/molecules/InterventionModal/ModalContentOneColSimpleButtons.tsx
index c70ddbea7d1..9302192aa68 100644
--- a/app/src/molecules/InterventionModal/ModalContentOneColSimpleButtons.tsx
+++ b/app/src/molecules/InterventionModal/ModalContentOneColSimpleButtons.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import {
   Flex,
   DIRECTION_COLUMN,
@@ -9,10 +9,12 @@ import {
 } from '@opentrons/components'
 import { OneColumn } from './OneColumn'
 
+import type { ChangeEventHandler } from 'react'
+
 export interface ButtonProps {
   label: string
   value: string
-  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onChange?: ChangeEventHandler<HTMLInputElement>
 }
 
 export interface ModalContentOneColSimpleButtonsProps {
@@ -20,14 +22,14 @@ export interface ModalContentOneColSimpleButtonsProps {
   firstButton: ButtonProps
   secondButton: ButtonProps
   furtherButtons?: ButtonProps[]
-  onSelect?: React.ChangeEventHandler<HTMLInputElement>
+  onSelect?: ChangeEventHandler<HTMLInputElement>
   initialSelected?: string
 }
 
 export function ModalContentOneColSimpleButtons(
   props: ModalContentOneColSimpleButtonsProps
 ): JSX.Element {
-  const [selected, setSelected] = React.useState<string | null>(
+  const [selected, setSelected] = useState<string | null>(
     props.initialSelected ?? null
   )
   const furtherButtons = props.furtherButtons ?? []
diff --git a/app/src/molecules/JogControls/DirectionControl.tsx b/app/src/molecules/JogControls/DirectionControl.tsx
index 8b05e533e4d..d51615fd97e 100644
--- a/app/src/molecules/JogControls/DirectionControl.tsx
+++ b/app/src/molecules/JogControls/DirectionControl.tsx
@@ -1,5 +1,5 @@
 // jog controls component
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
@@ -31,8 +31,9 @@ import { ControlContainer } from './ControlContainer'
 import { HORIZONTAL_PLANE, VERTICAL_PLANE } from './constants'
 import { TouchControlButton } from './TouchControlButton'
 
-import type { IconName } from '@opentrons/components'
+import type { MouseEvent } from 'react'
 import type { CSSProperties } from 'styled-components'
+import type { IconName } from '@opentrons/components'
 import type { Jog, Plane, Sign, Bearing, Axis, StepSize } from './types'
 
 interface Control {
@@ -223,12 +224,12 @@ interface DirectionControlProps {
 
 export function DirectionControl(props: DirectionControlProps): JSX.Element {
   const { planes, jog, stepSize, initialPlane } = props
-  const [currentPlane, setCurrentPlane] = React.useState<Plane>(
+  const [currentPlane, setCurrentPlane] = useState<Plane>(
     initialPlane ?? planes[0]
   )
   const { t } = useTranslation(['robot_calibration'])
 
-  const handlePlane = (event: React.MouseEvent<HTMLButtonElement>): void => {
+  const handlePlane = (event: MouseEvent<HTMLButtonElement>): void => {
     setCurrentPlane(event.currentTarget.value as Plane)
     event.currentTarget.blur()
   }
@@ -449,7 +450,7 @@ export function TouchDirectionControl(
   props: DirectionControlProps
 ): JSX.Element {
   const { planes, jog, stepSize, initialPlane } = props
-  const [currentPlane, setCurrentPlane] = React.useState<Plane>(
+  const [currentPlane, setCurrentPlane] = useState<Plane>(
     initialPlane ?? planes[0]
   )
   const { i18n, t } = useTranslation(['robot_calibration'])
diff --git a/app/src/molecules/JogControls/index.tsx b/app/src/molecules/JogControls/index.tsx
index c9d0d7b49f0..0208739d025 100644
--- a/app/src/molecules/JogControls/index.tsx
+++ b/app/src/molecules/JogControls/index.tsx
@@ -1,5 +1,5 @@
 // jog controls component
-import * as React from 'react'
+import { useState } from 'react'
 import { css } from 'styled-components'
 import {
   Flex,
@@ -20,15 +20,16 @@ import {
   DEFAULT_STEP_SIZES,
 } from './constants'
 
-import type { Jog, Plane, StepSize } from './types'
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
+import type { Jog, Plane, StepSize } from './types'
 
 export type { Jog }
 export interface JogControlsProps extends StyleProps {
   jog: Jog
   planes?: Plane[]
   stepSizes?: StepSize[]
-  auxiliaryControl?: React.ReactNode | null
+  auxiliaryControl?: ReactNode | null
   directionControlButtonColor?: string
   initialPlane?: Plane
   isOnDevice?: boolean
@@ -53,9 +54,7 @@ export function JogControls(props: JogControlsProps): JSX.Element {
     isOnDevice = false,
     ...styleProps
   } = props
-  const [currentStepSize, setCurrentStepSize] = React.useState<StepSize>(
-    stepSizes[0]
-  )
+  const [currentStepSize, setCurrentStepSize] = useState<StepSize>(stepSizes[0])
 
   const controls = isOnDevice ? (
     <>
diff --git a/app/src/molecules/ToggleGroup/useToggleGroup.tsx b/app/src/molecules/ToggleGroup/useToggleGroup.tsx
index ebe3efd14c8..5b356ba74cd 100644
--- a/app/src/molecules/ToggleGroup/useToggleGroup.tsx
+++ b/app/src/molecules/ToggleGroup/useToggleGroup.tsx
@@ -1,13 +1,15 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { ToggleGroup } from '@opentrons/components'
 import { useTrackEvent } from '/app/redux/analytics'
 
+import type { ReactNode } from 'react'
+
 export const useToggleGroup = (
   left: string,
   right: string,
   trackEventName?: string
-): [string, React.ReactNode] => {
-  const [selectedValue, setSelectedValue] = React.useState<string>(left)
+): [string, ReactNode] => {
+  const [selectedValue, setSelectedValue] = useState<string>(left)
   const trackEvent = useTrackEvent()
   const handleLeftClick = (): void => {
     setSelectedValue(left)
diff --git a/app/src/molecules/UploadInput/index.tsx b/app/src/molecules/UploadInput/index.tsx
index 77dc5a2616d..89877f38c33 100644
--- a/app/src/molecules/UploadInput/index.tsx
+++ b/app/src/molecules/UploadInput/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useRef, useState } from 'react'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import {
@@ -18,6 +18,12 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type {
+  ChangeEventHandler,
+  DragEventHandler,
+  MouseEventHandler,
+} from 'react'
+
 const StyledLabel = styled.label`
   display: ${DISPLAY_FLEX};
   cursor: ${CURSOR_POINTER};
@@ -66,39 +72,37 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
   } = props
   const { t } = useTranslation('protocol_info')
 
-  const fileInput = React.useRef<HTMLInputElement>(null)
-  const [isFileOverDropZone, setIsFileOverDropZone] = React.useState<boolean>(
-    false
-  )
-  const [isHover, setIsHover] = React.useState<boolean>(false)
-  const handleDrop: React.DragEventHandler<HTMLLabelElement> = e => {
+  const fileInput = useRef<HTMLInputElement>(null)
+  const [isFileOverDropZone, setIsFileOverDropZone] = useState<boolean>(false)
+  const [isHover, setIsHover] = useState<boolean>(false)
+  const handleDrop: DragEventHandler<HTMLLabelElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     Array.from(e.dataTransfer.files).forEach(f => onUpload(f))
     setIsFileOverDropZone(false)
   }
-  const handleDragEnter: React.DragEventHandler<HTMLLabelElement> = e => {
+  const handleDragEnter: DragEventHandler<HTMLLabelElement> = e => {
     e.preventDefault()
     e.stopPropagation()
   }
-  const handleDragLeave: React.DragEventHandler<HTMLLabelElement> = e => {
+  const handleDragLeave: DragEventHandler<HTMLLabelElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setIsFileOverDropZone(false)
     setIsHover(false)
   }
-  const handleDragOver: React.DragEventHandler<HTMLLabelElement> = e => {
+  const handleDragOver: DragEventHandler<HTMLLabelElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setIsFileOverDropZone(true)
     setIsHover(true)
   }
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = _event => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = _event => {
     onClick != null ? onClick() : fileInput.current?.click()
   }
 
-  const onChange: React.ChangeEventHandler<HTMLInputElement> = event => {
+  const onChange: ChangeEventHandler<HTMLInputElement> = event => {
     ;[...(event.target.files ?? [])].forEach(f => onUpload(f))
     if ('value' in event.currentTarget) event.currentTarget.value = ''
   }
diff --git a/app/src/organisms/ApplyHistoricOffsets/index.tsx b/app/src/organisms/ApplyHistoricOffsets/index.tsx
index 6925145c012..60b166fe8d8 100644
--- a/app/src/organisms/ApplyHistoricOffsets/index.tsx
+++ b/app/src/organisms/ApplyHistoricOffsets/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useSelector } from 'react-redux'
 import pick from 'lodash/pick'
@@ -25,6 +25,8 @@ import { LabwareOffsetTabs } from '/app/organisms/LabwareOffsetTabs'
 import { getLabwareDefinitionsFromCommands } from '/app/local-resources/labware'
 import { LabwareOffsetTable } from './LabwareOffsetTable'
 import { getIsLabwareOffsetCodeSnippetsOn } from '/app/redux/config'
+
+import type { ChangeEvent } from 'react'
 import type { LabwareOffset } from '@opentrons/api-client'
 import type {
   LoadedLabware,
@@ -58,7 +60,7 @@ export function ApplyHistoricOffsets(
     modules,
     commands,
   } = props
-  const [showOffsetDataModal, setShowOffsetDataModal] = React.useState(false)
+  const [showOffsetDataModal, setShowOffsetDataModal] = useState(false)
   const { t } = useTranslation('labware_position_check')
   const isLabwareOffsetCodeSnippetsOn = useSelector(
     getIsLabwareOffsetCodeSnippetsOn
@@ -85,7 +87,7 @@ export function ApplyHistoricOffsets(
   return (
     <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
       <CheckboxField
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
           setShouldApplyOffsets(e.currentTarget.checked)
         }}
         value={shouldApplyOffsets}
diff --git a/app/src/organisms/Desktop/Alerts/AlertsProvider.tsx b/app/src/organisms/Desktop/Alerts/AlertsProvider.tsx
index 21aeccbf855..79b6088b445 100644
--- a/app/src/organisms/Desktop/Alerts/AlertsProvider.tsx
+++ b/app/src/organisms/Desktop/Alerts/AlertsProvider.tsx
@@ -1,21 +1,23 @@
-import * as React from 'react'
+import { createContext, useRef } from 'react'
 import { AlertsModal } from '.'
 import { useToaster } from '/app/organisms/ToasterOven'
 
+import type { ReactNode } from 'react'
+
 export interface AlertsContextProps {
   removeActiveAppUpdateToast: () => void
 }
 
-export const AlertsContext = React.createContext<AlertsContextProps>({
+export const AlertsContext = createContext<AlertsContextProps>({
   removeActiveAppUpdateToast: () => null,
 })
 
 interface AlertsProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function Alerts({ children }: AlertsProps): JSX.Element {
-  const toastRef = React.useRef<string | null>(null)
+  const toastRef = useRef<string | null>(null)
   const { eatToast } = useToaster()
 
   const removeActiveAppUpdateToast = (): void => {
diff --git a/app/src/organisms/Desktop/CalibrateDeck/index.tsx b/app/src/organisms/Desktop/CalibrateDeck/index.tsx
index 783b3d0ba13..b1201dc4553 100644
--- a/app/src/organisms/Desktop/CalibrateDeck/index.tsx
+++ b/app/src/organisms/Desktop/CalibrateDeck/index.tsx
@@ -1,5 +1,5 @@
 // Deck Calibration Orchestration Component
-import * as React from 'react'
+import { useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
@@ -27,6 +27,7 @@ import {
   useCalibrationError,
 } from '/app/organisms/Desktop/CalibrationError'
 
+import type { ComponentType } from 'react'
 import type { Mount } from '@opentrons/components'
 import type {
   CalibrationLabware,
@@ -37,7 +38,7 @@ import type { CalibrationPanelProps } from '/app/organisms/Desktop/CalibrationPa
 import type { CalibrateDeckParentProps } from './types'
 
 const PANEL_BY_STEP: Partial<
-  Record<CalibrationSessionStep, React.ComponentType<CalibrationPanelProps>>
+  Record<CalibrationSessionStep, ComponentType<CalibrationPanelProps>>
 > = {
   [Sessions.DECK_STEP_SESSION_STARTED]: Introduction,
   [Sessions.DECK_STEP_LABWARE_LOADED]: DeckSetup,
@@ -89,7 +90,7 @@ export function CalibrateDeck({
 
   const errorInfo = useCalibrationError(requestIds, session?.id)
 
-  const isMulti = React.useMemo(() => {
+  const isMulti = useMemo(() => {
     const spec = instrument && getPipetteModelSpecs(instrument.model)
     return spec ? spec.channels > 1 : false
   }, [instrument])
diff --git a/app/src/organisms/Desktop/CalibratePipetteOffset/index.tsx b/app/src/organisms/Desktop/CalibratePipetteOffset/index.tsx
index dce310da9c6..2359d275384 100644
--- a/app/src/organisms/Desktop/CalibratePipetteOffset/index.tsx
+++ b/app/src/organisms/Desktop/CalibratePipetteOffset/index.tsx
@@ -1,5 +1,5 @@
 // Pipette Offset Calibration Orchestration Component
-import * as React from 'react'
+import { useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
@@ -27,6 +27,7 @@ import {
   useCalibrationError,
 } from '/app/organisms/Desktop/CalibrationError'
 
+import type { ComponentType } from 'react'
 import type { Mount } from '@opentrons/components'
 import type {
   CalibrationLabware,
@@ -37,7 +38,7 @@ import type { CalibratePipetteOffsetParentProps } from './types'
 import type { CalibrationPanelProps } from '/app/organisms/Desktop/CalibrationPanels/types'
 
 const PANEL_BY_STEP: Partial<
-  Record<CalibrationSessionStep, React.ComponentType<CalibrationPanelProps>>
+  Record<CalibrationSessionStep, ComponentType<CalibrationPanelProps>>
 > = {
   [Sessions.PIP_OFFSET_STEP_SESSION_STARTED]: Introduction,
   [Sessions.PIP_OFFSET_STEP_LABWARE_LOADED]: DeckSetup,
@@ -88,7 +89,7 @@ export function CalibratePipetteOffset({
   const calBlock: CalibrationLabware | null =
     labware != null ? labware.find(l => !l.isTiprack) ?? null : null
 
-  const isMulti = React.useMemo(() => {
+  const isMulti = useMemo(() => {
     const spec =
       instrument != null ? getPipetteModelSpecs(instrument.model) : null
     return spec != null ? spec.channels > 1 : false
diff --git a/app/src/organisms/Desktop/CalibrateTipLength/AskForCalibrationBlockModal.tsx b/app/src/organisms/Desktop/CalibrateTipLength/AskForCalibrationBlockModal.tsx
index 62a8ca00ef0..85eb76ae126 100644
--- a/app/src/organisms/Desktop/CalibrateTipLength/AskForCalibrationBlockModal.tsx
+++ b/app/src/organisms/Desktop/CalibrateTipLength/AskForCalibrationBlockModal.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import {
@@ -24,6 +24,7 @@ import { WizardHeader } from '/app/molecules/WizardHeader'
 import { getTopPortalEl } from '/app/App/portal'
 import { setUseTrashSurfaceForTipCal } from '/app/redux/calibration'
 
+import type { ChangeEvent } from 'react'
 import type { Dispatch } from '/app/redux/types'
 
 const BLOCK_REQUEST_EMAIL_BODY =
@@ -41,9 +42,7 @@ interface Props {
 
 export function AskForCalibrationBlockModal(props: Props): JSX.Element {
   const { t } = useTranslation(['robot_calibration', 'shared', 'branded'])
-  const [rememberPreference, setRememberPreference] = React.useState<boolean>(
-    true
-  )
+  const [rememberPreference, setRememberPreference] = useState<boolean>(true)
   const dispatch = useDispatch<Dispatch>()
 
   const makeSetHasBlock = (hasBlock: boolean) => (): void => {
@@ -108,7 +107,7 @@ export function AskForCalibrationBlockModal(props: Props): JSX.Element {
         >
           <Flex alignItems={ALIGN_CENTER}>
             <CheckboxField
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 setRememberPreference(e.currentTarget.checked)
               }}
               value={rememberPreference}
diff --git a/app/src/organisms/Desktop/CalibrateTipLength/index.tsx b/app/src/organisms/Desktop/CalibrateTipLength/index.tsx
index 02ac74e09d5..e905f1b77c7 100644
--- a/app/src/organisms/Desktop/CalibrateTipLength/index.tsx
+++ b/app/src/organisms/Desktop/CalibrateTipLength/index.tsx
@@ -1,5 +1,5 @@
 // Tip Length Calibration Orchestration Component
-import * as React from 'react'
+import { useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
@@ -30,6 +30,7 @@ import {
 import slotOneRemoveBlockAsset from '/app/assets/videos/tip-length-cal/Slot_1_Remove_CalBlock_(330x260)REV1.webm'
 import slotThreeRemoveBlockAsset from '/app/assets/videos/tip-length-cal/Slot_3_Remove_CalBlock_(330x260)REV1.webm'
 
+import type { ComponentType } from 'react'
 import type { Mount } from '@opentrons/components'
 import type {
   SessionCommandParams,
@@ -43,7 +44,7 @@ export { AskForCalibrationBlockModal } from './AskForCalibrationBlockModal'
 export { ConfirmRecalibrationModal } from './ConfirmRecalibrationModal'
 
 const PANEL_BY_STEP: Partial<
-  Record<CalibrationSessionStep, React.ComponentType<CalibrationPanelProps>>
+  Record<CalibrationSessionStep, ComponentType<CalibrationPanelProps>>
 > = {
   sessionStarted: Introduction,
   labwareLoaded: DeckSetup,
@@ -80,7 +81,7 @@ export function CalibrateTipLength({
   const queryClient = useQueryClient()
   const host = useHost()
 
-  const isMulti = React.useMemo(() => {
+  const isMulti = useMemo(() => {
     const spec =
       instrument != null ? getPipetteModelSpecs(instrument.model) : null
     return spec != null ? spec.channels > 1 : false
diff --git a/app/src/organisms/Desktop/CalibrationPanels/SaveZPoint.tsx b/app/src/organisms/Desktop/CalibrationPanels/SaveZPoint.tsx
index 7c85aa4b020..094b94a2025 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/SaveZPoint.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/SaveZPoint.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useMemo } from 'react'
 import { css } from 'styled-components'
 import { Trans, useTranslation } from 'react-i18next'
 import {
@@ -29,6 +29,7 @@ import slot5LeftSingleDemoAsset from '/app/assets/videos/cal-movement/SLOT_5_LEF
 import slot5RightMultiDemoAsset from '/app/assets/videos/cal-movement/SLOT_5_RIGHT_MULTI_Z.webm'
 import slot5RightSingleDemoAsset from '/app/assets/videos/cal-movement/SLOT_5_RIGHT_SINGLE_Z.webm'
 
+import type { MouseEventHandler } from 'react'
 import type { Axis, Sign, StepSize } from '/app/molecules/JogControls/types'
 import type { CalibrationPanelProps } from './types'
 
@@ -46,7 +47,7 @@ const assetMap = {
 export function SaveZPoint(props: CalibrationPanelProps): JSX.Element {
   const { t } = useTranslation('robot_calibration')
   const { isMulti, mount, sendCommands, sessionType } = props
-  const demoAsset = React.useMemo(
+  const demoAsset = useMemo(
     () => mount && assetMap[mount][isMulti ? 'multi' : 'single'],
     [mount, isMulti]
   )
@@ -62,7 +63,7 @@ export function SaveZPoint(props: CalibrationPanelProps): JSX.Element {
 
   const isHealthCheck =
     sessionType === Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK
-  const proceed: React.MouseEventHandler<HTMLButtonElement> = _event => {
+  const proceed: MouseEventHandler<HTMLButtonElement> = _event => {
     isHealthCheck
       ? sendCommands(
           { command: Sessions.checkCommands.COMPARE_POINT },
diff --git a/app/src/organisms/Desktop/CheckCalibration/index.tsx b/app/src/organisms/Desktop/CheckCalibration/index.tsx
index f2dae1c242e..10bf25e93f9 100644
--- a/app/src/organisms/Desktop/CheckCalibration/index.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 
@@ -22,7 +22,9 @@ import { WizardHeader } from '/app/molecules/WizardHeader'
 import { getTopPortalEl } from '/app/App/portal'
 import { ReturnTip } from './ReturnTip'
 import { ResultsSummary } from './ResultsSummary'
+import { CHECK_PIPETTE_RANK_FIRST } from '/app/redux/sessions'
 
+import type { ComponentType } from 'react'
 import type { Mount } from '@opentrons/components'
 import type {
   CalibrationLabware,
@@ -30,15 +32,13 @@ import type {
   RobotCalibrationCheckStep,
   SessionCommandParams,
 } from '/app/redux/sessions/types'
-
 import type { CalibrationPanelProps } from '/app/organisms/Desktop/CalibrationPanels/types'
 import type { CalibrationCheckParentProps } from './types'
-import { CHECK_PIPETTE_RANK_FIRST } from '/app/redux/sessions'
 
 const ROBOT_CALIBRATION_CHECK_SUBTITLE = 'Calibration health check'
 
 const PANEL_BY_STEP: {
-  [step in RobotCalibrationCheckStep]?: React.ComponentType<CalibrationPanelProps>
+  [step in RobotCalibrationCheckStep]?: ComponentType<CalibrationPanelProps>
 } = {
   [Sessions.CHECK_STEP_SESSION_STARTED]: Introduction,
   [Sessions.CHECK_STEP_LABWARE_LOADED]: DeckSetup,
@@ -124,7 +124,7 @@ export function CheckCalibration(
     cleanUpAndExit()
   }, true)
 
-  const isMulti = React.useMemo(() => {
+  const isMulti = useMemo(() => {
     const spec = activePipette && getPipetteModelSpecs(activePipette.model)
     return spec ? spec.channels > 1 : false
   }, [activePipette])
diff --git a/app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx b/app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx
index a4824c76c5c..5fa0536eb60 100644
--- a/app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx
+++ b/app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState, Fragment } from 'react'
 import first from 'lodash/first'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link, NavLink, useNavigate } from 'react-router-dom'
@@ -62,6 +62,7 @@ import {
 } from '/app/transformations/runs'
 import { getAnalysisStatus } from '/app/organisms/Desktop/ProtocolsLanding/utils'
 
+import type { MouseEventHandler } from 'react'
 import type { DropdownOption } from '@opentrons/components'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 import type { Robot } from '/app/redux/discovery/types'
@@ -100,7 +101,7 @@ export function ChooseProtocolSlideoutComponent(
   const [
     showRestoreValuesTooltip,
     setShowRestoreValuesTooltip,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   const { robot, showSlideout, onCloseClick } = props
   const { name } = robot
@@ -108,26 +109,25 @@ export function ChooseProtocolSlideoutComponent(
   const [
     selectedProtocol,
     setSelectedProtocol,
-  ] = React.useState<StoredProtocolData | null>(null)
-  const [
-    runTimeParametersOverrides,
-    setRunTimeParametersOverrides,
-  ] = React.useState<RunTimeParameter[]>([])
-  const [currentPage, setCurrentPage] = React.useState<number>(1)
-  const [hasParamError, setHasParamError] = React.useState<boolean>(false)
-  const [hasMissingFileParam, setHasMissingFileParam] = React.useState<boolean>(
+  ] = useState<StoredProtocolData | null>(null)
+  const [runTimeParametersOverrides, setRunTimeParametersOverrides] = useState<
+    RunTimeParameter[]
+  >([])
+  const [currentPage, setCurrentPage] = useState<number>(1)
+  const [hasParamError, setHasParamError] = useState<boolean>(false)
+  const [hasMissingFileParam, setHasMissingFileParam] = useState<boolean>(
     runTimeParametersOverrides?.some(
       parameter => parameter.type === 'csv_file'
     ) ?? false
   )
-  const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
+  const [isInputFocused, setIsInputFocused] = useState<boolean>(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setRunTimeParametersOverrides(
       selectedProtocol?.mostRecentAnalysis?.runTimeParameters ?? []
     )
   }, [selectedProtocol])
-  React.useEffect(() => {
+  useEffect(() => {
     setHasParamError(errors.length > 0)
     setHasMissingFileParam(
       runTimeParametersOverrides.some(
@@ -149,7 +149,7 @@ export function ChooseProtocolSlideoutComponent(
   const missingAnalysisData =
     analysisStatus === 'error' || analysisStatus === 'stale'
 
-  const [shouldApplyOffsets, setShouldApplyOffsets] = React.useState(true)
+  const [shouldApplyOffsets, setShouldApplyOffsets] = useState(true)
   const offsetCandidates = useOffsetCandidatesForAnalysis(
     (!missingAnalysisData ? selectedProtocol?.mostRecentAnalysis : null) ??
       null,
@@ -211,7 +211,7 @@ export function ChooseProtocolSlideoutComponent(
         }))
       : []
   )
-  const handleProceed: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleProceed: MouseEventHandler<HTMLButtonElement> = () => {
     if (selectedProtocol != null) {
       trackCreateProtocolRunEvent({ name: 'createProtocolRecordRequest' })
       const dataFilesForProtocolMap = runTimeParametersOverrides.reduce<
@@ -725,7 +725,7 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element {
   ).filter(
     protocol => protocol.mostRecentAnalysis?.robotType === robot.robotModel
   )
-  React.useEffect(() => {
+  useEffect(() => {
     handleSelectProtocol(first(storedProtocols) ?? null)
   }, [])
 
@@ -744,7 +744,7 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element {
         const requiresCsvRunTimeParameter =
           analysisStatus === 'parameterRequired'
         return (
-          <React.Fragment key={storedProtocol.protocolKey}>
+          <Fragment key={storedProtocol.protocolKey}>
             <Flex flexDirection={DIRECTION_COLUMN}>
               <MiniCard
                 isSelected={isSelected}
@@ -883,7 +883,7 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element {
                 }
               </LegacyStyledText>
             ) : null}
-          </React.Fragment>
+          </Fragment>
         )
       })}
     </Flex>
diff --git a/app/src/organisms/Desktop/ChooseRobotSlideout/AvailableRobotOption.tsx b/app/src/organisms/Desktop/ChooseRobotSlideout/AvailableRobotOption.tsx
index f06464c2f2a..992e25706dc 100644
--- a/app/src/organisms/Desktop/ChooseRobotSlideout/AvailableRobotOption.tsx
+++ b/app/src/organisms/Desktop/ChooseRobotSlideout/AvailableRobotOption.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { css } from 'styled-components'
 import { Trans, useTranslation } from 'react-i18next'
@@ -24,6 +24,7 @@ import OT2_PNG from '/app/assets/images/OT2-R_HERO.png'
 import FLEX_PNG from '/app/assets/images/FLEX.png'
 import { useCurrentRunId, useNotifyRunQuery } from '/app/resources/runs'
 
+import type { Dispatch as ReactDispatch } from 'react'
 import type { IconName } from '@opentrons/components'
 import type { Runs } from '@opentrons/api-client'
 import type { Robot } from '/app/redux/discovery/types'
@@ -35,7 +36,7 @@ interface AvailableRobotOptionProps {
   onClick: () => void
   isSelected: boolean
   isSelectedRobotOnDifferentSoftwareVersion: boolean
-  registerRobotBusyStatus: React.Dispatch<RobotBusyStatusAction>
+  registerRobotBusyStatus: ReactDispatch<RobotBusyStatusAction>
   isError?: boolean
   showIdleOnly?: boolean
 }
@@ -59,7 +60,7 @@ export function AvailableRobotOption(
     getRobotModelByName(state, robotName)
   )
 
-  const [isBusy, setIsBusy] = React.useState(true)
+  const [isBusy, setIsBusy] = useState(true)
 
   const currentRunId = useCurrentRunId(
     {
@@ -112,7 +113,7 @@ export function AvailableRobotOption(
     iconName = 'usb'
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchStatus(robotName))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
diff --git a/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/index.tsx b/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/index.tsx
index f4850a649cf..e3946a4cc99 100644
--- a/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/index.tsx
+++ b/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import first from 'lodash/first'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
@@ -33,6 +33,8 @@ import { ApplyHistoricOffsets } from '/app/organisms/ApplyHistoricOffsets'
 import { useOffsetCandidatesForAnalysis } from '/app/organisms/ApplyHistoricOffsets/hooks/useOffsetCandidatesForAnalysis'
 import { ChooseRobotSlideout } from '../ChooseRobotSlideout'
 import { useCreateRunFromProtocol } from './useCreateRunFromProtocol'
+
+import type { MouseEventHandler } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 import type { Robot } from '/app/redux/discovery/types'
@@ -65,16 +67,14 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
     setSelectedRobot,
   } = props
   const navigate = useNavigate()
-  const [shouldApplyOffsets, setShouldApplyOffsets] = React.useState<boolean>(
-    true
-  )
+  const [shouldApplyOffsets, setShouldApplyOffsets] = useState<boolean>(true)
   const {
     protocolKey,
     srcFileNames,
     srcFiles,
     mostRecentAnalysis,
   } = storedProtocolData
-  const [currentPage, setCurrentPage] = React.useState<number>(1)
+  const [currentPage, setCurrentPage] = useState<number>(1)
   const { trackCreateProtocolRunEvent } = useTrackCreateProtocolRunEvent(
     storedProtocolData,
     selectedRobot?.name ?? ''
@@ -82,12 +82,11 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
   const runTimeParameters =
     storedProtocolData.mostRecentAnalysis?.runTimeParameters ?? []
 
-  const [
-    runTimeParametersOverrides,
-    setRunTimeParametersOverrides,
-  ] = React.useState<RunTimeParameter[]>(runTimeParameters)
-  const [hasParamError, setHasParamError] = React.useState<boolean>(false)
-  const [hasMissingFileParam, setHasMissingFileParam] = React.useState<boolean>(
+  const [runTimeParametersOverrides, setRunTimeParametersOverrides] = useState<
+    RunTimeParameter[]
+  >(runTimeParameters)
+  const [hasParamError, setHasParamError] = useState<boolean>(false)
+  const [hasMissingFileParam, setHasMissingFileParam] = useState<boolean>(
     runTimeParameters?.some(parameter => parameter.type === 'csv_file') ?? false
   )
 
@@ -133,7 +132,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
         }))
       : []
   )
-  const handleProceed: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleProceed: MouseEventHandler<HTMLButtonElement> = () => {
     trackCreateProtocolRunEvent({ name: 'createProtocolRecordRequest' })
     const dataFilesForProtocolMap = runTimeParametersOverrides.reduce<
       Record<string, File>
@@ -353,7 +352,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
 export function ChooseRobotToRunProtocolSlideout(
   props: ChooseRobotToRunProtocolSlideoutProps
 ): JSX.Element | null {
-  const [selectedRobot, setSelectedRobot] = React.useState<Robot | null>(null)
+  const [selectedRobot, setSelectedRobot] = useState<Robot | null>(null)
   return (
     <ApiHostProvider
       hostname={selectedRobot?.ip ?? null}
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/CheckPipettesButton.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/CheckPipettesButton.tsx
index a5abf0a9732..873d631e513 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/CheckPipettesButton.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/CheckPipettesButton.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { usePipettesQuery } from '@opentrons/react-api-client'
 import {
@@ -14,9 +14,11 @@ import {
 } from '@opentrons/components'
 import { DETACH } from './constants'
 
+import type { ReactNode } from 'react'
+
 export interface CheckPipetteButtonProps {
   robotName: string
-  children?: React.ReactNode
+  children?: ReactNode
   direction?: 'detach' | 'attach'
   onDone?: () => void
 }
@@ -26,7 +28,7 @@ export function CheckPipettesButton(
 ): JSX.Element | null {
   const { onDone, children, direction } = props
   const { t } = useTranslation('change_pipette')
-  const [isPending, setIsPending] = React.useState(false)
+  const [isPending, setIsPending] = useState(false)
   const { refetch: refetchPipettes } = usePipettesQuery(
     { refresh: true },
     {
diff --git a/app/src/organisms/Desktop/Devices/GripperCard/index.tsx b/app/src/organisms/Desktop/Devices/GripperCard/index.tsx
index c8a5280049e..0d425640c11 100644
--- a/app/src/organisms/Desktop/Devices/GripperCard/index.tsx
+++ b/app/src/organisms/Desktop/Devices/GripperCard/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 import {
@@ -15,6 +15,7 @@ import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows'
 import { AboutGripperSlideout } from './AboutGripperSlideout'
 import { GRIPPER_FLOW_TYPES } from '/app/organisms/GripperWizardFlows/constants'
 
+import type { MouseEventHandler } from 'react'
 import type { BadGripper, GripperData } from '@opentrons/api-client'
 import type { GripperModel } from '@opentrons/shared-data'
 import type { GripperWizardFlowType } from '/app/organisms/GripperWizardFlows/types'
@@ -53,26 +54,24 @@ export function GripperCard({
   const [
     openWizardFlowType,
     setOpenWizardFlowType,
-  ] = React.useState<GripperWizardFlowType | null>(null)
+  ] = useState<GripperWizardFlowType | null>(null)
   const [
     showAboutGripperSlideout,
     setShowAboutGripperSlideout,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
-  const handleAttach: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleAttach: MouseEventHandler<HTMLButtonElement> = () => {
     setOpenWizardFlowType(GRIPPER_FLOW_TYPES.ATTACH)
   }
 
-  const handleDetach: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleDetach: MouseEventHandler<HTMLButtonElement> = () => {
     setOpenWizardFlowType(GRIPPER_FLOW_TYPES.DETACH)
   }
 
-  const handleCalibrate: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleCalibrate: MouseEventHandler<HTMLButtonElement> = () => {
     setOpenWizardFlowType(GRIPPER_FLOW_TYPES.RECALIBRATE)
   }
-  const [pollForSubsystemUpdate, setPollForSubsystemUpdate] = React.useState(
-    false
-  )
+  const [pollForSubsystemUpdate, setPollForSubsystemUpdate] = useState(false)
   const { data: subsystemUpdateData } = useCurrentSubsystemUpdateQuery(
     'gripper',
     {
@@ -84,7 +83,7 @@ export function GripperCard({
   // detected until the update has been done for 5 seconds
   // this gives the instruments endpoint time to start reporting
   // a good instrument
-  React.useEffect(() => {
+  useEffect(() => {
     if (attachedGripper?.ok === false) {
       setPollForSubsystemUpdate(true)
     } else if (
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/FlexPipetteCard.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/FlexPipetteCard.tsx
index 3a1354f7680..50848a92d0c 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/FlexPipetteCard.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/FlexPipetteCard.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 import {
@@ -29,6 +29,7 @@ import {
 
 import { AboutPipetteSlideout } from './AboutPipetteSlideout'
 
+import type { MouseEventHandler } from 'react'
 import type {
   BadPipette,
   HostConfig,
@@ -79,12 +80,11 @@ export function FlexPipetteCard({
   const [
     showAboutPipetteSlideout,
     setShowAboutPipetteSlideout,
-  ] = React.useState<boolean>(false)
-  const [showChoosePipette, setShowChoosePipette] = React.useState(false)
-  const [
-    selectedPipette,
-    setSelectedPipette,
-  ] = React.useState<SelectablePipettes>(SINGLE_MOUNT_PIPETTES)
+  ] = useState<boolean>(false)
+  const [showChoosePipette, setShowChoosePipette] = useState(false)
+  const [selectedPipette, setSelectedPipette] = useState<SelectablePipettes>(
+    SINGLE_MOUNT_PIPETTES
+  )
   const attachedPipetteIs96Channel =
     attachedPipette?.ok && attachedPipette.instrumentName === 'p1000_96'
   const selectedPipetteForWizard = attachedPipetteIs96Channel
@@ -107,7 +107,7 @@ export function FlexPipetteCard({
       host,
     })
   }
-  const handleChoosePipette: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleChoosePipette: MouseEventHandler<HTMLButtonElement> = () => {
     setShowChoosePipette(true)
   }
   const handleAttach = (): void => {
@@ -115,17 +115,15 @@ export function FlexPipetteCard({
     handleLaunchPipetteWizardFlows(FLOWS.ATTACH)
   }
 
-  const handleDetach: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleDetach: MouseEventHandler<HTMLButtonElement> = () => {
     handleLaunchPipetteWizardFlows(FLOWS.DETACH)
   }
 
-  const handleCalibrate: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleCalibrate: MouseEventHandler<HTMLButtonElement> = () => {
     handleLaunchPipetteWizardFlows(FLOWS.CALIBRATE)
   }
 
-  const [pollForSubsystemUpdate, setPollForSubsystemUpdate] = React.useState(
-    false
-  )
+  const [pollForSubsystemUpdate, setPollForSubsystemUpdate] = useState(false)
   const subsystem = attachedPipette?.subsystem ?? null
   const { data: subsystemUpdateData } = useCurrentSubsystemUpdateQuery(
     subsystem,
@@ -139,7 +137,7 @@ export function FlexPipetteCard({
   // detected until the update has been done for 5 seconds
   // this gives the instruments endpoint time to start reporting
   // a good instrument
-  React.useEffect(() => {
+  useEffect(() => {
     if (attachedPipette?.ok === false) {
       setPollForSubsystemUpdate(true)
     } else if (
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/ProtocolAnalysisErrorBanner.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/ProtocolAnalysisErrorBanner.tsx
index 18a8f0e682a..753ed296d86 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/ProtocolAnalysisErrorBanner.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/ProtocolAnalysisErrorBanner.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Trans, useTranslation } from 'react-i18next'
 
@@ -18,6 +18,7 @@ import {
 
 import { getTopPortalEl } from '/app/App/portal'
 
+import type { MouseEventHandler } from 'react'
 import type { AnalysisError } from '@opentrons/shared-data'
 
 interface ProtocolAnalysisErrorBannerProps {
@@ -29,9 +30,9 @@ export function ProtocolAnalysisErrorBanner(
 ): JSX.Element {
   const { errors } = props
   const { t } = useTranslation(['run_details'])
-  const [showErrorDetails, setShowErrorDetails] = React.useState(false)
+  const [showErrorDetails, setShowErrorDetails] = useState(false)
 
-  const handleToggleDetails: React.MouseEventHandler = e => {
+  const handleToggleDetails: MouseEventHandler = e => {
     e.preventDefault()
     e.stopPropagation()
     setShowErrorDetails(!showErrorDetails)
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ConfirmCancelModal.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ConfirmCancelModal.tsx
index 083b7f752fc..770217dad82 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ConfirmCancelModal.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ConfirmCancelModal.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 
@@ -27,6 +27,7 @@ import { useTrackProtocolRunEvent } from '/app/redux-resources/analytics'
 import { useIsFlex } from '/app/redux-resources/robots'
 import { ANALYTICS_PROTOCOL_RUN_ACTION } from '/app/redux/analytics'
 
+import type { MouseEventHandler } from 'react'
 import type { RunStatus } from '@opentrons/api-client'
 
 export interface UseConfirmCancelModalResult {
@@ -35,7 +36,7 @@ export interface UseConfirmCancelModalResult {
 }
 
 export function useConfirmCancelModal(): UseConfirmCancelModalResult {
-  const [showModal, setShowModal] = React.useState(false)
+  const [showModal, setShowModal] = useState(false)
 
   const toggleModal = (): void => {
     setShowModal(!showModal)
@@ -58,14 +59,14 @@ export function ConfirmCancelModal(
   const { stopRun } = useStopRunMutation()
   const isFlex = useIsFlex(robotName)
   const { trackProtocolRunEvent } = useTrackProtocolRunEvent(runId, robotName)
-  const [isCanceling, setIsCanceling] = React.useState(false)
+  const [isCanceling, setIsCanceling] = useState(false)
   const { t } = useTranslation('run_details')
 
   const cancelRunAlertInfo = isFlex
     ? t('cancel_run_alert_info_flex')
     : t('cancel_run_alert_info_ot2')
 
-  const cancelRun: React.MouseEventHandler<HTMLButtonElement> = (e): void => {
+  const cancelRun: MouseEventHandler<HTMLButtonElement> = (e): void => {
     e.preventDefault()
     e.stopPropagation()
     setIsCanceling(true)
@@ -78,7 +79,8 @@ export function ConfirmCancelModal(
       },
     })
   }
-  React.useEffect(() => {
+
+  useEffect(() => {
     if (
       runStatus === RUN_STATUS_STOP_REQUESTED ||
       runStatus === RUN_STATUS_STOPPED
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/RunFailedModal.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/RunFailedModal.tsx
index 77041e48c18..33d7949a449 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/RunFailedModal.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/RunFailedModal.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 
@@ -25,6 +25,7 @@ import {
 import { useDownloadRunLog } from '../../../../hooks'
 import { RUN_STATUS_SUCCEEDED } from '@opentrons/api-client'
 
+import type { MouseEventHandler } from 'react'
 import type { RunStatus } from '@opentrons/api-client'
 import type { ModalProps } from '@opentrons/components'
 import type { RunCommandError } from '@opentrons/shared-data'
@@ -41,7 +42,7 @@ export interface UseRunFailedModalResult {
 export function useRunFailedModal(
   runErrors: UseRunErrorsResult
 ): UseRunFailedModalResult {
-  const [showRunFailedModal, setShowRunFailedModal] = React.useState(false)
+  const [showRunFailedModal, setShowRunFailedModal] = useState(false)
 
   const toggleModal = (): void => {
     setShowRunFailedModal(!showRunFailedModal)
@@ -95,7 +96,7 @@ export function RunFailedModal({
     toggleModal()
   }
 
-  const handleDownloadClick: React.MouseEventHandler<HTMLAnchorElement> = e => {
+  const handleDownloadClick: MouseEventHandler<HTMLAnchorElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     downloadRunLog()
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/index.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/index.tsx
index 40375135db9..fa13d31487b 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/index.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { css } from 'styled-components'
 
@@ -30,8 +30,10 @@ import { RunHeaderContent } from './RunHeaderContent'
 import { EQUIPMENT_POLL_MS } from './constants'
 import { isCancellableStatus } from './utils'
 
+import type { RefObject } from 'react'
+
 export interface ProtocolRunHeaderProps {
-  protocolRunHeaderRef: React.RefObject<HTMLDivElement> | null
+  protocolRunHeaderRef: RefObject<HTMLDivElement> | null
   robotName: string
   runId: string
   makeHandleJumpToStep: (index: number) => () => void
@@ -70,7 +72,7 @@ export function ProtocolRunHeader(
     runErrors,
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (protocolData != null && !isRobotViewable) {
       navigate('/devices')
     }
@@ -78,7 +80,7 @@ export function ProtocolRunHeader(
 
   // To persist "run again" loading conditions into a new run, we need a scalar that persists longer than
   // the runControl isResetRunLoading, which completes before we want to change user-facing copy/CTAs.
-  const isResetRunLoadingRef = React.useRef(false)
+  const isResetRunLoadingRef = useRef(false)
   if (runStatus === RUN_STATUS_IDLE || runStatus === RUN_STATUS_RUNNING) {
     isResetRunLoadingRef.current = false
   }
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx
index 8e10948795a..c1382acb777 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -60,11 +60,12 @@ import { SetupLiquids } from './SetupLiquids'
 import { EmptySetupStep } from './EmptySetupStep'
 import { HowLPCWorksModal } from './SetupLabwarePositionCheck/HowLPCWorksModal'
 
+import type { RefObject } from 'react'
 import type { Dispatch, State } from '/app/redux/types'
 import type { StepKey } from '/app/redux/protocol-runs'
 
 interface ProtocolRunSetupProps {
-  protocolRunHeaderRef: React.RefObject<HTMLDivElement> | null
+  protocolRunHeaderRef: RefObject<HTMLDivElement> | null
   robotName: string
   runId: string
 }
@@ -92,9 +93,7 @@ export function ProtocolRunSetup({
   const isFlex = useIsFlex(robotName)
   const runHasStarted = useRunHasStarted(runId)
   const { analysisErrors } = useProtocolAnalysisErrors(runId)
-  const [expandedStepKey, setExpandedStepKey] = React.useState<StepKey | null>(
-    null
-  )
+  const [expandedStepKey, setExpandedStepKey] = useState<StepKey | null>(null)
   const robotType = isFlex ? FLEX_ROBOT_TYPE : OT2_ROBOT_TYPE
   const deckConfigCompatibility = useDeckConfigurationCompatibility(
     robotType,
@@ -481,14 +480,14 @@ function StepRightElement(props: StepRightElementProps): JSX.Element | null {
 
 function LearnAboutLPC(): JSX.Element {
   const { t } = useTranslation('protocol_setup')
-  const [showLPCHelpModal, setShowLPCHelpModal] = React.useState(false)
+  const [showLPCHelpModal, setShowLPCHelpModal] = useState(false)
   return (
     <>
       <Link
         css={TYPOGRAPHY.linkPSemiBold}
         marginRight={SPACING.spacing16}
         whiteSpace={NO_WRAP}
-        onClick={(e: React.MouseEvent) => {
+        onClick={(e: MouseEvent) => {
           // clicking link shouldn't toggle step expanded state
           e.preventDefault()
           e.stopPropagation()
diff --git a/app/src/organisms/Desktop/Devices/RobotOverflowMenu.tsx b/app/src/organisms/Desktop/Devices/RobotOverflowMenu.tsx
index 287c2ff032f..d2f5f3e8a82 100644
--- a/app/src/organisms/Desktop/Devices/RobotOverflowMenu.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotOverflowMenu.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
@@ -31,6 +31,7 @@ import { useCurrentRunId } from '/app/resources/runs'
 import { ConnectionTroubleshootingModal } from './ConnectionTroubleshootingModal'
 import { useIsRobotBusy } from '/app/redux-resources/robots'
 
+import type { MouseEventHandler, MouseEvent, ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 import type { Dispatch } from '/app/redux/types'
@@ -54,11 +55,11 @@ export function RobotOverflowMenu(props: RobotOverflowMenuProps): JSX.Element {
   const [
     showChooseProtocolSlideout,
     setShowChooseProtocolSlideout,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
   const [
     showConnectionTroubleshootingModal,
     setShowConnectionTroubleshootingModal,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   const isRobotOnWrongVersionOfSoftware = useIsRobotOnWrongVersionOfSoftware(
     robot.name
@@ -66,20 +67,20 @@ export function RobotOverflowMenu(props: RobotOverflowMenuProps): JSX.Element {
 
   const isRobotBusy = useIsRobotBusy({ poll: true })
 
-  const handleClickRun: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickRun: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setShowChooseProtocolSlideout(true)
     setShowOverflowMenu(false)
   }
-  const handleClickConnectionTroubleshooting: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickConnectionTroubleshooting: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setShowConnectionTroubleshootingModal(true)
     setShowOverflowMenu(false)
   }
 
-  let menuItems: React.ReactNode
+  let menuItems: ReactNode
   if (robot.status === CONNECTABLE && runId == null) {
     menuItems = (
       <>
@@ -161,7 +162,7 @@ export function RobotOverflowMenu(props: RobotOverflowMenuProps): JSX.Element {
       data-testid={`RobotCard_${String(robot.name)}_overflowMenu`}
       flexDirection={DIRECTION_COLUMN}
       position={POSITION_RELATIVE}
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.stopPropagation()
       }}
       {...styleProps}
diff --git a/app/src/organisms/Desktop/Devices/RobotOverviewOverflowMenu.tsx b/app/src/organisms/Desktop/Devices/RobotOverviewOverflowMenu.tsx
index 3b6dda678ca..5ff5ac357b6 100644
--- a/app/src/organisms/Desktop/Devices/RobotOverviewOverflowMenu.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotOverviewOverflowMenu.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { css } from 'styled-components'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
@@ -35,6 +35,8 @@ import { useIsRobotBusy } from '/app/redux-resources/robots'
 import { useCanDisconnect } from '/app/resources/networking/hooks'
 import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstopNotDisengaged'
 import { useCurrentRunId } from '/app/resources/runs'
+
+import type { MouseEventHandler, MouseEvent } from 'react'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 import type { Dispatch } from '/app/redux/types'
 
@@ -61,25 +63,23 @@ export const RobotOverviewOverflowMenu = (
 
   const dispatch = useDispatch<Dispatch>()
 
-  const handleClickRestart: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleClickRestart: MouseEventHandler<HTMLButtonElement> = () => {
     dispatch(restartRobot(robot.name))
   }
 
-  const handleClickHomeGantry: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleClickHomeGantry: MouseEventHandler<HTMLButtonElement> = () => {
     dispatch(home(robot.name, ROBOT))
   }
 
   const [
     showChooseProtocolSlideout,
     setShowChooseProtocolSlideout,
-  ] = React.useState<boolean>(false)
-  const [showDisconnectModal, setShowDisconnectModal] = React.useState<boolean>(
-    false
-  )
+  ] = useState<boolean>(false)
+  const [showDisconnectModal, setShowDisconnectModal] = useState<boolean>(false)
 
   const canDisconnect = useCanDisconnect(robot.name)
 
-  const handleClickDisconnect: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleClickDisconnect: MouseEventHandler<HTMLButtonElement> = () => {
     setShowDisconnectModal(true)
   }
 
@@ -87,7 +87,7 @@ export const RobotOverviewOverflowMenu = (
     dispatch(checkShellUpdate())
   })
 
-  const handleClickRun: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleClickRun: MouseEventHandler<HTMLButtonElement> = () => {
     setShowChooseProtocolSlideout(true)
   }
 
@@ -125,7 +125,7 @@ export const RobotOverviewOverflowMenu = (
           top="2.25rem"
           right={0}
           flexDirection={DIRECTION_COLUMN}
-          onClick={(e: React.MouseEvent) => {
+          onClick={(e: MouseEvent) => {
             e.preventDefault()
             e.stopPropagation()
             setShowOverflowMenu(false)
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx
index d4ddba6e764..763ca9f0cb2 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import snakeCase from 'lodash/snakeCase'
@@ -40,6 +40,7 @@ import {
 import { useRobot, useIsFlex } from '/app/redux-resources/robots'
 import { useNotifyAllRunsQuery } from '/app/resources/runs'
 
+import type { MouseEventHandler } from 'react'
 import type { State, Dispatch } from '/app/redux/types'
 import type { ResetConfigRequest } from '/app/redux/robot-admin/types'
 
@@ -61,7 +62,7 @@ export function DeviceResetSlideout({
   const doTrackEvent = useTrackEvent()
   const robot = useRobot(robotName)
   const dispatch = useDispatch<Dispatch>()
-  const [resetOptions, setResetOptions] = React.useState<ResetConfigRequest>({})
+  const [resetOptions, setResetOptions] = useState<ResetConfigRequest>({})
   const runsQueryResponse = useNotifyAllRunsQuery()
   const isFlex = useIsFlex(robotName)
 
@@ -98,11 +99,11 @@ export function DeviceResetSlideout({
       ? options.filter(opt => opt.id.includes('authorizedKeys'))
       : []
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchResetConfigOptions(robotName))
   }, [dispatch, robotName])
 
-  const downloadCalibrationLogs: React.MouseEventHandler = e => {
+  const downloadCalibrationLogs: MouseEventHandler = e => {
     e.preventDefault()
     doTrackEvent({
       name: ANALYTICS_CALIBRATION_DATA_DOWNLOADED,
@@ -120,7 +121,7 @@ export function DeviceResetSlideout({
     )
   }
 
-  const downloadRunHistoryLogs: React.MouseEventHandler = e => {
+  const downloadRunHistoryLogs: MouseEventHandler = e => {
     e.preventDefault()
     const runsHistory =
       runsQueryResponse != null ? runsQueryResponse.data?.data : []
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx
index 1472204ce8f..ff083c9b3e5 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import { useForm, Controller } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
@@ -28,6 +28,7 @@ import { FileUpload } from '/app/molecules/FileUpload'
 import { UploadInput } from '/app/molecules/UploadInput'
 import { restartRobot } from '/app/redux/robot-admin'
 
+import type { ChangeEvent, MouseEventHandler } from 'react'
 import type { FieldError, Resolver } from 'react-hook-form'
 import type { RobotSettingsField } from '@opentrons/api-client'
 import type { Dispatch } from '/app/redux/types'
@@ -63,11 +64,11 @@ export function FactoryModeSlideout({
 
   const last = sn?.substring(sn.length - 4)
 
-  const [currentStep, setCurrentStep] = React.useState<number>(1)
-  const [toggleValue, setToggleValue] = React.useState<boolean>(false)
-  const [file, setFile] = React.useState<File | null>(null)
-  const [fileError, setFileError] = React.useState<string | null>(null)
-  const [isUploading, setIsUploading] = React.useState<boolean>(false)
+  const [currentStep, setCurrentStep] = useState<number>(1)
+  const [toggleValue, setToggleValue] = useState<boolean>(false)
+  const [file, setFile] = useState<File | null>(null)
+  const [fileError, setFileError] = useState<string | null>(null)
+  const [isUploading, setIsUploading] = useState<boolean>(false)
 
   const onFinishCompleteClick = (): void => {
     dispatch(restartRobot(robotName))
@@ -142,11 +143,11 @@ export function FactoryModeSlideout({
     void handleSubmit(onSubmit)()
   }
 
-  const handleToggleClick: React.MouseEventHandler<Element> = () => {
+  const handleToggleClick: MouseEventHandler<Element> = () => {
     setToggleValue(toggleValue => !toggleValue)
   }
 
-  const handleCompleteClick: React.MouseEventHandler<Element> = () => {
+  const handleCompleteClick: MouseEventHandler<Element> = () => {
     setIsUploading(true)
     updateRobotSetting({ id: 'enableOEMMode', value: toggleValue })
   }
@@ -173,7 +174,7 @@ export function FactoryModeSlideout({
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     // initialize local state to OEM mode value
     if (isOEMMode != null) {
       setToggleValue(isOEMMode)
@@ -229,7 +230,7 @@ export function FactoryModeSlideout({
                 id="factoryModeInput"
                 name="factoryModeInput"
                 type="text"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
                   field.onChange(e)
                   clearErrors()
                 }}
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx
index 5c02dc8eb95..55d9806a88f 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { useForm, Controller } from 'react-hook-form'
@@ -24,9 +24,11 @@ import { useTrackEvent, ANALYTICS_RENAME_ROBOT } from '/app/redux/analytics'
 import { Slideout } from '/app/atoms/Slideout'
 import { useIsFlex } from '/app/redux-resources/robots'
 
+import type { ChangeEvent } from 'react'
 import type { Resolver, FieldError } from 'react-hook-form'
 import type { UpdatedRobotName } from '@opentrons/api-client'
 import type { State, Dispatch } from '/app/redux/types'
+
 interface RenameRobotSlideoutProps {
   isExpanded: boolean
   onCloseClick: () => void
@@ -49,9 +51,7 @@ export function RenameRobotSlideout({
   robotName,
 }: RenameRobotSlideoutProps): JSX.Element {
   const { t } = useTranslation('device_settings')
-  const [previousRobotName, setPreviousRobotName] = React.useState<string>(
-    robotName
-  )
+  const [previousRobotName, setPreviousRobotName] = useState<string>(robotName)
   const isFlex = useIsFlex(robotName)
   const trackEvent = useTrackEvent()
   const navigate = useNavigate()
@@ -190,7 +190,7 @@ export function RenameRobotSlideout({
               id="newRobotName"
               name="newRobotName"
               type="text"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 field.onChange(e)
                 trigger('newRobotName')
               }}
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/Troubleshooting.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/Troubleshooting.tsx
index 45b2b96f462..a216c71cbd4 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/Troubleshooting.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/Troubleshooting.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
@@ -25,6 +25,7 @@ import { useToaster } from '/app/organisms/ToasterOven'
 import { CONNECTABLE } from '/app/redux/discovery'
 import { useRobot } from '/app/redux-resources/robots'
 
+import type { MouseEventHandler } from 'react'
 import type { IconProps } from '@opentrons/components'
 
 interface TroubleshootingProps {
@@ -38,16 +39,15 @@ export function Troubleshooting({
   const robot = useRobot(robotName)
   const controlDisabled = robot?.status !== CONNECTABLE
   const logsAvailable = robot?.health?.logs != null
-  const [
-    isDownloadingRobotLogs,
-    setIsDownloadingRobotLogs,
-  ] = React.useState<boolean>(false)
+  const [isDownloadingRobotLogs, setIsDownloadingRobotLogs] = useState<boolean>(
+    false
+  )
   const { makeToast, eatToast } = useToaster()
   const toastIcon: IconProps = { name: 'ot-spinner', spin: true }
 
   const host = useHost()
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
     setIsDownloadingRobotLogs(true)
     const toastId = makeToast(t('downloading_logs') as string, INFO_TOAST, {
       disableTimeout: true,
@@ -99,8 +99,8 @@ export function Troubleshooting({
     }
   }
 
-  // set ref on component to check if component is mounted https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref
-  const mounted = React.useRef(null)
+  // set ref on component to check if component is mounted https://dev/reference/react/useRef#manipulating-the-dom-with-a-ref
+  const mounted = useRef(null)
 
   return (
     <Flex
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UpdateRobotSoftware.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UpdateRobotSoftware.tsx
index afe1481e68f..a893c616508 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UpdateRobotSoftware.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UpdateRobotSoftware.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
@@ -24,6 +24,7 @@ import { TertiaryButton } from '/app/atoms/buttons'
 import { getRobotUpdateDisplayInfo } from '/app/redux/robot-update'
 import { useDispatchStartRobotUpdate } from '/app/redux/robot-update/hooks'
 
+import type { ChangeEventHandler, MouseEventHandler } from 'react'
 import type { State } from '/app/redux/types'
 
 const OT_APP_UPDATE_PAGE_LINK = 'https://opentrons.com/ot-app/'
@@ -49,10 +50,10 @@ export function UpdateRobotSoftware({
   })
   const updateDisabled = updateFromFileDisabledReason !== null
   const [updateButtonProps, updateButtonTooltipProps] = useHoverTooltip()
-  const inputRef = React.useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
   const dispatchStartRobotUpdate = useDispatchStartRobotUpdate()
 
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = event => {
+  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
     const { files } = event.target
     if (files?.length === 1 && !updateDisabled) {
       dispatchStartRobotUpdate(robotName, files[0].path)
@@ -65,7 +66,7 @@ export function UpdateRobotSoftware({
     }
   }
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
     inputRef.current?.click()
   }
 
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/UploadKeyInput.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/UploadKeyInput.tsx
index 6d450c336f2..4e79bba2cdc 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/UploadKeyInput.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/UploadKeyInput.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { forwardRef, useEffect, useRef } from 'react'
 import styled from 'styled-components'
 import { useSelector } from 'react-redux'
 import last from 'lodash/last'
@@ -6,6 +6,7 @@ import last from 'lodash/last'
 import { useDispatchApiRequest } from '/app/redux/robot-api'
 import { postWifiKeys, getWifiKeyByRequestId } from '/app/redux/networking'
 
+import type { ChangeEventHandler, ForwardedRef } from 'react'
 import type { State } from '/app/redux/types'
 
 export interface UploadKeyInputProps {
@@ -28,17 +29,17 @@ const HiddenInput = styled.input`
 
 const UploadKeyInputComponent = (
   props: UploadKeyInputProps,
-  ref: React.ForwardedRef<HTMLInputElement>
+  ref: ForwardedRef<HTMLInputElement>
 ): JSX.Element => {
   const { robotName, label, onUpload } = props
   const [dispatchApi, requestIds] = useDispatchApiRequest()
-  const handleUpload = React.useRef<(key: string) => void>()
+  const handleUpload = useRef<(key: string) => void>()
 
   const createdKeyId = useSelector((state: State) => {
     return getWifiKeyByRequestId(state, robotName, last(requestIds) ?? null)
   })?.id
 
-  const handleFileInput: React.ChangeEventHandler<HTMLInputElement> = event => {
+  const handleFileInput: ChangeEventHandler<HTMLInputElement> = event => {
     if (event.target.files && event.target.files.length > 0) {
       const file = event.target.files[0]
       event.target.value = ''
@@ -47,11 +48,11 @@ const UploadKeyInputComponent = (
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleUpload.current = onUpload
   }, [onUpload])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (createdKeyId != null && handleUpload.current) {
       handleUpload.current(createdKeyId)
     }
@@ -67,7 +68,6 @@ const UploadKeyInputComponent = (
   )
 }
 
-export const UploadKeyInput = React.forwardRef<
-  HTMLInputElement,
-  UploadKeyInputProps
->(UploadKeyInputComponent)
+export const UploadKeyInput = forwardRef<HTMLInputElement, UploadKeyInputProps>(
+  UploadKeyInputComponent
+)
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsAdvanced.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsAdvanced.tsx
index feb67b08d9f..adf2c92a9a5 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsAdvanced.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsAdvanced.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { useSelector, useDispatch } from 'react-redux'
 
@@ -50,6 +50,7 @@ import { getRobotSerialNumber, UNREACHABLE } from '/app/redux/discovery'
 import { getTopPortalEl } from '/app/App/portal'
 import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstopNotDisengaged'
 
+import type { MouseEventHandler } from 'react'
 import type { State, Dispatch } from '/app/redux/types'
 import type {
   RobotSettings,
@@ -69,19 +70,18 @@ export function RobotSettingsAdvanced({
   const [
     showRenameRobotSlideout,
     setShowRenameRobotSlideout,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
   const [
     showDeviceResetSlideout,
     setShowDeviceResetSlideout,
-  ] = React.useState<boolean>(false)
-  const [
-    showDeviceResetModal,
-    setShowDeviceResetModal,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
+  const [showDeviceResetModal, setShowDeviceResetModal] = useState<boolean>(
+    false
+  )
   const [
     showFactoryModeSlideout,
     setShowFactoryModeSlideout,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   const isRobotBusy = useIsRobotBusy({ poll: true })
   const isEstopNotDisengaged = useIsEstopNotDisengaged(robotName)
@@ -95,10 +95,8 @@ export function RobotSettingsAdvanced({
   const reachable = robot?.status !== UNREACHABLE
   const sn = robot?.status != null ? getRobotSerialNumber(robot) : null
 
-  const [isRobotReachable, setIsRobotReachable] = React.useState<boolean>(
-    reachable
-  )
-  const [resetOptions, setResetOptions] = React.useState<ResetConfigRequest>({})
+  const [isRobotReachable, setIsRobotReachable] = useState<boolean>(reachable)
+  const [resetOptions, setResetOptions] = useState<ResetConfigRequest>({})
   const findSettings = (id: string): RobotSettingsField | undefined =>
     settings?.find(s => s.id === id)
 
@@ -124,11 +122,11 @@ export function RobotSettingsAdvanced({
 
   const dispatch = useDispatch<Dispatch>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchSettings(robotName))
   }, [dispatch, robotName])
 
-  React.useEffect(() => {
+  useEffect(() => {
     updateRobotStatus(isRobotBusy)
   }, [isRobotBusy, updateRobotStatus])
 
@@ -291,7 +289,7 @@ export function FeatureFlagToggle({
 
   if (id == null) return null
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsFeatureFlags.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsFeatureFlags.tsx
index 363589867fc..aa1210cdecc 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsFeatureFlags.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsFeatureFlags.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
 import {
@@ -17,6 +17,8 @@ import {
   getRobotSettings,
   fetchSettings,
 } from '/app/redux/robot-settings'
+
+import type { MouseEventHandler } from 'react'
 import type { State, Dispatch } from '/app/redux/types'
 import type {
   RobotSettings,
@@ -50,7 +52,7 @@ export function RobotSettingsFeatureFlags({
 
   const dispatch = useDispatch<Dispatch>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchSettings(robotName))
   }, [dispatch, robotName])
 
@@ -81,7 +83,7 @@ export function FeatureFlagToggle({
 
   if (id == null) return null
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     dispatch(updateSetting(robotName, id, !value))
   }
 
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx
index 955ead2de49..8a4fc045a65 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { css } from 'styled-components'
@@ -32,6 +32,7 @@ import {
   INIT_STATUS,
 } from '/app/resources/health/hooks'
 
+import type { ChangeEventHandler } from 'react'
 import type { State } from '/app/redux/types'
 import type { SetStatusBarCreateCommand } from '@opentrons/shared-data/protocol'
 import type { RobotUpdateSession } from '/app/redux/robot-update/types'
@@ -67,8 +68,8 @@ export function RobotUpdateProgressModal({
 }: RobotUpdateProgressModalProps): JSX.Element {
   const dispatch = useDispatch()
   const { t } = useTranslation('device_settings')
-  const [showFileSelect, setShowFileSelect] = React.useState<boolean>(false)
-  const installFromFileRef = React.useRef<HTMLInputElement>(null)
+  const [showFileSelect, setShowFileSelect] = useState<boolean>(false)
+  const installFromFileRef = useRef<HTMLInputElement>(null)
 
   const completeRobotUpdateHandler = (): void => {
     if (closeUpdateBuildroot != null) closeUpdateBuildroot()
@@ -85,14 +86,14 @@ export function RobotUpdateProgressModal({
   useStatusBarAnimation(error != null)
   useCleanupRobotUpdateSessionOnDismount()
 
-  const handleFileSelect: React.ChangeEventHandler<HTMLInputElement> = event => {
+  const handleFileSelect: ChangeEventHandler<HTMLInputElement> = event => {
     const { files } = event.target
     if (files?.length === 1) {
       dispatch(startRobotUpdate(robotName, files[0].path))
     }
     setShowFileSelect(false)
   }
-  React.useEffect(() => {
+  useEffect(() => {
     if (showFileSelect && installFromFileRef.current)
       installFromFileRef.current.click()
   }, [showFileSelect])
@@ -233,13 +234,11 @@ function useAllowExitIfUpdateStalled(
   progressPercent: number,
   robotInitStatus: RobotInitializationStatus
 ): boolean {
-  const [letUserExitUpdate, setLetUserExitUpdate] = React.useState<boolean>(
-    false
-  )
-  const prevSeenUpdateProgress = React.useRef<number | null>(null)
-  const exitTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+  const [letUserExitUpdate, setLetUserExitUpdate] = useState<boolean>(false)
+  const prevSeenUpdateProgress = useRef<number | null>(null)
+  const exitTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (updateStep === 'initial' && prevSeenUpdateProgress.current !== null) {
       prevSeenUpdateProgress.current = null
     } else if (progressPercent !== prevSeenUpdateProgress.current) {
@@ -258,7 +257,7 @@ function useAllowExitIfUpdateStalled(
     }
   }, [progressPercent, updateStep, robotInitStatus])
 
-  React.useEffect(() => {
+  useEffect(() => {
     return () => {
       if (exitTimeoutRef.current) clearTimeout(exitTimeoutRef.current)
     }
@@ -298,13 +297,13 @@ function useStatusBarAnimation(isError: boolean): void {
     }
   }
 
-  React.useEffect(startUpdatingAnimation, [])
-  React.useEffect(startIdleAnimationIfFailed, [isError])
+  useEffect(startUpdatingAnimation, [])
+  useEffect(startIdleAnimationIfFailed, [isError])
 }
 
 function useCleanupRobotUpdateSessionOnDismount(): void {
   const dispatch = useDispatch()
-  React.useEffect(() => {
+  useEffect(() => {
     return () => {
       dispatch(clearRobotUpdateSession())
     }
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useLPCSuccessToast.test.ts b/app/src/organisms/Desktop/Devices/hooks/__tests__/useLPCSuccessToast.test.ts
index a64b65252a1..6cb6897d8ca 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useLPCSuccessToast.test.ts
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useLPCSuccessToast.test.ts
@@ -1,11 +1,10 @@
-import * as React from 'react'
+import { useContext } from 'react'
 import { vi, it, expect, describe } from 'vitest'
 import { renderHook } from '@testing-library/react'
 import { useLPCSuccessToast } from '..'
-import type * as ReactType from 'react'
 
 vi.mock('react', async importOriginal => {
-  const actualReact = await importOriginal<typeof ReactType>()
+  const actualReact = await importOriginal<typeof useContext>()
   return {
     ...actualReact,
     useContext: vi.fn(),
@@ -14,7 +13,7 @@ vi.mock('react', async importOriginal => {
 
 describe('useLPCSuccessToast', () => {
   it('return true when useContext returns true', () => {
-    vi.mocked(React.useContext).mockReturnValue({
+    vi.mocked(useContext).mockReturnValue({
       setIsShowingLPCSuccessToast: true,
     })
     const { result } = renderHook(() => useLPCSuccessToast())
@@ -23,7 +22,7 @@ describe('useLPCSuccessToast', () => {
     })
   })
   it('return false when useContext returns false', () => {
-    vi.mocked(React.useContext).mockReturnValue({
+    vi.mocked(useContext).mockReturnValue({
       setIsShowingLPCSuccessToast: false,
     })
     const { result } = renderHook(() => useLPCSuccessToast())
diff --git a/app/src/organisms/Desktop/Labware/LabwareCard/CustomLabwareOverflowMenu.tsx b/app/src/organisms/Desktop/Labware/LabwareCard/CustomLabwareOverflowMenu.tsx
index 6183fdf00de..08826189798 100644
--- a/app/src/organisms/Desktop/Labware/LabwareCard/CustomLabwareOverflowMenu.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareCard/CustomLabwareOverflowMenu.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
@@ -36,6 +36,7 @@ import {
   openCustomLabwareDirectory,
 } from '/app/redux/custom-labware'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 
 const LABWARE_CREATOR_HREF = 'https://labware.opentrons.com/create/'
@@ -51,7 +52,7 @@ export function CustomLabwareOverflowMenu(
   const { filename, onDelete } = props
   const { t } = useTranslation(['labware_landing', 'shared'])
   const dispatch = useDispatch<Dispatch>()
-  const [showOverflowMenu, setShowOverflowMenu] = React.useState<boolean>(false)
+  const [showOverflowMenu, setShowOverflowMenu] = useState<boolean>(false)
   const overflowMenuRef = useOnClickOutside<HTMLDivElement>({
     onClickOutside: () => {
       setShowOverflowMenu(false)
@@ -67,24 +68,24 @@ export function CustomLabwareOverflowMenu(
     dispatch(deleteCustomLabwareFile(filename))
     onDelete?.()
   }, true)
-  const handleOpenInFolder: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleOpenInFolder: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setShowOverflowMenu(false)
     dispatch(openCustomLabwareDirectory())
   }
-  const handleClickDelete: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickDelete: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setShowOverflowMenu(false)
     confirmDeleteLabware()
   }
-  const handleOverflowClick: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleOverflowClick: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickLabwareCreator: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickLabwareCreator: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     trackEvent({
@@ -95,7 +96,7 @@ export function CustomLabwareOverflowMenu(
     window.open(LABWARE_CREATOR_HREF, '_blank')
   }
 
-  const handleCancelModal: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleCancelModal: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     cancelDeleteLabware()
diff --git a/app/src/organisms/Desktop/Labware/LabwareCard/hooks.tsx b/app/src/organisms/Desktop/Labware/LabwareCard/hooks.tsx
index 62e0589ac51..3a5890d7f60 100644
--- a/app/src/organisms/Desktop/Labware/LabwareCard/hooks.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareCard/hooks.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react'
+import { useEffect } from 'react'
+import type { RefObject } from 'react'
 
 export function useCloseOnOutsideClick(
-  ref: React.RefObject<HTMLInputElement>,
+  ref: RefObject<HTMLInputElement>,
   onClose: () => void
 ): void {
   const handleClick = (e: MouseEvent): void => {
@@ -11,7 +12,7 @@ export function useCloseOnOutsideClick(
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener('click', handleClick)
     return () => {
       document.removeEventListener('click', handleClick)
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/ExpandingTitle.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/ExpandingTitle.tsx
index c92a63434cb..a21a769ca43 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/ExpandingTitle.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/ExpandingTitle.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import {
   ALIGN_CENTER,
   Box,
@@ -6,20 +6,21 @@ import {
   Flex,
   Icon,
   JUSTIFY_SPACE_BETWEEN,
-  Link,
-  SIZE_1,
   LegacyStyledText,
+  Link,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { Divider } from '/app/atoms/structure'
 
+import type { ReactNode } from 'react'
+
 interface ExpandingTitleProps {
-  label: React.ReactNode
-  diagram?: React.ReactNode
+  label: ReactNode
+  diagram?: ReactNode
 }
 
 export function ExpandingTitle(props: ExpandingTitleProps): JSX.Element {
-  const [diagramVisible, setDiagramVisible] = React.useState<boolean>(false)
+  const [diagramVisible, setDiagramVisible] = useState<boolean>(false)
   const toggleDiagramVisible = (): void => {
     setDiagramVisible(currentDiagramVisible => !currentDiagramVisible)
   }
@@ -39,7 +40,7 @@ export function ExpandingTitle(props: ExpandingTitleProps): JSX.Element {
           <Link role="button" onClick={toggleDiagramVisible}>
             <Icon
               name={diagramVisible ? 'chevron-up' : 'chevron-down'}
-              size={SIZE_1}
+              size="1rem"
             />
           </Link>
         )}
diff --git a/app/src/organisms/Desktop/ProtocolAnalysisFailure/index.tsx b/app/src/organisms/Desktop/ProtocolAnalysisFailure/index.tsx
index b2b904dd19d..3fe86f0385f 100644
--- a/app/src/organisms/Desktop/ProtocolAnalysisFailure/index.tsx
+++ b/app/src/organisms/Desktop/ProtocolAnalysisFailure/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useDispatch } from 'react-redux'
 import { useTranslation, Trans } from 'react-i18next'
@@ -6,15 +6,15 @@ import { css } from 'styled-components'
 
 import {
   ALIGN_CENTER,
-  Btn,
   Banner,
+  Btn,
   Flex,
   JUSTIFY_FLEX_END,
-  Modal,
   JUSTIFY_SPACE_BETWEEN,
+  LegacyStyledText,
+  Modal,
   PrimaryButton,
   SPACING,
-  LegacyStyledText,
   TYPOGRAPHY,
   WRAP_REVERSE,
 } from '@opentrons/components'
@@ -22,6 +22,7 @@ import {
 import { analyzeProtocol } from '/app/redux/protocol-storage'
 import { getTopPortalEl } from '/app/App/portal'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 interface ProtocolAnalysisFailureProps {
   errors: string[]
@@ -34,19 +35,19 @@ export function ProtocolAnalysisFailure(
   const { errors, protocolKey } = props
   const { t } = useTranslation(['protocol_list', 'shared'])
   const dispatch = useDispatch<Dispatch>()
-  const [showErrorDetails, setShowErrorDetails] = React.useState(false)
+  const [showErrorDetails, setShowErrorDetails] = useState(false)
 
-  const handleClickShowDetails: React.MouseEventHandler = e => {
+  const handleClickShowDetails: MouseEventHandler = e => {
     e.preventDefault()
     e.stopPropagation()
     setShowErrorDetails(true)
   }
-  const handleClickHideDetails: React.MouseEventHandler = e => {
+  const handleClickHideDetails: MouseEventHandler = e => {
     e.preventDefault()
     e.stopPropagation()
     setShowErrorDetails(false)
   }
-  const handleClickReanalyze: React.MouseEventHandler = e => {
+  const handleClickReanalyze: MouseEventHandler = e => {
     e.preventDefault()
     e.stopPropagation()
     dispatch(analyzeProtocol(protocolKey))
diff --git a/app/src/organisms/Desktop/ProtocolDetails/ProtocolLabwareDetails.tsx b/app/src/organisms/Desktop/ProtocolDetails/ProtocolLabwareDetails.tsx
index 4fe95406355..cb74884c89e 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/ProtocolLabwareDetails.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/ProtocolLabwareDetails.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import {
@@ -23,6 +23,7 @@ import { Divider } from '/app/atoms/structure'
 import { getTopPortalEl } from '/app/App/portal'
 import { LabwareDetails } from '/app/organisms/Desktop/Labware/LabwareDetails'
 
+import type { MouseEventHandler } from 'react'
 import type { LoadLabwareRunTimeCommand } from '@opentrons/shared-data'
 import type { LabwareDefAndDate } from '/app/local-resources/labware'
 
@@ -164,9 +165,9 @@ export const LabwareDetailOverflowMenu = (
   const [
     showLabwareDetailSlideout,
     setShowLabwareDetailSlideout,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
-  const handleClickMenuItem: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickMenuItem: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     setShowOverflowMenu(false)
     setShowLabwareDetailSlideout(true)
diff --git a/app/src/organisms/Desktop/ProtocolDetails/RobotConfigurationDetails.tsx b/app/src/organisms/Desktop/ProtocolDetails/RobotConfigurationDetails.tsx
index 5789a8af6e6..d53a6eba889 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/RobotConfigurationDetails.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/RobotConfigurationDetails.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -31,6 +31,7 @@ import { Divider } from '/app/atoms/structure'
 import { getRobotTypeDisplayName } from '../ProtocolsLanding/utils'
 import { getSlotsForThermocycler } from './utils'
 
+import type { ReactNode } from 'react'
 import type {
   CutoutConfigProtocolSpec,
   LoadModuleRunTimeCommand,
@@ -153,7 +154,7 @@ export const RobotConfigurationDetails = (
       ) : null}
       {requiredModuleDetails.map((module, index) => {
         return (
-          <React.Fragment key={`module_${index}`}>
+          <Fragment key={`module_${index}`}>
             <Divider marginY={SPACING.spacing12} width="100%" />
             <RobotConfigurationDetailsItem
               label={`${t('slot')} ${
@@ -179,12 +180,12 @@ export const RobotConfigurationDetails = (
                 </>
               }
             />
-          </React.Fragment>
+          </Fragment>
         )
       })}
       {nonStandardRequiredFixtureDetails.map((fixture, index) => {
         return (
-          <React.Fragment key={`fixture_${index}`}>
+          <Fragment key={`fixture_${index}`}>
             <Divider marginY={SPACING.spacing12} width="100%" />
             <RobotConfigurationDetailsItem
               label={`${t('slot')} ${getCutoutDisplayName(fixture.cutoutId)}`}
@@ -208,7 +209,7 @@ export const RobotConfigurationDetails = (
                 </>
               }
             />
-          </React.Fragment>
+          </Fragment>
         )
       })}
     </Flex>
@@ -217,7 +218,7 @@ export const RobotConfigurationDetails = (
 
 interface RobotConfigurationDetailsItemProps {
   label: string
-  item: React.ReactNode
+  item: ReactNode
 }
 
 export const RobotConfigurationDetailsItem = (
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/ProtocolList.tsx b/app/src/organisms/Desktop/ProtocolsLanding/ProtocolList.tsx
index 112999787d0..9cd58925e34 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/ProtocolList.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/ProtocolList.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
@@ -35,6 +35,7 @@ import { ProtocolUploadInput } from './ProtocolUploadInput'
 import { ProtocolCard } from './ProtocolCard'
 import { EmptyStateLinks } from './EmptyStateLinks'
 
+import type { MouseEventHandler } from 'react'
 import type {
   StoredProtocolData,
   ProtocolSort,
@@ -61,17 +62,17 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null {
   const [
     showImportProtocolSlideout,
     setShowImportProtocolSlideout,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
   const [
     showChooseRobotToRunProtocolSlideout,
     setShowChooseRobotToRunProtocolSlideout,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
   const [
     showSendProtocolToFlexSlideout,
     setShowSendProtocolToFlexSlideout,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
   const sortBy = useSelector(getProtocolsDesktopSortKey) ?? 'alphabetical'
-  const [showSortByMenu, setShowSortByMenu] = React.useState<boolean>(false)
+  const [showSortByMenu, setShowSortByMenu] = useState<boolean>(false)
   const toggleSetShowSortByMenu = (): void => {
     setShowSortByMenu(!showSortByMenu)
   }
@@ -80,13 +81,13 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null {
   const [
     selectedProtocol,
     setSelectedProtocol,
-  ] = React.useState<StoredProtocolData | null>(null)
+  ] = useState<StoredProtocolData | null>(null)
 
   const sortedStoredProtocols = useSortedProtocols(sortBy, storedProtocols)
 
   const dispatch = useDispatch<Dispatch>()
 
-  const handleClickOutside: React.MouseEventHandler<HTMLDivElement> = e => {
+  const handleClickOutside: MouseEventHandler<HTMLDivElement> = e => {
     e.preventDefault()
     setShowSortByMenu(false)
   }
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx
index ee95d1abf73..1db51029549 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { saveAs } from 'file-saver'
 import { css } from 'styled-components'
@@ -35,6 +35,7 @@ import { FLOWS } from '/app/organisms/PipetteWizardFlows/constants'
 import { useIsEstopNotDisengaged } from '/app/resources/devices'
 import { useAttachedPipettesFromInstrumentsQuery } from '/app/resources/instruments'
 
+import type { MouseEvent } from 'react'
 import type { Mount } from '@opentrons/components'
 import type { PipetteName } from '@opentrons/shared-data'
 import type { DeleteCalRequestParams } from '@opentrons/api-client'
@@ -82,10 +83,9 @@ export function OverflowMenu({
 
   const tipLengthCalibrations = useAllTipLengthCalibrationsQuery().data?.data
   const { isRunRunning: isRunning } = useRunStatuses()
-  const [
-    showPipetteWizardFlows,
-    setShowPipetteWizardFlows,
-  ] = React.useState<boolean>(false)
+  const [showPipetteWizardFlows, setShowPipetteWizardFlows] = useState<boolean>(
+    false
+  )
   const isEstopNotDisengaged = useIsEstopNotDisengaged(robotName)
   const isPipetteForFlex = isFlexPipette(pipetteName as PipetteName)
   const ot3PipCal =
@@ -103,7 +103,7 @@ export function OverflowMenu({
     calType === 'pipetteOffset'
       ? applicablePipetteOffsetCal != null
       : applicableTipLengthCal != null
-  const handleRecalibrate = (e: React.MouseEvent): void => {
+  const handleRecalibrate = (e: MouseEvent): void => {
     e.preventDefault()
     if (
       !isRunning &&
@@ -116,7 +116,7 @@ export function OverflowMenu({
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
 
-  const handleDownload = (e: React.MouseEvent): void => {
+  const handleDownload = (e: MouseEvent): void => {
     e.preventDefault()
     doTrackEvent({
       name: ANALYTICS_CALIBRATION_DATA_DOWNLOADED,
@@ -137,19 +137,18 @@ export function OverflowMenu({
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isRunning) {
       updateRobotStatus(true)
     }
   }, [isRunning, updateRobotStatus])
 
   const { deleteCalibration } = useDeleteCalibrationMutation()
-  const [
-    selectedPipette,
-    setSelectedPipette,
-  ] = React.useState<SelectablePipettes>(SINGLE_MOUNT_PIPETTES)
+  const [selectedPipette, setSelectedPipette] = useState<SelectablePipettes>(
+    SINGLE_MOUNT_PIPETTES
+  )
 
-  const handleDeleteCalibration = (e: React.MouseEvent): void => {
+  const handleDeleteCalibration = (e: MouseEvent): void => {
     e.preventDefault()
     let params: DeleteCalRequestParams
     if (calType === 'pipetteOffset') {
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
index 16062be3034..bf3be7e788e 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 
@@ -7,15 +7,15 @@ import {
   BORDERS,
   Btn,
   COLORS,
+  CURSOR_DEFAULT,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
   JUSTIFY_SPACE_BETWEEN,
   LegacyStyledText,
-  SPACING,
   Modal,
+  SPACING,
   TYPOGRAPHY,
-  CURSOR_DEFAULT,
 } from '@opentrons/components'
 import {
   useModulesQuery,
@@ -25,11 +25,11 @@ import {
   getCutoutDisplayName,
   getFixtureDisplayName,
   ABSORBANCE_READER_CUTOUTS,
-  ABSORBANCE_READER_V1,
   ABSORBANCE_READER_V1_FIXTURE,
+  ABSORBANCE_READER_V1,
   HEATER_SHAKER_CUTOUTS,
-  HEATERSHAKER_MODULE_V1,
   HEATERSHAKER_MODULE_V1_FIXTURE,
+  HEATERSHAKER_MODULE_V1,
   MAGNETIC_BLOCK_V1_FIXTURE,
   SINGLE_CENTER_CUTOUTS,
   SINGLE_LEFT_CUTOUTS,
@@ -38,8 +38,8 @@ import {
   STAGING_AREA_RIGHT_SLOT_FIXTURE,
   STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
   TEMPERATURE_MODULE_CUTOUTS,
-  TEMPERATURE_MODULE_V2,
   TEMPERATURE_MODULE_V2_FIXTURE,
+  TEMPERATURE_MODULE_V2,
   THERMOCYCLER_MODULE_CUTOUTS,
   THERMOCYCLER_MODULE_V2,
   THERMOCYCLER_V2_FRONT_FIXTURE,
@@ -54,6 +54,7 @@ import { TertiaryButton } from '/app/atoms/buttons'
 import { OddModal } from '/app/molecules/OddModal'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration/'
 
+import type { MouseEventHandler } from 'react'
 import type {
   CutoutConfig,
   CutoutId,
@@ -101,9 +102,7 @@ export function AddFixtureModal({
     // only show provided options if given as props
     initialStage = 'providedOptions'
   }
-  const [optionStage, setOptionStage] = React.useState<OptionStage>(
-    initialStage
-  )
+  const [optionStage, setOptionStage] = useState<OptionStage>(initialStage)
 
   const modalHeader: OddModalHeaderBaseProps = {
     title: t('add_to_slot', {
@@ -425,7 +424,7 @@ const GO_BACK_BUTTON_STYLE = css`
 `
 
 interface FixtureOptionProps {
-  onClickHandler: React.MouseEventHandler
+  onClickHandler: MouseEventHandler
   optionName: string
   buttonText: string
   isOnDevice: boolean
diff --git a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx
index 7c78de6b8e2..ccebc8e124a 100644
--- a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx
+++ b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
@@ -30,11 +30,12 @@ import { SmallButton } from '/app/atoms/buttons'
 import { OddModal } from '/app/molecules/OddModal'
 import { getIsOnDevice } from '/app/redux/config'
 
+import type { MouseEventHandler } from 'react'
+import type { ModalProps } from '@opentrons/components'
 import type {
   OddModalHeaderBaseProps,
   ModalSize,
 } from '/app/molecules/OddModal/types'
-import type { ModalProps } from '@opentrons/components'
 
 // Note (07/13/2023) After the launch, we will unify the modal components into one component.
 // Then TouchScreenModal and DesktopModal will be TouchScreenContent and DesktopContent that only render each content.
@@ -81,7 +82,7 @@ function TouchscreenModal({
   setIsWaitingForResumeOperation,
 }: EstopPressedModalProps): JSX.Element {
   const { t } = useTranslation(['device_settings', 'branded'])
-  const [isResuming, setIsResuming] = React.useState<boolean>(false)
+  const [isResuming, setIsResuming] = useState<boolean>(false)
   const { acknowledgeEstopDisengage } = useAcknowledgeEstopDisengageMutation()
 
   const {
@@ -156,7 +157,7 @@ function DesktopModal({
   setIsWaitingForResumeOperation,
 }: EstopPressedModalProps): JSX.Element {
   const { t } = useTranslation('device_settings')
-  const [isResuming, setIsResuming] = React.useState<boolean>(false)
+  const [isResuming, setIsResuming] = useState<boolean>(false)
   const { acknowledgeEstopDisengage } = useAcknowledgeEstopDisengageMutation()
   const {
     handlePlaceReaderLid,
@@ -174,7 +175,7 @@ function DesktopModal({
     width: '47rem',
   }
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e): void => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (e): void => {
     e.preventDefault()
     setIsResuming(true)
     setIsWaitingForResumeOperation()
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx
index 603ac5af6c3..070e974bed3 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
 import { css } from 'styled-components'
 
 import {
-  Flex,
-  StyledText,
-  SPACING,
-  COLORS,
-  ModalShell,
-  ModalHeader,
   BORDERS,
+  COLORS,
   DIRECTION_COLUMN,
+  Flex,
+  ModalHeader,
+  ModalShell,
+  SPACING,
+  StyledText,
 } from '@opentrons/components'
 
 import { useErrorName } from '../hooks'
@@ -22,6 +22,7 @@ import { InlineNotification } from '/app/atoms/InlineNotification'
 import { StepInfo } from './StepInfo'
 import { getErrorKind } from '../utils'
 
+import type { ReactNode } from 'react'
 import type { LabwareDefinition2, RobotType } from '@opentrons/shared-data'
 import type { IconProps } from '@opentrons/components'
 import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
@@ -33,7 +34,7 @@ export function useErrorDetailsModal(): {
   showModal: boolean
   toggleModal: () => void
 } {
-  const [showModal, setShowModal] = React.useState(false)
+  const [showModal, setShowModal] = useState(false)
 
   const toggleModal = (): void => {
     setShowModal(!showModal)
@@ -113,7 +114,7 @@ export function ErrorDetailsModal(props: ErrorDetailsModalProps): JSX.Element {
 }
 
 type ErrorDetailsModalType = ErrorDetailsModalProps & {
-  children: React.ReactNode
+  children: ReactNode
   modalHeader: OddModalHeaderBaseProps
   toggleModal: () => void
   desktopType: DesktopSizeType
diff --git a/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx b/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx
index b421b4be81f..afd9efba19f 100644
--- a/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx
+++ b/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import {
   RESPONSIVENESS,
@@ -15,6 +15,7 @@ import attachProbe8 from '/app/assets/videos/pipette-wizard-flows/Pipette_Attach
 import attachProbe96 from '/app/assets/videos/pipette-wizard-flows/Pipette_Attach_Probe_96.webm'
 import { GenericWizardTile } from '/app/molecules/GenericWizardTile'
 
+import type { Dispatch } from 'react'
 import type {
   CompletedProtocolAnalysis,
   CreateCommand,
@@ -31,7 +32,7 @@ import type {
 interface AttachProbeProps extends AttachProbeStep {
   protocolData: CompletedProtocolAnalysis
   proceed: () => void
-  registerPosition: React.Dispatch<RegisterPositionAction>
+  registerPosition: Dispatch<RegisterPositionAction>
   chainRunCommands: ReturnType<typeof useChainRunCommands>['chainRunCommands']
   setFatalError: (errorMessage: string) => void
   workingOffsets: WorkingOffset[]
@@ -52,9 +53,7 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
     setFatalError,
     isOnDevice,
   } = props
-  const [showUnableToDetect, setShowUnableToDetect] = React.useState<boolean>(
-    false
-  )
+  const [showUnableToDetect, setShowUnableToDetect] = useState<boolean>(false)
 
   const pipette = protocolData.pipettes.find(p => p.id === pipetteId)
   const pipetteName = pipette?.pipetteName
@@ -72,7 +71,7 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
 
   const pipetteMount = pipette?.mount
 
-  React.useEffect(() => {
+  useEffect(() => {
     // move into correct position for probe attach on mount
     chainRunCommands(
       [
diff --git a/app/src/organisms/LabwarePositionCheck/CheckItem.tsx b/app/src/organisms/LabwarePositionCheck/CheckItem.tsx
index 5d5008554a6..734ee6468b1 100644
--- a/app/src/organisms/LabwarePositionCheck/CheckItem.tsx
+++ b/app/src/organisms/LabwarePositionCheck/CheckItem.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect } from 'react'
 import omit from 'lodash/omit'
 import isEqual from 'lodash/isEqual'
 import { Trans, useTranslation } from 'react-i18next'
@@ -29,6 +29,7 @@ import { getCurrentOffsetForLabwareInLocation } from '/app/transformations/analy
 import { getIsOnDevice } from '/app/redux/config'
 import { getDisplayLocation } from './utils/getDisplayLocation'
 
+import type { Dispatch } from 'react'
 import type { LabwareOffset } from '@opentrons/api-client'
 import type {
   CompletedProtocolAnalysis,
@@ -54,7 +55,7 @@ interface CheckItemProps extends Omit<CheckLabwareStep, 'section'> {
   proceed: () => void
   chainRunCommands: ReturnType<typeof useChainRunCommands>['chainRunCommands']
   setFatalError: (errorMessage: string) => void
-  registerPosition: React.Dispatch<RegisterPositionAction>
+  registerPosition: Dispatch<RegisterPositionAction>
   workingOffsets: WorkingOffset[]
   existingOffsets: LabwareOffset[]
   handleJog: Jog
@@ -131,7 +132,7 @@ export const CheckItem = (props: CheckItemProps): JSX.Element | null => {
       o.initialPosition != null
   )?.initialPosition
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (initialPosition == null && modulePrepCommands.length > 0) {
       chainRunCommands(modulePrepCommands, false)
         .then(() => {})
diff --git a/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx b/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx
index da0952ca407..dd040654a23 100644
--- a/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx
+++ b/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 import {
+  LegacyStyledText,
   RESPONSIVENESS,
   SPACING,
-  LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { RobotMotionLoader } from './RobotMotionLoader'
@@ -14,6 +14,7 @@ import detachProbe8 from '/app/assets/videos/pipette-wizard-flows/Pipette_Detach
 import detachProbe96 from '/app/assets/videos/pipette-wizard-flows/Pipette_Detach_Probe_96.webm'
 import { GenericWizardTile } from '/app/molecules/GenericWizardTile'
 
+import type { Dispatch } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 import type { Jog } from '/app/molecules/JogControls/types'
 import type { useChainRunCommands } from '/app/resources/runs'
@@ -27,7 +28,7 @@ import type { LabwareOffset } from '@opentrons/api-client'
 interface DetachProbeProps extends DetachProbeStep {
   protocolData: CompletedProtocolAnalysis
   proceed: () => void
-  registerPosition: React.Dispatch<RegisterPositionAction>
+  registerPosition: Dispatch<RegisterPositionAction>
   chainRunCommands: ReturnType<typeof useChainRunCommands>['chainRunCommands']
   setFatalError: (errorMessage: string) => void
   workingOffsets: WorkingOffset[]
@@ -58,7 +59,7 @@ export const DetachProbe = (props: DetachProbeProps): JSX.Element | null => {
   }
   const pipetteMount = pipette?.mount
 
-  React.useEffect(() => {
+  useEffect(() => {
     // move into correct position for probe detach on mount
     chainRunCommands(
       [
diff --git a/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx b/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx
index dbaa5970c6c..44e5eb67ded 100644
--- a/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx
+++ b/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
@@ -32,6 +32,7 @@ import { CALIBRATION_PROBE } from '/app/organisms/PipetteWizardFlows/constants'
 import { TerseOffsetTable } from '../ResultsSummary'
 import { getLabwareDefinitionsFromCommands } from '/app/local-resources/labware'
 
+import type { Dispatch } from 'react'
 import type { LabwareOffset } from '@opentrons/api-client'
 import type {
   CompletedProtocolAnalysis,
@@ -49,7 +50,7 @@ const SUPPORT_PAGE_URL = 'https://support.opentrons.com/s/ot2-calibration'
 export const IntroScreen = (props: {
   proceed: () => void
   protocolData: CompletedProtocolAnalysis
-  registerPosition: React.Dispatch<RegisterPositionAction>
+  registerPosition: Dispatch<RegisterPositionAction>
   chainRunCommands: ReturnType<typeof useChainRunCommands>['chainRunCommands']
   handleJog: Jog
   setFatalError: (errorMessage: string) => void
@@ -160,7 +161,7 @@ interface ViewOffsetsProps {
 function ViewOffsets(props: ViewOffsetsProps): JSX.Element {
   const { existingOffsets, labwareDefinitions } = props
   const { t, i18n } = useTranslation('labware_position_check')
-  const [showOffsetsTable, setShowOffsetsModal] = React.useState(false)
+  const [showOffsetsTable, setShowOffsetsModal] = useState(false)
   const latestCurrentOffsets = getLatestCurrentOffsets(existingOffsets)
   return existingOffsets.length > 0 ? (
     <>
diff --git a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
index e212af695a5..bce4808a514 100644
--- a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
+++ b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -11,14 +11,14 @@ import {
   Flex,
   JUSTIFY_SPACE_BETWEEN,
   LabwareRender,
+  LegacyStyledText,
+  ModalShell,
   PipetteRender,
   PrimaryButton,
   RESPONSIVENESS,
   RobotWorkSpace,
   SecondaryButton,
   SPACING,
-  LegacyStyledText,
-  ModalShell,
   TYPOGRAPHY,
   WELL_LABEL_OPTIONS,
 } from '@opentrons/components'
@@ -40,6 +40,7 @@ import { NeedHelpLink } from '/app/molecules/OT2CalibrationNeedHelpLink'
 import { JogControls } from '/app/molecules/JogControls'
 import { LiveOffsetValue } from './LiveOffsetValue'
 
+import type { ReactNode } from 'react'
 import type { PipetteName, LabwareDefinition2 } from '@opentrons/shared-data'
 import type { WellStroke } from '@opentrons/components'
 import type { VectorOffset } from '@opentrons/api-client'
@@ -55,8 +56,8 @@ interface JogToWellProps {
   handleJog: Jog
   pipetteName: PipetteName
   labwareDef: LabwareDefinition2
-  header: React.ReactNode
-  body: React.ReactNode
+  header: ReactNode
+  body: ReactNode
   initialPosition: VectorOffset
   existingOffset: VectorOffset
   shouldUseMetalProbe: boolean
@@ -76,12 +77,12 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => {
     shouldUseMetalProbe,
   } = props
 
-  const [joggedPosition, setJoggedPosition] = React.useState<VectorOffset>(
+  const [joggedPosition, setJoggedPosition] = useState<VectorOffset>(
     initialPosition
   )
   const isOnDevice = useSelector(getIsOnDevice)
-  const [showFullJogControls, setShowFullJogControls] = React.useState(false)
-  React.useEffect(() => {
+  const [showFullJogControls, setShowFullJogControls] = useState(false)
+  useEffect(() => {
     //  NOTE: this will perform a "null" jog when the jog controls mount so
     //  if a user reaches the "confirm exit" modal (unmounting this component)
     //  and clicks "go back" we are able so initialize the live offset to whatever
diff --git a/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx b/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx
index c7505a13d92..de76e855097 100644
--- a/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx
+++ b/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import isEqual from 'lodash/isEqual'
 import {
@@ -27,6 +27,7 @@ import { getDisplayLocation } from './utils/getDisplayLocation'
 import { useSelector } from 'react-redux'
 import { getIsOnDevice } from '/app/redux/config'
 
+import type { Dispatch } from 'react'
 import type {
   CompletedProtocolAnalysis,
   CreateCommand,
@@ -46,7 +47,7 @@ import type { TFunction } from 'i18next'
 interface PickUpTipProps extends PickUpTipStep {
   protocolData: CompletedProtocolAnalysis
   proceed: () => void
-  registerPosition: React.Dispatch<RegisterPositionAction>
+  registerPosition: Dispatch<RegisterPositionAction>
   chainRunCommands: ReturnType<typeof useChainRunCommands>['chainRunCommands']
   setFatalError: (errorMessage: string) => void
   workingOffsets: WorkingOffset[]
@@ -77,7 +78,7 @@ export const PickUpTip = (props: PickUpTipProps): JSX.Element | null => {
     protocolHasModules,
     currentStepIndex,
   } = props
-  const [showTipConfirmation, setShowTipConfirmation] = React.useState(false)
+  const [showTipConfirmation, setShowTipConfirmation] = useState(false)
   const isOnDevice = useSelector(getIsOnDevice)
   const labwareDef = getLabwareDef(labwareId, protocolData)
   const pipette = protocolData.pipettes.find(p => p.id === pipetteId)
diff --git a/app/src/organisms/LabwarePositionCheck/index.tsx b/app/src/organisms/LabwarePositionCheck/index.tsx
index b1453f9267c..e96191c584e 100644
--- a/app/src/organisms/LabwarePositionCheck/index.tsx
+++ b/app/src/organisms/LabwarePositionCheck/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Component } from 'react'
 import { useLogger } from '../../logger'
 import { LabwarePositionCheckComponent } from './LabwarePositionCheckComponent'
 import { FatalErrorModal } from './FatalErrorModal'
@@ -6,6 +6,8 @@ import { getIsOnDevice } from '/app/redux/config'
 import { useSelector } from 'react-redux'
 
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+
+import type { ErrorInfo, ReactNode } from 'react'
 import type {
   CompletedProtocolAnalysis,
   RobotType,
@@ -48,7 +50,7 @@ export const LabwarePositionCheck = (
 }
 
 interface ErrorBoundaryProps {
-  children: React.ReactNode
+  children: ReactNode
   onClose: () => void
   shouldUseMetalProbe: boolean
   logger: ReturnType<typeof useLogger>
@@ -60,7 +62,7 @@ interface ErrorBoundaryProps {
   }) => JSX.Element
   isOnDevice: boolean
 }
-class ErrorBoundary extends React.Component<
+class ErrorBoundary extends Component<
   ErrorBoundaryProps,
   { error: Error | null }
 > {
@@ -69,7 +71,7 @@ class ErrorBoundary extends React.Component<
     this.state = { error: null }
   }
 
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     this.props.logger.error(`LPC error message: ${error.message}`)
     this.props.logger.error(
       `LPC error component stack: ${errorInfo.componentStack}`
diff --git a/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx b/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx
index 7031f176425..4a9cb9f3e4a 100644
--- a/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx
+++ b/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import {
@@ -17,6 +17,8 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { updateConfigValue } from '/app/redux/config'
+
+import type { ChangeEvent } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { UpdateConfigValueAction } from '/app/redux/config/types'
 
@@ -38,7 +40,7 @@ export const ConfirmAttachmentModal = (
 ): JSX.Element | null => {
   const { isProceedToRunModal, onCloseClick, onConfirmClick } = props
   const { t } = useTranslation(['heater_shaker', 'shared'])
-  const [isDismissed, setIsDismissed] = React.useState<boolean>(false)
+  const [isDismissed, setIsDismissed] = useState<boolean>(false)
   const dispatch = useDispatch<Dispatch>()
 
   const confirmAttached = (): void => {
@@ -81,7 +83,7 @@ export const ConfirmAttachmentModal = (
         }`}
       >
         <CheckboxField
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
             setIsDismissed(e.currentTarget.checked)
           }}
           value={isDismissed}
diff --git a/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx b/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx
index 1b189f3174d..bccf5fb3a30 100644
--- a/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx
+++ b/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useCreateLiveCommandMutation } from '@opentrons/react-api-client'
 
@@ -21,6 +21,7 @@ import {
 import { Slideout } from '/app/atoms/Slideout'
 import { SubmitPrimaryButton } from '/app/atoms/buttons'
 
+import type { MouseEventHandler } from 'react'
 import type { HeaterShakerModule } from '/app/redux/modules/types'
 import type { HeaterShakerSetTargetTemperatureCreateCommand } from '@opentrons/shared-data'
 
@@ -35,12 +36,12 @@ export const HeaterShakerSlideout = (
 ): JSX.Element | null => {
   const { module, onCloseClick, isExpanded } = props
   const { t } = useTranslation('device_details')
-  const [hsValue, setHsValue] = React.useState<number | null>(null)
+  const [hsValue, setHsValue] = useState<number | null>(null)
   const { createLiveCommand } = useCreateLiveCommandMutation()
   const moduleName = getModuleDisplayName(module.moduleModel)
   const modulePart = t('temperature')
 
-  const sendSetTemperatureCommand: React.MouseEventHandler<HTMLInputElement> = e => {
+  const sendSetTemperatureCommand: MouseEventHandler<HTMLInputElement> = e => {
     e.preventDefault()
     e.stopPropagation()
 
diff --git a/app/src/organisms/ModuleWizardFlows/index.tsx b/app/src/organisms/ModuleWizardFlows/index.tsx
index 27a3555d70c..b802cd6ca85 100644
--- a/app/src/organisms/ModuleWizardFlows/index.tsx
+++ b/app/src/organisms/ModuleWizardFlows/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
@@ -37,6 +37,7 @@ import {
   useNotifyCurrentMaintenanceRun,
 } from '/app/resources/maintenance_runs'
 
+import type { SetStateAction } from 'react'
 import type { AttachedModule, CommandData } from '@opentrons/api-client'
 import { RUN_STATUS_FAILED } from '@opentrons/api-client'
 import type {
@@ -107,7 +108,7 @@ export const ModuleWizardFlows = (
         )
     ) ?? []
 
-  const [currentStepIndex, setCurrentStepIndex] = React.useState<number>(0)
+  const [currentStepIndex, setCurrentStepIndex] = useState<number>(0)
   const totalStepCount = moduleCalibrationSteps.length - 1
   const currentStep = moduleCalibrationSteps?.[currentStepIndex]
 
@@ -116,18 +117,16 @@ export const ModuleWizardFlows = (
       currentStepIndex === 0 ? currentStepIndex : currentStepIndex - 1
     )
   }
-  const [createdMaintenanceRunId, setCreatedMaintenanceRunId] = React.useState<
+  const [createdMaintenanceRunId, setCreatedMaintenanceRunId] = useState<
     string | null
   >(null)
-  const [createdAdapterId, setCreatedAdapterId] = React.useState<string | null>(
-    null
-  )
+  const [createdAdapterId, setCreatedAdapterId] = useState<string | null>(null)
   // we should start checking for run deletion only after the maintenance run is created
   // and the useCurrentRun poll has returned that created id
   const [
     monitorMaintenanceRunForDeletion,
     setMonitorMaintenanceRunForDeletion,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   const { data: maintenanceRunData } = useNotifyCurrentMaintenanceRun({
     refetchInterval: RUN_REFETCH_INTERVAL,
@@ -142,16 +141,14 @@ export const ModuleWizardFlows = (
     createTargetedMaintenanceRun,
     isLoading: isCreateLoading,
   } = useCreateTargetedMaintenanceRunMutation({
-    onSuccess: (response: {
-      data: { id: React.SetStateAction<string | null> }
-    }) => {
+    onSuccess: (response: { data: { id: SetStateAction<string | null> } }) => {
       setCreatedMaintenanceRunId(response.data.id)
     },
   })
 
   // this will close the modal in case the run was deleted by the terminate
   // activity modal on the ODD
-  React.useEffect(() => {
+  useEffect(() => {
     if (
       createdMaintenanceRunId !== null &&
       maintenanceRunData?.data.id === createdMaintenanceRunId
@@ -171,8 +168,8 @@ export const ModuleWizardFlows = (
     closeFlow,
   ])
 
-  const [errorMessage, setErrorMessage] = React.useState<null | string>(null)
-  const [isExiting, setIsExiting] = React.useState<boolean>(false)
+  const [errorMessage, setErrorMessage] = useState<null | string>(null)
+  const [isExiting, setIsExiting] = useState<boolean>(false)
   const proceed = (): void => {
     if (!isCommandMutationLoading) {
       setCurrentStepIndex(
@@ -216,9 +213,9 @@ export const ModuleWizardFlows = (
     }
   }
 
-  const [isRobotMoving, setIsRobotMoving] = React.useState<boolean>(false)
+  const [isRobotMoving, setIsRobotMoving] = useState<boolean>(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isCommandMutationLoading || isExiting) {
       setIsRobotMoving(true)
     } else {
diff --git a/app/src/organisms/ODD/InstrumentInfo/index.tsx b/app/src/organisms/ODD/InstrumentInfo/index.tsx
index 68c3ebd5388..ecfb9456b05 100644
--- a/app/src/organisms/ODD/InstrumentInfo/index.tsx
+++ b/app/src/organisms/ODD/InstrumentInfo/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import {
@@ -8,8 +8,8 @@ import {
   Flex,
   JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
-  SPACING,
   LegacyStyledText,
+  SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import {
@@ -23,6 +23,7 @@ import { FLOWS } from '/app/organisms/PipetteWizardFlows/constants'
 import { GRIPPER_FLOW_TYPES } from '/app/organisms/GripperWizardFlows/constants'
 import { formatTimeWithUtcLabel } from '/app/resources/runs'
 
+import type { ComponentProps, MouseEventHandler } from 'react'
 import type { InstrumentData } from '@opentrons/api-client'
 import type { PipetteMount } from '@opentrons/shared-data'
 import type { StyleProps } from '@opentrons/components'
@@ -36,14 +37,14 @@ export const InstrumentInfo = (props: InstrumentInfoProps): JSX.Element => {
   const { t, i18n } = useTranslation('instruments_dashboard')
   const { instrument } = props
   const navigate = useNavigate()
-  const [wizardProps, setWizardProps] = React.useState<
-    | React.ComponentProps<typeof GripperWizardFlows>
-    | React.ComponentProps<typeof PipetteWizardFlows>
+  const [wizardProps, setWizardProps] = useState<
+    | ComponentProps<typeof GripperWizardFlows>
+    | ComponentProps<typeof PipetteWizardFlows>
     | null
   >(null)
 
   const sharedGripperWizardProps: Pick<
-    React.ComponentProps<typeof GripperWizardFlows>,
+    ComponentProps<typeof GripperWizardFlows>,
     'attachedGripper' | 'closeFlow'
   > = {
     attachedGripper: instrument,
@@ -58,7 +59,7 @@ export const InstrumentInfo = (props: InstrumentInfoProps): JSX.Element => {
     instrument.mount !== 'extension' &&
     instrument.data?.channels === 96
 
-  const handleDetach: React.MouseEventHandler = () => {
+  const handleDetach: MouseEventHandler = () => {
     if (instrument != null && instrument.ok) {
       setWizardProps(
         instrument.mount === 'extension'
@@ -85,7 +86,7 @@ export const InstrumentInfo = (props: InstrumentInfoProps): JSX.Element => {
       )
     }
   }
-  const handleRecalibrate: React.MouseEventHandler = () => {
+  const handleRecalibrate: MouseEventHandler = () => {
     if (instrument != null && instrument.ok) {
       setWizardProps(
         instrument.mount === 'extension'
diff --git a/app/src/organisms/ODD/InstrumentMountItem/AttachedInstrumentMountItem.tsx b/app/src/organisms/ODD/InstrumentMountItem/AttachedInstrumentMountItem.tsx
index d2de81b8fdc..7af7dd4029a 100644
--- a/app/src/organisms/ODD/InstrumentMountItem/AttachedInstrumentMountItem.tsx
+++ b/app/src/organisms/ODD/InstrumentMountItem/AttachedInstrumentMountItem.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { SINGLE_MOUNT_PIPETTES } from '@opentrons/shared-data'
@@ -12,6 +12,7 @@ import { FLOWS } from '/app/organisms/PipetteWizardFlows/constants'
 import { GRIPPER_FLOW_TYPES } from '/app/organisms/GripperWizardFlows/constants'
 import { LabeledMount } from './LabeledMount'
 
+import type { ComponentProps, MouseEventHandler } from 'react'
 import type { InstrumentData } from '@opentrons/api-client'
 import type { GripperModel, PipetteModel } from '@opentrons/shared-data'
 import type { Mount } from '/app/redux/pipettes/types'
@@ -24,8 +25,8 @@ interface AttachedInstrumentMountItemProps {
   attachedInstrument: InstrumentData | null
   setWizardProps: (
     props:
-      | React.ComponentProps<typeof GripperWizardFlows>
-      | React.ComponentProps<typeof PipetteWizardFlows>
+      | ComponentProps<typeof GripperWizardFlows>
+      | ComponentProps<typeof PipetteWizardFlows>
       | null
   ) => void
 }
@@ -36,15 +37,12 @@ export function AttachedInstrumentMountItem(
   const navigate = useNavigate()
   const { mount, attachedInstrument, setWizardProps } = props
 
-  const [showChoosePipetteModal, setShowChoosePipetteModal] = React.useState(
-    false
+  const [showChoosePipetteModal, setShowChoosePipetteModal] = useState(false)
+  const [selectedPipette, setSelectedPipette] = useState<SelectablePipettes>(
+    SINGLE_MOUNT_PIPETTES
   )
-  const [
-    selectedPipette,
-    setSelectedPipette,
-  ] = React.useState<SelectablePipettes>(SINGLE_MOUNT_PIPETTES)
 
-  const handleClick: React.MouseEventHandler = () => {
+  const handleClick: MouseEventHandler = () => {
     if (attachedInstrument == null && mount !== 'extension') {
       setShowChoosePipetteModal(true)
     } else if (attachedInstrument == null && mount === 'extension') {
diff --git a/app/src/organisms/ODD/InstrumentMountItem/ProtocolInstrumentMountItem.tsx b/app/src/organisms/ODD/InstrumentMountItem/ProtocolInstrumentMountItem.tsx
index be034e8fb7a..86ae69e4107 100644
--- a/app/src/organisms/ODD/InstrumentMountItem/ProtocolInstrumentMountItem.tsx
+++ b/app/src/organisms/ODD/InstrumentMountItem/ProtocolInstrumentMountItem.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react'
+import { useState, useMemo } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
-  Flex,
-  COLORS,
-  SPACING,
-  TYPOGRAPHY,
-  Icon,
-  DIRECTION_COLUMN,
   ALIGN_FLEX_START,
   BORDERS,
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  Icon,
   JUSTIFY_FLEX_START,
+  SPACING,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 import {
   NINETY_SIX_CHANNEL,
@@ -27,6 +27,7 @@ import { FLOWS } from '/app/organisms/PipetteWizardFlows/constants'
 import { PipetteWizardFlows } from '/app/organisms/PipetteWizardFlows'
 import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows'
 
+import type { MouseEventHandler } from 'react'
 import type { InstrumentData } from '@opentrons/api-client'
 import type {
   GripperModel,
@@ -61,26 +62,24 @@ export function ProtocolInstrumentMountItem(
 ): JSX.Element {
   const { i18n, t } = useTranslation('protocol_setup')
   const { mount, attachedInstrument, speccedName } = props
-  const [
-    showPipetteWizardFlow,
-    setShowPipetteWizardFlow,
-  ] = React.useState<boolean>(false)
-  const [
-    showGripperWizardFlow,
-    setShowGripperWizardFlow,
-  ] = React.useState<boolean>(false)
-  const memoizedAttachedGripper = React.useMemo(
+  const [showPipetteWizardFlow, setShowPipetteWizardFlow] = useState<boolean>(
+    false
+  )
+  const [showGripperWizardFlow, setShowGripperWizardFlow] = useState<boolean>(
+    false
+  )
+  const memoizedAttachedGripper = useMemo(
     () =>
       attachedInstrument?.instrumentType === 'gripper' && attachedInstrument.ok
         ? attachedInstrument
         : null,
     []
   )
-  const [flowType, setFlowType] = React.useState<string>(FLOWS.ATTACH)
+  const [flowType, setFlowType] = useState<string>(FLOWS.ATTACH)
   const selectedPipette =
     speccedName === 'p1000_96' ? NINETY_SIX_CHANNEL : SINGLE_MOUNT_PIPETTES
 
-  const handleCalibrate: React.MouseEventHandler = () => {
+  const handleCalibrate: MouseEventHandler = () => {
     setFlowType(FLOWS.CALIBRATE)
     if (mount === 'extension') {
       setShowGripperWizardFlow(true)
@@ -88,7 +87,7 @@ export function ProtocolInstrumentMountItem(
       setShowPipetteWizardFlow(true)
     }
   }
-  const handleAttach: React.MouseEventHandler = () => {
+  const handleAttach: MouseEventHandler = () => {
     setFlowType(FLOWS.ATTACH)
     if (mount === 'extension') {
       setShowGripperWizardFlow(true)
diff --git a/app/src/organisms/ODD/Navigation/NavigationMenu.tsx b/app/src/organisms/ODD/Navigation/NavigationMenu.tsx
index d2347bf52b0..0b1cbb40e92 100644
--- a/app/src/organisms/ODD/Navigation/NavigationMenu.tsx
+++ b/app/src/organisms/ODD/Navigation/NavigationMenu.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
@@ -21,10 +21,11 @@ import { useLights } from '/app/resources/devices'
 import { getTopPortalEl } from '/app/App/portal'
 import { RestartRobotConfirmationModal } from './RestartRobotConfirmationModal'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 
 interface NavigationMenuProps {
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
   robotName: string
   setShowNavMenu: (showNavMenu: boolean) => void
 }
@@ -37,7 +38,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
   const [
     showRestartRobotConfirmationModal,
     setShowRestartRobotConfirmationModal,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   const navigate = useNavigate()
 
diff --git a/app/src/organisms/ODD/Navigation/index.tsx b/app/src/organisms/ODD/Navigation/index.tsx
index 8b60946f929..e562793e36b 100644
--- a/app/src/organisms/ODD/Navigation/index.tsx
+++ b/app/src/organisms/ODD/Navigation/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { useLocation, NavLink } from 'react-router-dom'
@@ -32,6 +32,8 @@ import { useScrollPosition } from '/app/local-resources/dom-utils'
 import { useNetworkConnection } from '/app/resources/networking/hooks/useNetworkConnection'
 import { getLocalRobot } from '/app/redux/discovery'
 import { NavigationMenu } from './NavigationMenu'
+
+import type { Dispatch, SetStateAction } from 'react'
 import type { ON_DEVICE_DISPLAY_PATHS } from '/app/App/OnDeviceDisplayApp'
 
 const NAV_LINKS: Array<typeof ON_DEVICE_DISPLAY_PATHS[number]> = [
@@ -65,7 +67,7 @@ const CHAR_LIMIT_NO_ICON = 15
 interface NavigationProps {
   //  optionalProps for setting the zIndex and position between multiple sticky elements
   //  used for ProtocolDashboard
-  setNavMenuIsOpened?: React.Dispatch<React.SetStateAction<boolean>>
+  setNavMenuIsOpened?: Dispatch<SetStateAction<boolean>>
   longPressModalIsOpened?: boolean
 }
 export function Navigation(props: NavigationProps): JSX.Element {
@@ -73,7 +75,7 @@ export function Navigation(props: NavigationProps): JSX.Element {
   const { t } = useTranslation('top_navigation')
   const location = useLocation()
   const localRobot = useSelector(getLocalRobot)
-  const [showNavMenu, setShowNavMenu] = React.useState<boolean>(false)
+  const [showNavMenu, setShowNavMenu] = useState<boolean>(false)
   const robotName = localRobot?.name != null ? localRobot.name : 'no name'
 
   // We need to display an icon for what type of network connection (if any)
@@ -95,8 +97,8 @@ export function Navigation(props: NavigationProps): JSX.Element {
 
   const { scrollRef, isScrolled } = useScrollPosition()
 
-  const navBarScrollRef = React.useRef<HTMLDivElement>(null)
-  React.useEffect(() => {
+  const navBarScrollRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
     navBarScrollRef?.current?.scrollIntoView({
       behavior: 'auto',
       inline: 'center',
diff --git a/app/src/organisms/ODD/NetworkSettings/SelectAuthenticationType.tsx b/app/src/organisms/ODD/NetworkSettings/SelectAuthenticationType.tsx
index b918d48df5e..9f163929220 100644
--- a/app/src/organisms/ODD/NetworkSettings/SelectAuthenticationType.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/SelectAuthenticationType.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -21,6 +21,7 @@ import { getNetworkInterfaces, fetchStatus } from '/app/redux/networking'
 import { useIsUnboxingFlowOngoing } from '/app/redux-resources/config'
 import { AlternativeSecurityTypeModal } from './AlternativeSecurityTypeModal'
 
+import type { ChangeEvent } from 'react'
 import type { WifiSecurityType } from '@opentrons/api-client'
 import type { Dispatch, State } from '/app/redux/types'
 
@@ -44,7 +45,7 @@ export function SelectAuthenticationType({
   const [
     showAlternativeSecurityTypeModal,
     setShowAlternativeSecurityTypeModal,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   const securityButtons = [
     {
@@ -59,11 +60,11 @@ export function SelectAuthenticationType({
     },
   ]
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
     setSelectedAuthType(event.target.value as WifiSecurityType)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchStatus(robotName))
   }, [robotName, dispatch])
 
diff --git a/app/src/organisms/ODD/NetworkSettings/SetWifiSsid.tsx b/app/src/organisms/ODD/NetworkSettings/SetWifiSsid.tsx
index d2ea891a254..114d906215b 100644
--- a/app/src/organisms/ODD/NetworkSettings/SetWifiSsid.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/SetWifiSsid.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -15,10 +15,12 @@ import {
 import { FullKeyboard } from '/app/atoms/SoftwareKeyboard'
 import { useIsUnboxingFlowOngoing } from '/app/redux-resources/config'
 
+import type { Dispatch, SetStateAction } from 'react'
+
 interface SetWifiSsidProps {
   errorMessage?: string | null
   inputSsid: string
-  setInputSsid: React.Dispatch<React.SetStateAction<string>>
+  setInputSsid: Dispatch<SetStateAction<string>>
 }
 
 export function SetWifiSsid({
@@ -27,7 +29,7 @@ export function SetWifiSsid({
   setInputSsid,
 }: SetWifiSsidProps): JSX.Element {
   const { t } = useTranslation(['device_settings', 'shared'])
-  const keyboardRef = React.useRef(null)
+  const keyboardRef = useRef(null)
   const isUnboxingFlowOngoing = useIsUnboxingFlowOngoing()
 
   return (
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/index.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/index.tsx
index a7148788639..4f67deb6da6 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/index.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 
@@ -26,6 +26,7 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { getTopPortalEl } from '/app/App/portal'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type {
   CutoutFixtureId,
   CutoutId,
@@ -37,7 +38,7 @@ import type { SetupScreens } from '../types'
 interface ProtocolSetupDeckConfigurationProps {
   cutoutId: CutoutId | null
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
   providedFixtureOptions: CutoutFixtureId[]
 }
 
@@ -53,14 +54,12 @@ export function ProtocolSetupDeckConfiguration({
     'shared',
   ])
 
-  const [
-    showConfigurationModal,
-    setShowConfigurationModal,
-  ] = React.useState<boolean>(true)
-  const [
-    showDiscardChangeModal,
-    setShowDiscardChangeModal,
-  ] = React.useState<boolean>(false)
+  const [showConfigurationModal, setShowConfigurationModal] = useState<boolean>(
+    true
+  )
+  const [showDiscardChangeModal, setShowDiscardChangeModal] = useState<boolean>(
+    false
+  )
 
   const mostRecentAnalysis = useMostRecentCompletedAnalysis(runId)
   const deckConfig = useNotifyDeckConfigurationQuery()?.data ?? []
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/index.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/index.tsx
index 2d440fc9516..3daa713de88 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/index.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 
@@ -52,6 +52,7 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { LabwareMapView } from './LabwareMapView'
 import { SingleLabwareModal } from './SingleLabwareModal'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type {
   HeaterShakerCloseLatchCreateCommand,
@@ -71,7 +72,7 @@ const DECK_CONFIG_POLL_MS = 5000
 
 export interface ProtocolSetupLabwareProps {
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
   isConfirmed: boolean
   setIsConfirmed: (confirmed: boolean) => void
 }
@@ -83,12 +84,12 @@ export function ProtocolSetupLabware({
   setIsConfirmed,
 }: ProtocolSetupLabwareProps): JSX.Element {
   const { t } = useTranslation('protocol_setup')
-  const [showMapView, setShowMapView] = React.useState<boolean>(false)
+  const [showMapView, setShowMapView] = useState<boolean>(false)
   const [
     showLabwareDetailsModal,
     setShowLabwareDetailsModal,
-  ] = React.useState<boolean>(false)
-  const [selectedLabware, setSelectedLabware] = React.useState<
+  ] = useState<boolean>(false)
+  const [selectedLabware, setSelectedLabware] = useState<
     | (LabwareDefinition2 & {
         location: LabwareLocation
         nickName: string | null
@@ -289,7 +290,7 @@ function LabwareLatch({
     createLiveCommand,
     isLoading: isLiveCommandLoading,
   } = useCreateLiveCommandMutation()
-  const [isRefetchingModules, setIsRefetchingModules] = React.useState(false)
+  const [isRefetchingModules, setIsRefetchingModules] = useState(false)
   const isLatchLoading =
     isLiveCommandLoading ||
     isRefetchingModules ||
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/index.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/index.tsx
index 153315d294b..d8aa63d4b26 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/index.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
@@ -25,12 +25,14 @@ import { SmallButton } from '/app/atoms/buttons'
 import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { getTotalVolumePerLiquidId } from '/app/transformations/analysis'
 import { LiquidDetails } from './LiquidDetails'
+
+import type { Dispatch, SetStateAction } from 'react'
 import type { ParsedLiquid, RunTimeCommand } from '@opentrons/shared-data'
 import type { SetupScreens } from '../types'
 
 export interface ProtocolSetupLiquidsProps {
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
   isConfirmed: boolean
   setIsConfirmed: (confirmed: boolean) => void
 }
@@ -95,13 +97,13 @@ export function ProtocolSetupLiquids({
           </Flex>
         </Flex>
         {liquidsInLoadOrder?.map(liquid => (
-          <React.Fragment key={liquid.id}>
+          <Fragment key={liquid.id}>
             <LiquidsList
               liquid={liquid}
               commands={protocolData?.commands}
               runId={runId}
             />
-          </React.Fragment>
+          </Fragment>
         ))}
       </Flex>
     </>
@@ -116,7 +118,7 @@ interface LiquidsListProps {
 
 export function LiquidsList(props: LiquidsListProps): JSX.Element {
   const { liquid, runId, commands } = props
-  const [openItem, setOpenItem] = React.useState(false)
+  const [openItem, setOpenItem] = useState(false)
   const labwareByLiquidId = parseLabwareInfoByLiquidId(commands ?? [])
 
   return (
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/FixtureTable.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/FixtureTable.tsx
index 3491d7530c7..7d990e112a0 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/FixtureTable.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/FixtureTable.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react'
+import { useState, Fragment } from 'react'
+import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
@@ -29,7 +30,9 @@ import { SmallButton } from '/app/atoms/buttons'
 import { useDeckConfigurationCompatibility } from '/app/resources/deck_configuration/hooks'
 import { getRequiredDeckConfig } from '/app/resources/deck_configuration/utils'
 import { LocationConflictModal } from '/app/organisms/LocationConflictModal'
+import { getLocalRobot } from '/app/redux/discovery'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type {
   CompletedProtocolAnalysis,
   CutoutFixtureId,
@@ -39,13 +42,11 @@ import type {
 } from '@opentrons/shared-data'
 import type { SetupScreens } from '../types'
 import type { CutoutConfigAndCompatibility } from '/app/resources/deck_configuration/hooks'
-import { useSelector } from 'react-redux'
-import { getLocalRobot } from '/app/redux/discovery'
 
 interface FixtureTableProps {
   robotType: RobotType
   mostRecentAnalysis: CompletedProtocolAnalysis | null
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
   setCutoutId: (cutoutId: CutoutId) => void
   setProvidedFixtureOptions: (providedFixtureOptions: CutoutFixtureId[]) => void
 }
@@ -134,7 +135,7 @@ export function FixtureTable({
 
 interface FixtureTableItemProps extends CutoutConfigAndCompatibility {
   lastItem: boolean
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
   setCutoutId: (cutoutId: CutoutId) => void
   setProvidedFixtureOptions: (providedFixtureOptions: CutoutFixtureId[]) => void
   deckDef: DeckDefinition
@@ -158,7 +159,7 @@ function FixtureTableItem({
   const [
     showLocationConflictModal,
     setShowLocationConflictModal,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   const isCurrentFixtureCompatible =
     cutoutFixtureId != null &&
@@ -215,7 +216,7 @@ function FixtureTableItem({
     )
   }
   return (
-    <React.Fragment key={cutoutId}>
+    <Fragment key={cutoutId}>
       {showLocationConflictModal ? (
         <LocationConflictModal
           onCloseClick={() => {
@@ -265,6 +266,6 @@ function FixtureTableItem({
           {chipLabel}
         </Flex>
       </Flex>
-    </React.Fragment>
+    </Fragment>
   )
 }
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ModuleTable.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ModuleTable.tsx
index 1a0b93c6f57..d4b0a32ad2d 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ModuleTable.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ModuleTable.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
@@ -39,6 +39,7 @@ import {
 } from '/app/resources/runs'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { CommandData } from '@opentrons/api-client'
 import type { CutoutConfig, DeckDefinition } from '@opentrons/shared-data'
 import type { ModulePrepCommandsType } from '/app/local-resources/modules'
@@ -59,7 +60,7 @@ export function ModuleTable(props: ModuleTableProps): JSX.Element {
   const [
     prepCommandErrorMessage,
     setPrepCommandErrorMessage,
-  ] = React.useState<string>('')
+  ] = useState<string>('')
 
   const { data: deckConfig } = useNotifyDeckConfigurationQuery({
     refetchInterval: DECK_CONFIG_REFETCH_INTERVAL,
@@ -119,7 +120,7 @@ interface ModuleTableItemProps {
   isLoading: boolean
   module: AttachedProtocolModuleMatch
   prepCommandErrorMessage: string
-  setPrepCommandErrorMessage: React.Dispatch<React.SetStateAction<string>>
+  setPrepCommandErrorMessage: Dispatch<SetStateAction<string>>
   deckDef: DeckDefinition
   robotName: string
 }
@@ -162,11 +163,11 @@ function ModuleTableItem({
   )
   const isModuleReady = module.attachedModuleMatch != null
 
-  const [showModuleWizard, setShowModuleWizard] = React.useState<boolean>(false)
+  const [showModuleWizard, setShowModuleWizard] = useState<boolean>(false)
   const [
     showLocationConflictModal,
     setShowLocationConflictModal,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   let moduleStatus: JSX.Element = (
     <>
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ProtocolSetupModulesAndDeck.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ProtocolSetupModulesAndDeck.tsx
index bcbc2b57bba..542ba3d3624 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ProtocolSetupModulesAndDeck.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ProtocolSetupModulesAndDeck.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
@@ -37,6 +37,7 @@ import { ModuleTable } from './ModuleTable'
 import { ModulesAndDeckMapView } from './ModulesAndDeckMapView'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { CutoutId, CutoutFixtureId } from '@opentrons/shared-data'
 import type { SetupScreens } from '../types'
 
@@ -45,7 +46,7 @@ const DECK_CONFIG_POLL_MS = 5000
 
 interface ProtocolSetupModulesAndDeckProps {
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
   setCutoutId: (cutoutId: CutoutId) => void
   setProvidedFixtureOptions: (providedFixtureOptions: CutoutFixtureId[]) => void
 }
@@ -62,7 +63,7 @@ export function ProtocolSetupModulesAndDeck({
   const { i18n, t } = useTranslation('protocol_setup')
   const navigate = useNavigate()
   const runStatus = useRunStatus(runId)
-  React.useEffect(() => {
+  useEffect(() => {
     if (runStatus === RUN_STATUS_STOPPED) {
       navigate('/protocols')
     }
@@ -70,12 +71,12 @@ export function ProtocolSetupModulesAndDeck({
   const [
     showSetupInstructionsModal,
     setShowSetupInstructionsModal,
-  ] = React.useState<boolean>(false)
-  const [showMapView, setShowMapView] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
+  const [showMapView, setShowMapView] = useState<boolean>(false)
   const [
     clearModuleMismatchBanner,
     setClearModuleMismatchBanner,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
   const mostRecentAnalysis = useMostRecentCompletedAnalysis(runId)
 
   const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE)
diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx
index d1cf5ae2c0a..e5c8efbcc69 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
 
@@ -19,6 +19,7 @@ import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { ACTIONS } from '../constants'
 
+import type { Dispatch } from 'react'
 import type {
   QuickTransferSummaryState,
   QuickTransferSummaryAction,
@@ -30,7 +31,7 @@ import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard'
 interface AirGapProps {
   onBack: () => void
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
   kind: FlowRateKind
 }
 
@@ -38,15 +39,15 @@ export function AirGap(props: AirGapProps): JSX.Element {
   const { kind, onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
-  const keyboardRef = React.useRef(null)
+  const keyboardRef = useRef(null)
 
-  const [airGapEnabled, setAirGapEnabled] = React.useState<boolean>(
+  const [airGapEnabled, setAirGapEnabled] = useState<boolean>(
     kind === 'aspirate'
       ? state.airGapAspirate != null
       : state.airGapDispense != null
   )
-  const [currentStep, setCurrentStep] = React.useState<number>(1)
-  const [volume, setVolume] = React.useState<number | null>(
+  const [currentStep, setCurrentStep] = useState<number>(1)
+  const [volume, setVolume] = useState<number | null>(
     kind === 'aspirate'
       ? state.airGapAspirate ?? null
       : state.airGapDispense ?? null
diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx
index 9f300b335ad..297054b1d03 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
@@ -17,6 +17,7 @@ import {
 import { FlowRateEntry } from './FlowRate'
 import { PipettePath } from './PipettePath'
 
+import type { Dispatch } from 'react'
 import type {
   QuickTransferSummaryAction,
   QuickTransferSummaryState,
@@ -24,15 +25,13 @@ import type {
 
 interface BaseSettingsProps {
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
 }
 
 export function BaseSettings(props: BaseSettingsProps): JSX.Element | null {
   const { state, dispatch } = props
   const { t } = useTranslation(['quick_transfer', 'shared'])
-  const [selectedSetting, setSelectedSetting] = React.useState<string | null>(
-    null
-  )
+  const [selectedSetting, setSelectedSetting] = useState<string | null>(null)
 
   let pipettePath: string = ''
   if (state.path === 'single') {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx
index 55984b27d8b..e961b480960 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import isEqual from 'lodash/isEqual'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
@@ -22,6 +22,7 @@ import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { ACTIONS } from '../constants'
 
+import type { Dispatch } from 'react'
 import type { DeckConfiguration } from '@opentrons/shared-data'
 import type {
   QuickTransferSummaryState,
@@ -35,7 +36,7 @@ import { i18n } from '/app/i18n'
 interface BlowOutProps {
   onBack: () => void
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
   kind: FlowRateKind
 }
 
@@ -96,11 +97,11 @@ export function BlowOut(props: BlowOutProps): JSX.Element {
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
   const deckConfig = useNotifyDeckConfigurationQuery().data ?? []
 
-  const [isBlowOutEnabled, setisBlowOutEnabled] = React.useState<boolean>(
+  const [isBlowOutEnabled, setisBlowOutEnabled] = useState<boolean>(
     state.blowOut != null
   )
-  const [currentStep, setCurrentStep] = React.useState<number>(1)
-  const [blowOutLocation, setBlowOutLocation] = React.useState<
+  const [currentStep, setCurrentStep] = useState<number>(1)
+  const [blowOutLocation, setBlowOutLocation] = useState<
     BlowOutLocation | undefined
   >(state.blowOut)
 
diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx
index 0692cc904ac..556ddc181c8 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
 
@@ -8,8 +8,8 @@ import {
   DIRECTION_COLUMN,
   Flex,
   InputField,
-  RadioButton,
   POSITION_FIXED,
+  RadioButton,
   SPACING,
 } from '@opentrons/components'
 import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '/app/redux/analytics'
@@ -18,6 +18,7 @@ import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { ACTIONS } from '../constants'
 
+import type { Dispatch } from 'react'
 import type {
   QuickTransferSummaryState,
   QuickTransferSummaryAction,
@@ -29,7 +30,7 @@ import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard'
 interface DelayProps {
   onBack: () => void
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
   kind: FlowRateKind
 }
 
@@ -37,20 +38,20 @@ export function Delay(props: DelayProps): JSX.Element {
   const { kind, onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
-  const keyboardRef = React.useRef(null)
+  const keyboardRef = useRef(null)
 
-  const [currentStep, setCurrentStep] = React.useState<number>(1)
-  const [delayIsEnabled, setDelayIsEnabled] = React.useState<boolean>(
+  const [currentStep, setCurrentStep] = useState<number>(1)
+  const [delayIsEnabled, setDelayIsEnabled] = useState<boolean>(
     kind === 'aspirate'
       ? state.delayAspirate != null
       : state.delayDispense != null
   )
-  const [delayDuration, setDelayDuration] = React.useState<number | null>(
+  const [delayDuration, setDelayDuration] = useState<number | null>(
     kind === 'aspirate'
       ? state.delayAspirate?.delayDuration ?? null
       : state.delayDispense?.delayDuration ?? null
   )
-  const [position, setPosition] = React.useState<number | null>(
+  const [position, setPosition] = useState<number | null>(
     kind === 'aspirate'
       ? state.delayAspirate?.positionFromBottom ?? null
       : state.delayDispense?.positionFromBottom ?? null
diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/FlowRate.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/FlowRate.tsx
index 88279b1c76a..1b2bed604fc 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/FlowRate.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/FlowRate.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 
@@ -24,6 +24,7 @@ import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 
 import { ACTIONS } from '../constants'
 
+import type { Dispatch } from 'react'
 import type { SupportedTip } from '@opentrons/shared-data'
 import type {
   QuickTransferSummaryState,
@@ -34,7 +35,7 @@ import type {
 interface FlowRateEntryProps {
   onBack: () => void
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
   kind: FlowRateKind
 }
 
@@ -42,9 +43,9 @@ export function FlowRateEntry(props: FlowRateEntryProps): JSX.Element {
   const { onBack, state, dispatch, kind } = props
   const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
-  const keyboardRef = React.useRef(null)
+  const keyboardRef = useRef(null)
 
-  const [flowRate, setFlowRate] = React.useState<number>(
+  const [flowRate, setFlowRate] = useState<number>(
     kind === 'aspirate' ? state.aspirateFlowRate : state.dispenseFlowRate
   )
 
diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx
index 3774662bc38..b6c7862310c 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
 
@@ -8,8 +8,8 @@ import {
   DIRECTION_COLUMN,
   Flex,
   InputField,
-  RadioButton,
   POSITION_FIXED,
+  RadioButton,
   SPACING,
 } from '@opentrons/components'
 
@@ -18,19 +18,20 @@ import { getTopPortalEl } from '/app/App/portal'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { ACTIONS } from '../constants'
+import { i18n } from '/app/i18n'
+import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard'
 
+import type { Dispatch } from 'react'
 import type {
   QuickTransferSummaryState,
   QuickTransferSummaryAction,
   FlowRateKind,
 } from '../types'
-import { i18n } from '/app/i18n'
-import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard'
 
 interface MixProps {
   onBack: () => void
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
   kind: FlowRateKind
 }
 
@@ -38,20 +39,20 @@ export function Mix(props: MixProps): JSX.Element {
   const { kind, onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
-  const keyboardRef = React.useRef(null)
+  const keyboardRef = useRef(null)
 
-  const [mixIsEnabled, setMixIsEnabled] = React.useState<boolean>(
+  const [mixIsEnabled, setMixIsEnabled] = useState<boolean>(
     kind === 'aspirate'
       ? state.mixOnAspirate != null
       : state.mixOnDispense != null
   )
-  const [currentStep, setCurrentStep] = React.useState<number>(1)
-  const [mixVolume, setMixVolume] = React.useState<number | null>(
+  const [currentStep, setCurrentStep] = useState<number>(1)
+  const [mixVolume, setMixVolume] = useState<number | null>(
     kind === 'aspirate'
       ? state.mixOnAspirate?.mixVolume ?? null
       : state.mixOnDispense?.mixVolume ?? null
   )
-  const [mixReps, setMixReps] = React.useState<number | null>(
+  const [mixReps, setMixReps] = useState<number | null>(
     kind === 'aspirate'
       ? state.mixOnAspirate?.repititions ?? null
       : state.mixOnDispense?.repititions ?? null
diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx
index 9db8923bd58..eabbe9fc678 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useRef } from 'react'
 import isEqual from 'lodash/isEqual'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
@@ -9,8 +9,8 @@ import {
   DIRECTION_COLUMN,
   Flex,
   InputField,
-  RadioButton,
   POSITION_FIXED,
+  RadioButton,
   SPACING,
 } from '@opentrons/components'
 
@@ -25,6 +25,7 @@ import { ACTIONS } from '../constants'
 import { i18n } from '/app/i18n'
 import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard'
 
+import type { Dispatch } from 'react'
 import type {
   PathOption,
   QuickTransferSummaryState,
@@ -35,25 +36,25 @@ import type {
 interface PipettePathProps {
   onBack: () => void
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
 }
 
 export function PipettePath(props: PipettePathProps): JSX.Element {
   const { onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
-  const keyboardRef = React.useRef(null)
+  const keyboardRef = useRef(null)
   const deckConfig = useNotifyDeckConfigurationQuery().data ?? []
 
-  const [selectedPath, setSelectedPath] = React.useState<PathOption>(state.path)
-  const [currentStep, setCurrentStep] = React.useState<number>(1)
-  const [blowOutLocation, setBlowOutLocation] = React.useState<
+  const [selectedPath, setSelectedPath] = useState<PathOption>(state.path)
+  const [currentStep, setCurrentStep] = useState<number>(1)
+  const [blowOutLocation, setBlowOutLocation] = useState<
     BlowOutLocation | undefined
   >(state.blowOut)
 
-  const [disposalVolume, setDisposalVolume] = React.useState<
-    number | undefined
-  >(state?.disposalVolume)
+  const [disposalVolume, setDisposalVolume] = useState<number | undefined>(
+    state?.disposalVolume
+  )
   const maxPipetteVolume = Object.values(state.pipette.liquids)[0].maxVolume
   const tipVolume = Object.values(state.tipRack.wells)[0].totalLiquidVolume
 
diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TipPosition.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TipPosition.tsx
index 92082cf9c7d..8a5abf1a169 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TipPosition.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TipPosition.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -19,6 +19,7 @@ import { ACTIONS } from '../constants'
 import { createPortal } from 'react-dom'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 
+import type { Dispatch } from 'react'
 import type {
   QuickTransferSummaryState,
   QuickTransferSummaryAction,
@@ -28,7 +29,7 @@ import type {
 interface TipPositionEntryProps {
   onBack: () => void
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
   kind: FlowRateKind // TODO: rename flowRateKind to be generic
 }
 
@@ -36,9 +37,9 @@ export function TipPositionEntry(props: TipPositionEntryProps): JSX.Element {
   const { onBack, state, dispatch, kind } = props
   const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
-  const keyboardRef = React.useRef(null)
+  const keyboardRef = useRef(null)
 
-  const [tipPosition, setTipPosition] = React.useState<number>(
+  const [tipPosition, setTipPosition] = useState<number>(
     kind === 'aspirate' ? state.tipPositionAspirate : state.tipPositionDispense
   )
 
diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx
index a30b204d4a4..41780d65181 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
 
@@ -8,8 +8,8 @@ import {
   DIRECTION_COLUMN,
   Flex,
   InputField,
-  RadioButton,
   POSITION_FIXED,
+  RadioButton,
   SPACING,
 } from '@opentrons/components'
 
@@ -21,6 +21,7 @@ import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard'
 
+import type { Dispatch } from 'react'
 import type {
   QuickTransferSummaryState,
   QuickTransferSummaryAction,
@@ -30,7 +31,7 @@ import type {
 interface TouchTipProps {
   onBack: () => void
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
   kind: FlowRateKind
 }
 
@@ -38,15 +39,15 @@ export function TouchTip(props: TouchTipProps): JSX.Element {
   const { kind, onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
-  const keyboardRef = React.useRef(null)
+  const keyboardRef = useRef(null)
 
-  const [touchTipIsEnabled, setTouchTipIsEnabled] = React.useState<boolean>(
+  const [touchTipIsEnabled, setTouchTipIsEnabled] = useState<boolean>(
     kind === 'aspirate'
       ? state.touchTipAspirate != null
       : state.touchTipDispense != null
   )
-  const [currentStep, setCurrentStep] = React.useState<number>(1)
-  const [position, setPosition] = React.useState<number | null>(
+  const [currentStep, setCurrentStep] = useState<number>(1)
+  const [position, setPosition] = useState<number | null>(
     kind === 'aspirate'
       ? state.touchTipAspirate ?? null
       : state.touchTipDispense ?? null
diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx
index 2911b7975d1..33a603b6f75 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -34,13 +34,14 @@ import { TouchTip } from './TouchTip'
 import { AirGap } from './AirGap'
 import { BlowOut } from './BlowOut'
 
+import type { Dispatch } from 'react'
 import type {
   QuickTransferSummaryAction,
   QuickTransferSummaryState,
 } from '../types'
 interface QuickTransferAdvancedSettingsProps {
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
 }
 
 export function QuickTransferAdvancedSettings(
@@ -48,13 +49,11 @@ export function QuickTransferAdvancedSettings(
 ): JSX.Element | null {
   const { state, dispatch } = props
   const { t, i18n } = useTranslation(['quick_transfer', 'shared'])
-  const [selectedSetting, setSelectedSetting] = React.useState<string | null>(
-    null
-  )
+  const [selectedSetting, setSelectedSetting] = useState<string | null>(null)
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
   const { makeSnackbar } = useToaster()
 
-  React.useEffect(() => {
+  useEffect(() => {
     trackEventWithRobotSerial({
       name: ANALYTICS_QUICK_TRANSFER_ADVANCED_SETTINGS_TAB,
       properties: {},
diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectDestLabware.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectDestLabware.tsx
index ba90e54de4d..62921e8e08d 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/SelectDestLabware.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/SelectDestLabware.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Flex,
@@ -15,6 +15,7 @@ import {
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { getCompatibleLabwareByCategory } from './utils'
 
+import type { ComponentProps, Dispatch } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { SmallButton } from '/app/atoms/buttons'
 import type { LabwareFilter } from '/app/local-resources/labware'
@@ -26,9 +27,9 @@ import type {
 interface SelectDestLabwareProps {
   onNext: () => void
   onBack: () => void
-  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  exitButtonProps: ComponentProps<typeof SmallButton>
   state: QuickTransferWizardState
-  dispatch: React.Dispatch<QuickTransferWizardAction>
+  dispatch: Dispatch<QuickTransferWizardAction>
 }
 
 export function SelectDestLabware(
@@ -44,10 +45,8 @@ export function SelectDestLabware(
   if (state.pipette?.channels === 1) {
     labwareDisplayCategoryFilters.push('tubeRack')
   }
-  const [selectedCategory, setSelectedCategory] = React.useState<LabwareFilter>(
-    'all'
-  )
-  const [selectedLabware, setSelectedLabware] = React.useState<
+  const [selectedCategory, setSelectedCategory] = useState<LabwareFilter>('all')
+  const [selectedLabware, setSelectedLabware] = useState<
     LabwareDefinition2 | 'source' | undefined
   >(state.destination)
 
diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectDestWells.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectDestWells.tsx
index 0cb402f6ee8..41dcf155fb7 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/SelectDestWells.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/SelectDestWells.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import without from 'lodash/without'
@@ -24,6 +24,12 @@ import {
   RECTANGULAR_WELL_96_PLATE_DEFINITION_URI,
 } from './SelectSourceWells'
 
+import type {
+  ComponentProps,
+  Dispatch,
+  SetStateAction,
+  MouseEvent,
+} from 'react'
 import type { SmallButton } from '/app/atoms/buttons'
 import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
 import type {
@@ -35,7 +41,7 @@ interface SelectDestWellsProps {
   onNext: () => void
   onBack: () => void
   state: QuickTransferWizardState
-  dispatch: React.Dispatch<QuickTransferWizardAction>
+  dispatch: Dispatch<QuickTransferWizardAction>
 }
 
 export function SelectDestWells(props: SelectDestWellsProps): JSX.Element {
@@ -53,12 +59,11 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element {
   const [
     showNumberWellsSelectedErrorModal,
     setShowNumberWellsSelectedErrorModal,
-  ] = React.useState(false)
-  const [selectedWells, setSelectedWells] = React.useState(destinationWellGroup)
-  const [
-    isNumberWellsSelectedError,
-    setIsNumberWellsSelectedError,
-  ] = React.useState(false)
+  ] = useState(false)
+  const [selectedWells, setSelectedWells] = useState(destinationWellGroup)
+  const [isNumberWellsSelectedError, setIsNumberWellsSelectedError] = useState(
+    false
+  )
 
   const selectedWellCount = Object.keys(selectedWells).length
   const sourceWellCount = state.sourceWells?.length ?? 0
@@ -88,7 +93,7 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element {
   }
   const is384WellPlate = labwareDefinition?.parameters.format === '384Standard'
 
-  const [analyticsStartTime] = React.useState<Date>(new Date())
+  const [analyticsStartTime] = useState<Date>(new Date())
 
   const handleClickNext = (): void => {
     if (
@@ -130,10 +135,10 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element {
     }
   }
 
-  const resetButtonProps: React.ComponentProps<typeof SmallButton> = {
+  const resetButtonProps: ComponentProps<typeof SmallButton> = {
     buttonType: 'tertiaryLowLight',
     buttonText: t('shared:reset'),
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+    onClick: (e: MouseEvent<HTMLButtonElement>) => {
       setIsNumberWellsSelectedError(false)
       setSelectedWells({})
       e.currentTarget.blur?.()
@@ -214,9 +219,7 @@ function NumberWellsSelectedErrorModal({
   selectionUnit,
   selectionUnits,
 }: {
-  setShowNumberWellsSelectedErrorModal: React.Dispatch<
-    React.SetStateAction<boolean>
-  >
+  setShowNumberWellsSelectedErrorModal: Dispatch<SetStateAction<boolean>>
   wellCount: number
   selectionUnit: string
   selectionUnits: string
diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectPipette.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectPipette.tsx
index 3331800e1a9..0b01a93977d 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/SelectPipette.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/SelectPipette.tsx
@@ -1,18 +1,19 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  DIRECTION_COLUMN,
   Flex,
-  SPACING,
   LegacyStyledText,
-  TYPOGRAPHY,
-  DIRECTION_COLUMN,
   RadioButton,
+  SPACING,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import { RIGHT, LEFT } from '@opentrons/shared-data'
 import { usePipetteSpecsV2 } from '/app/local-resources/instruments'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 
+import type { ComponentProps, Dispatch } from 'react'
 import type { PipetteData, Mount } from '@opentrons/api-client'
 import type { SmallButton } from '/app/atoms/buttons'
 import type {
@@ -23,9 +24,9 @@ import type {
 interface SelectPipetteProps {
   onNext: () => void
   onBack: () => void
-  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  exitButtonProps: ComponentProps<typeof SmallButton>
   state: QuickTransferWizardState
-  dispatch: React.Dispatch<QuickTransferWizardAction>
+  dispatch: Dispatch<QuickTransferWizardAction>
 }
 
 export function SelectPipette(props: SelectPipetteProps): JSX.Element {
@@ -44,9 +45,9 @@ export function SelectPipette(props: SelectPipetteProps): JSX.Element {
   const rightPipetteSpecs = usePipetteSpecsV2(rightPipette?.instrumentModel)
 
   // automatically select 96 channel if it is attached
-  const [selectedPipette, setSelectedPipette] = React.useState<
-    Mount | undefined
-  >(leftPipetteSpecs?.channels === 96 ? LEFT : state.mount)
+  const [selectedPipette, setSelectedPipette] = useState<Mount | undefined>(
+    leftPipetteSpecs?.channels === 96 ? LEFT : state.mount
+  )
 
   const handleClickNext = (): void => {
     const selectedPipetteSpecs =
diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectSourceLabware.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectSourceLabware.tsx
index 2d4752a5aa1..c51e4782c1d 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/SelectSourceLabware.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/SelectSourceLabware.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Flex,
@@ -15,6 +15,7 @@ import {
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { getCompatibleLabwareByCategory } from './utils'
 
+import type { ComponentProps, Dispatch } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { SmallButton } from '/app/atoms/buttons'
 import type { LabwareFilter } from '/app/local-resources/labware'
@@ -26,9 +27,9 @@ import type {
 interface SelectSourceLabwareProps {
   onNext: () => void
   onBack: () => void
-  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  exitButtonProps: ComponentProps<typeof SmallButton>
   state: QuickTransferWizardState
-  dispatch: React.Dispatch<QuickTransferWizardAction>
+  dispatch: Dispatch<QuickTransferWizardAction>
 }
 
 export function SelectSourceLabware(
@@ -44,11 +45,9 @@ export function SelectSourceLabware(
   if (state.pipette?.channels === 1) {
     labwareDisplayCategoryFilters.push('tubeRack')
   }
-  const [selectedCategory, setSelectedCategory] = React.useState<LabwareFilter>(
-    'all'
-  )
+  const [selectedCategory, setSelectedCategory] = useState<LabwareFilter>('all')
 
-  const [selectedLabware, setSelectedLabware] = React.useState<
+  const [selectedLabware, setSelectedLabware] = useState<
     LabwareDefinition2 | undefined
   >(state.source)
 
diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectSourceWells.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectSourceWells.tsx
index a78ec884560..1a643780e08 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/SelectSourceWells.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/SelectSourceWells.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import without from 'lodash/without'
 import {
@@ -14,6 +14,7 @@ import { WellSelection } from '/app/organisms/WellSelection'
 import { ANALYTICS_QUICK_TRANSFER_WELL_SELECTION_DURATION } from '/app/redux/analytics'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 
+import type { ComponentProps, Dispatch, MouseEvent } from 'react'
 import type { SmallButton } from '/app/atoms/buttons'
 import type {
   QuickTransferWizardState,
@@ -24,7 +25,7 @@ interface SelectSourceWellsProps {
   onNext: () => void
   onBack: () => void
   state: QuickTransferWizardState
-  dispatch: React.Dispatch<QuickTransferWizardAction>
+  dispatch: Dispatch<QuickTransferWizardAction>
 }
 
 export const CIRCULAR_WELL_96_PLATE_DEFINITION_URI =
@@ -42,8 +43,8 @@ export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element {
     return { ...acc, [well]: null }
   }, {})
 
-  const [selectedWells, setSelectedWells] = React.useState(sourceWellGroup)
-  const [startingTimeStamp] = React.useState<Date>(new Date())
+  const [selectedWells, setSelectedWells] = useState(sourceWellGroup)
+  const [startingTimeStamp] = useState<Date>(new Date())
   const is384WellPlate = state.source?.parameters.format === '384Standard'
 
   const handleClickNext = (): void => {
@@ -62,10 +63,10 @@ export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element {
     onNext()
   }
 
-  const resetButtonProps: React.ComponentProps<typeof SmallButton> = {
+  const resetButtonProps: ComponentProps<typeof SmallButton> = {
     buttonType: 'tertiaryLowLight',
     buttonText: t('shared:reset'),
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+    onClick: (e: MouseEvent<HTMLButtonElement>) => {
       setSelectedWells({})
       e.currentTarget.blur?.()
     },
diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectTipRack.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectTipRack.tsx
index e8ebd52d90c..f5fd1abae85 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/SelectTipRack.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/SelectTipRack.tsx
@@ -1,14 +1,15 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  Flex,
-  SPACING,
   DIRECTION_COLUMN,
+  Flex,
   RadioButton,
+  SPACING,
 } from '@opentrons/components'
 import { getAllDefinitions } from '@opentrons/shared-data'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 
+import type { ComponentProps, Dispatch } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { SmallButton } from '/app/atoms/buttons'
 import type {
@@ -19,9 +20,9 @@ import type {
 interface SelectTipRackProps {
   onNext: () => void
   onBack: () => void
-  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  exitButtonProps: ComponentProps<typeof SmallButton>
   state: QuickTransferWizardState
-  dispatch: React.Dispatch<QuickTransferWizardAction>
+  dispatch: Dispatch<QuickTransferWizardAction>
 }
 
 export function SelectTipRack(props: SelectTipRackProps): JSX.Element {
@@ -32,7 +33,7 @@ export function SelectTipRack(props: SelectTipRackProps): JSX.Element {
   const selectedPipetteDefaultTipracks =
     state.pipette?.liquids.default.defaultTipracks ?? []
 
-  const [selectedTipRack, setSelectedTipRack] = React.useState<
+  const [selectedTipRack, setSelectedTipRack] = useState<
     LabwareDefinition2 | undefined
   >(state.tipRack)
 
diff --git a/app/src/organisms/ODD/QuickTransferFlow/SummaryAndSettings.tsx b/app/src/organisms/ODD/QuickTransferFlow/SummaryAndSettings.tsx
index 6ddba5ca50e..2567b703b93 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/SummaryAndSettings.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/SummaryAndSettings.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { useQueryClient } from 'react-query'
@@ -33,11 +33,12 @@ import { SaveOrRunModal } from './SaveOrRunModal'
 import { getInitialSummaryState, createQuickTransferFile } from './utils'
 import { quickTransferSummaryReducer } from './reducers'
 
+import type { ComponentProps } from 'react'
 import type { SmallButton } from '/app/atoms/buttons'
 import type { QuickTransferWizardState } from './types'
 
 interface SummaryAndSettingsProps {
-  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  exitButtonProps: ComponentProps<typeof SmallButton>
   state: QuickTransferWizardState
   analyticsStartTime: Date
 }
@@ -51,18 +52,14 @@ export function SummaryAndSettings(
   const queryClient = useQueryClient()
   const host = useHost()
   const { t } = useTranslation(['quick_transfer', 'shared'])
-  const [showSaveOrRunModal, setShowSaveOrRunModal] = React.useState<boolean>(
-    false
-  )
+  const [showSaveOrRunModal, setShowSaveOrRunModal] = useState<boolean>(false)
 
   const displayCategory: string[] = [
     'overview',
     'advanced_settings',
     'tip_management',
   ]
-  const [selectedCategory, setSelectedCategory] = React.useState<string>(
-    'overview'
-  )
+  const [selectedCategory, setSelectedCategory] = useState<string>('overview')
   const deckConfig = useNotifyDeckConfigurationQuery().data ?? []
 
   const initialSummaryState = getInitialSummaryState({
@@ -71,7 +68,7 @@ export function SummaryAndSettings(
     state: wizardFlowState,
     deckConfig,
   })
-  const [state, dispatch] = React.useReducer(
+  const [state, dispatch] = useReducer(
     quickTransferSummaryReducer,
     initialSummaryState
   )
diff --git a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/ChangeTip.tsx b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/ChangeTip.tsx
index 7c72dbe202e..dd3869ff329 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/ChangeTip.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/ChangeTip.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
 
@@ -16,6 +16,7 @@ import { getTopPortalEl } from '/app/App/portal'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 
+import type { Dispatch } from 'react'
 import type {
   ChangeTipOptions,
   QuickTransferSummaryState,
@@ -25,7 +26,7 @@ import type {
 interface ChangeTipProps {
   onBack: () => void
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
 }
 
 export function ChangeTip(props: ChangeTipProps): JSX.Element {
@@ -53,7 +54,7 @@ export function ChangeTip(props: ChangeTipProps): JSX.Element {
   const [
     selectedChangeTipOption,
     setSelectedChangeTipOption,
-  ] = React.useState<ChangeTipOptions>(state.changeTip)
+  ] = useState<ChangeTipOptions>(state.changeTip)
 
   const handleClickSave = (): void => {
     if (selectedChangeTipOption !== state.changeTip) {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/TipDropLocation.tsx b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/TipDropLocation.tsx
index 6dae428684b..b61a73389cd 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/TipDropLocation.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/TipDropLocation.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
 import {
@@ -21,6 +21,7 @@ import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configurati
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 
+import type { Dispatch } from 'react'
 import type {
   QuickTransferSummaryState,
   QuickTransferSummaryAction,
@@ -30,7 +31,7 @@ import type { CutoutConfig } from '@opentrons/shared-data'
 interface TipDropLocationProps {
   onBack: () => void
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
 }
 
 export function TipDropLocation(props: TipDropLocationProps): JSX.Element {
@@ -56,7 +57,7 @@ export function TipDropLocation(props: TipDropLocationProps): JSX.Element {
   const [
     selectedTipDropLocation,
     setSelectedTipDropLocation,
-  ] = React.useState<CutoutConfig>(state.dropTipLocation)
+  ] = useState<CutoutConfig>(state.dropTipLocation)
 
   const handleClickSave = (): void => {
     if (selectedTipDropLocation.cutoutId !== state.dropTipLocation.cutoutId) {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/index.tsx b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/index.tsx
index 03f33c965f2..4a87e67c2c7 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/index.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
@@ -21,6 +21,7 @@ import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { ChangeTip } from './ChangeTip'
 import { TipDropLocation } from './TipDropLocation'
 
+import type { Dispatch } from 'react'
 import type {
   QuickTransferSummaryAction,
   QuickTransferSummaryState,
@@ -28,18 +29,16 @@ import type {
 
 interface TipManagementProps {
   state: QuickTransferSummaryState
-  dispatch: React.Dispatch<QuickTransferSummaryAction>
+  dispatch: Dispatch<QuickTransferSummaryAction>
 }
 
 export function TipManagement(props: TipManagementProps): JSX.Element | null {
   const { state, dispatch } = props
   const { t } = useTranslation(['quick_transfer', 'shared'])
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
-  const [selectedSetting, setSelectedSetting] = React.useState<string | null>(
-    null
-  )
+  const [selectedSetting, setSelectedSetting] = useState<string | null>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     trackEventWithRobotSerial({
       name: ANALYTICS_QUICK_TRANSFER_TIP_MANAGEMENT_TAB,
       properties: {},
diff --git a/app/src/organisms/ODD/QuickTransferFlow/VolumeEntry.tsx b/app/src/organisms/ODD/QuickTransferFlow/VolumeEntry.tsx
index 0a6526676d6..58bf2f570e7 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/VolumeEntry.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/VolumeEntry.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -14,6 +14,7 @@ import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard'
 import { getVolumeRange } from './utils'
 import { CONSOLIDATE, DISTRIBUTE } from './constants'
 
+import type { ComponentProps, Dispatch } from 'react'
 import type { SmallButton } from '/app/atoms/buttons'
 import type {
   QuickTransferWizardState,
@@ -23,17 +24,17 @@ import type {
 interface VolumeEntryProps {
   onNext: () => void
   onBack: () => void
-  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  exitButtonProps: ComponentProps<typeof SmallButton>
   state: QuickTransferWizardState
-  dispatch: React.Dispatch<QuickTransferWizardAction>
+  dispatch: Dispatch<QuickTransferWizardAction>
 }
 
 export function VolumeEntry(props: VolumeEntryProps): JSX.Element {
   const { onNext, onBack, exitButtonProps, state, dispatch } = props
   const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
-  const keyboardRef = React.useRef(null)
+  const keyboardRef = useRef(null)
 
-  const [volume, setVolume] = React.useState<string>(
+  const [volume, setVolume] = useState<string>(
     state.volume ? state.volume.toString() : ''
   )
   const volumeRange = getVolumeRange(state)
diff --git a/app/src/organisms/ODD/QuickTransferFlow/index.tsx b/app/src/organisms/ODD/QuickTransferFlow/index.tsx
index f7d94a46000..fb0a76b6f47 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/index.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/index.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
+import { useState, useReducer } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import {
-  useConditionalConfirm,
-  StepMeter,
   POSITION_STICKY,
+  StepMeter,
+  useConditionalConfirm,
 } from '@opentrons/components'
 import { ANALYTICS_QUICK_TRANSFER_EXIT_EARLY } from '/app/redux/analytics'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
@@ -20,6 +20,7 @@ import { VolumeEntry } from './VolumeEntry'
 import { SummaryAndSettings } from './SummaryAndSettings'
 import { quickTransferWizardReducer } from './reducers'
 
+import type { ComponentProps } from 'react'
 import type { SmallButton } from '/app/atoms/buttons'
 import type { QuickTransferWizardState } from './types'
 
@@ -30,13 +31,13 @@ export const QuickTransferFlow = (): JSX.Element => {
   const navigate = useNavigate()
   const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
   const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
-  const [state, dispatch] = React.useReducer(
+  const [state, dispatch] = useReducer(
     quickTransferWizardReducer,
     initialQuickTransferState
   )
-  const [currentStep, setCurrentStep] = React.useState(0)
+  const [currentStep, setCurrentStep] = useState(0)
 
-  const [analyticsStartTime] = React.useState<Date>(new Date())
+  const [analyticsStartTime] = useState<Date>(new Date())
 
   const {
     confirm: confirmExit,
@@ -52,7 +53,7 @@ export const QuickTransferFlow = (): JSX.Element => {
     navigate('/quick-transfer')
   }, true)
 
-  const exitButtonProps: React.ComponentProps<typeof SmallButton> = {
+  const exitButtonProps: ComponentProps<typeof SmallButton> = {
     buttonType: 'tertiaryLowLight',
     buttonText: i18n.format(t('shared:exit'), 'capitalize'),
     onClick: confirmExit,
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx
index a935a5571ad..49f58e26993 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
@@ -17,6 +17,7 @@ import { LANGUAGES } from '/app/i18n'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { getAppLanguage, updateConfigValue } from '/app/redux/config'
 
+import type { ChangeEvent } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { SetSettingOption } from './types'
 
@@ -49,7 +50,7 @@ export function LanguageSetting({
 
   const appLanguage = useSelector(getAppLanguage)
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
     dispatch(updateConfigValue('language.appLanguage', event.target.value))
   }
 
@@ -68,7 +69,7 @@ export function LanguageSetting({
         padding={`${SPACING.spacing16} ${SPACING.spacing40} ${SPACING.spacing40} ${SPACING.spacing40}`}
       >
         {LANGUAGES.map(lng => (
-          <React.Fragment key={`language_setting_${lng.name}`}>
+          <Fragment key={`language_setting_${lng.name}`}>
             <SettingButton
               id={lng.name}
               type="radio"
@@ -84,7 +85,7 @@ export function LanguageSetting({
                 {lng.name}
               </StyledText>
             </SettingButtonLabel>
-          </React.Fragment>
+          </Fragment>
         ))}
       </Flex>
     </Flex>
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsJoinOtherNetwork.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsJoinOtherNetwork.tsx
index fed06e4572c..f3645066924 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsJoinOtherNetwork.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsJoinOtherNetwork.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
@@ -6,11 +6,12 @@ import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { SetWifiSsid } from '../../NetworkSettings'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { SetSettingOption } from '../types'
 
 interface RobotSettingsJoinOtherNetworkProps {
   setCurrentOption: SetSettingOption
-  setSelectedSsid: React.Dispatch<React.SetStateAction<string>>
+  setSelectedSsid: Dispatch<SetStateAction<string>>
 }
 
 /**
@@ -22,8 +23,8 @@ export function RobotSettingsJoinOtherNetwork({
 }: RobotSettingsJoinOtherNetworkProps): JSX.Element {
   const { i18n, t } = useTranslation('device_settings')
 
-  const [inputSsid, setInputSsid] = React.useState<string>('')
-  const [errorMessage, setErrorMessage] = React.useState<string | null>(null)
+  const [inputSsid, setInputSsid] = useState<string>('')
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
   const handleContinue = (): void => {
     if (inputSsid.length >= 2 && inputSsid.length <= 32) {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/TouchScreenSleep.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/TouchScreenSleep.tsx
index ea3d879088f..cb123b261be 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/TouchScreenSleep.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/TouchScreenSleep.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react'
+import { useEffect, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
 import {
   DIRECTION_COLUMN,
   Flex,
-  SPACING,
   RadioButton,
+  SPACING,
 } from '@opentrons/components'
 
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
@@ -16,6 +16,7 @@ import {
 } from '/app/redux/config'
 import { SLEEP_NEVER_MS } from '/app/local-resources/config'
 
+import type { ChangeEvent } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { SetSettingOption } from './types'
 
@@ -31,7 +32,7 @@ export function TouchScreenSleep({
   const { t } = useTranslation(['device_settings'])
   const { sleepMs } = useSelector(getOnDeviceDisplaySettings) ?? SLEEP_NEVER_MS
   const dispatch = useDispatch<Dispatch>()
-  const screenRef = React.useRef<HTMLDivElement | null>(null)
+  const screenRef = useRef<HTMLDivElement | null>(null)
 
   // Note (kj:02/10/2023) value's unit is ms
   const settingsButtons = [
@@ -44,7 +45,7 @@ export function TouchScreenSleep({
     { label: t('one_hour'), value: SLEEP_TIME_MS * 60 },
   ]
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
     dispatch(
       updateConfigValue(
         'onDeviceDisplaySettings.sleepMs',
@@ -53,7 +54,7 @@ export function TouchScreenSleep({
     )
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (screenRef.current != null) screenRef.current.scrollIntoView()
   }, [])
 
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx
index c9668e8a079..642aeae4af3 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
@@ -22,6 +22,7 @@ import {
   updateConfigValue,
 } from '/app/redux/config'
 
+import type { ChangeEvent } from 'react'
 import type { Dispatch } from '/app/redux/types'
 
 interface LabelProps {
@@ -59,7 +60,7 @@ export function UpdateChannel({
     ? channelOptions.filter(option => option.value !== 'alpha')
     : channelOptions
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
     dispatch(updateConfigValue('update.channel', event.target.value))
   }
 
@@ -87,7 +88,7 @@ export function UpdateChannel({
           marginTop={SPACING.spacing24}
         >
           {modifiedChannelOptions.map(radio => (
-            <React.Fragment key={`channel_setting_${radio.label}`}>
+            <Fragment key={`channel_setting_${radio.label}`}>
               <SettingButton
                 id={radio.label}
                 type="radio"
@@ -120,7 +121,7 @@ export function UpdateChannel({
                   </LegacyStyledText>
                 ) : null}
               </SettingButtonLabel>
-            </React.Fragment>
+            </Fragment>
           ))}
         </Flex>
       </Flex>
diff --git a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx
index f8d31f1adec..1a0b45001c2 100644
--- a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx
+++ b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
@@ -46,6 +46,7 @@ import { ExitModal } from './ExitModal'
 import { FLOWS } from './constants'
 import { getIsGantryEmpty } from './utils'
 
+import type { Dispatch, SetStateAction, ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { PipetteMount } from '@opentrons/shared-data'
 import type { SelectablePipettes } from './types'
@@ -108,7 +109,7 @@ const SELECTED_OPTIONS_STYLE = css`
 interface ChoosePipetteProps {
   proceed: () => void
   selectedPipette: SelectablePipettes
-  setSelectedPipette: React.Dispatch<React.SetStateAction<SelectablePipettes>>
+  setSelectedPipette: Dispatch<SetStateAction<SelectablePipettes>>
   exit: () => void
   mount: PipetteMount
 }
@@ -117,10 +118,9 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => {
   const isOnDevice = useSelector(getIsOnDevice)
   const { t } = useTranslation(['pipette_wizard_flows', 'shared'])
   const attachedPipettesByMount = useAttachedPipettesFromInstrumentsQuery()
-  const [
-    showExitConfirmation,
-    setShowExitConfirmation,
-  ] = React.useState<boolean>(false)
+  const [showExitConfirmation, setShowExitConfirmation] = useState<boolean>(
+    false
+  )
 
   const bothMounts = getIsGantryEmpty(attachedPipettesByMount)
     ? t('ninety_six_channel', {
@@ -281,7 +281,7 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => {
 interface PipetteMountOptionProps extends StyleProps {
   isSelected: boolean
   onClick: () => void
-  children: React.ReactNode
+  children: ReactNode
 }
 function PipetteMountOption(props: PipetteMountOptionProps): JSX.Element {
   const { isSelected, onClick, children, ...styleProps } = props
diff --git a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx
index 46e5f92e389..9d83f3d3e75 100644
--- a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx
+++ b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 import { RIGHT, WEIGHT_OF_96_CHANNEL } from '@opentrons/shared-data'
@@ -27,12 +27,14 @@ import { Skeleton } from '/app/atoms/Skeleton'
 import { SmallButton } from '/app/atoms/buttons'
 import { BODY_STYLE, SECTIONS } from './constants'
 import { getPipetteAnimations, getPipetteAnimations96 } from './utils'
-import type { PipetteWizardStepProps } from './types'
+
+import type { Dispatch, ReactNode, SetStateAction } from 'react'
 import type { PipetteData } from '@opentrons/api-client'
+import type { PipetteWizardStepProps } from './types'
 
 interface DetachPipetteProps extends PipetteWizardStepProps {
   isFetching: boolean
-  setFetching: React.Dispatch<React.SetStateAction<boolean>>
+  setFetching: Dispatch<SetStateAction<boolean>>
 }
 const BACKGROUND_SIZE = '47rem'
 
@@ -82,7 +84,7 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => {
     flowType,
     section: SECTIONS.DETACH_PIPETTE,
   }
-  const memoizedAttachedPipettes = React.useMemo(() => attachedPipettes, [])
+  const memoizedAttachedPipettes = useMemo(() => attachedPipettes, [])
   const is96ChannelPipette =
     memoizedAttachedPipettes[mount]?.instrumentName === 'p1000_96'
   const pipetteName =
@@ -121,10 +123,9 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => {
       })
   }
 
-  const [
-    showPipetteStillAttached,
-    setShowPipetteStillAttached,
-  ] = React.useState(false)
+  const [showPipetteStillAttached, setShowPipetteStillAttached] = useState(
+    false
+  )
 
   const handleOnClick = (): void => {
     setFetching(true)
@@ -142,7 +143,7 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => {
   }
 
   const channel = memoizedAttachedPipettes[mount]?.data.channels
-  let bodyText: React.ReactNode = <div></div>
+  let bodyText: ReactNode = <div></div>
   if (isFetching) {
     bodyText = (
       <>
diff --git a/app/src/organisms/PipetteWizardFlows/Results.tsx b/app/src/organisms/PipetteWizardFlows/Results.tsx
index 96ed9098ac9..4ede1cb6828 100644
--- a/app/src/organisms/PipetteWizardFlows/Results.tsx
+++ b/app/src/organisms/PipetteWizardFlows/Results.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import {
@@ -22,6 +22,7 @@ import { usePipetteNameSpecs } from '/app/local-resources/instruments'
 import { CheckPipetteButton } from './CheckPipetteButton'
 import { FLOWS } from './constants'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type {
   LoadedPipette,
   MotorAxes,
@@ -34,7 +35,7 @@ interface ResultsProps extends PipetteWizardStepProps {
   currentStepIndex: number
   totalStepCount: number
   isFetching: boolean
-  setFetching: React.Dispatch<React.SetStateAction<boolean>>
+  setFetching: Dispatch<SetStateAction<boolean>>
   hasCalData: boolean
   requiredPipette?: LoadedPipette
   nextMount?: string
@@ -78,7 +79,7 @@ export const Results = (props: ResultsProps): JSX.Element => {
     usePipetteNameSpecs(requiredPipette?.pipetteName as PipetteName)
       ?.displayName ?? null
 
-  const [numberOfTryAgains, setNumberOfTryAgains] = React.useState<number>(0)
+  const [numberOfTryAgains, setNumberOfTryAgains] = useState<number>(0)
   let header: string = 'unknown results screen'
   let iconColor: string = COLORS.green50
   let isSuccess: boolean = true
diff --git a/app/src/organisms/TakeoverModal/MaintenanceRunStatusProvider.tsx b/app/src/organisms/TakeoverModal/MaintenanceRunStatusProvider.tsx
index 6ba2707752b..293340a9d85 100644
--- a/app/src/organisms/TakeoverModal/MaintenanceRunStatusProvider.tsx
+++ b/app/src/organisms/TakeoverModal/MaintenanceRunStatusProvider.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react'
-
+import { useState, useEffect, useMemo, createContext } from 'react'
 import { useNotifyCurrentMaintenanceRun } from '/app/resources/maintenance_runs'
 
+import type { ReactNode } from 'react'
+
 interface MaintenanceRunIds {
   currentRunId: string | null
   oddRunId: string | null
@@ -12,19 +13,19 @@ export interface MaintenanceRunStatus {
   setOddRunIds: (state: MaintenanceRunIds) => void
 }
 
-export const MaintenanceRunContext = React.createContext<MaintenanceRunStatus>({
+export const MaintenanceRunContext = createContext<MaintenanceRunStatus>({
   getRunIds: () => ({ currentRunId: null, oddRunId: null }),
   setOddRunIds: () => {},
 })
 
 interface MaintenanceRunProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export function MaintenanceRunStatusProvider(
   props: MaintenanceRunProviderProps
 ): JSX.Element {
-  const [oddRunIds, setOddRunIds] = React.useState<MaintenanceRunIds>({
+  const [oddRunIds, setOddRunIds] = useState<MaintenanceRunIds>({
     currentRunId: null,
     oddRunId: null,
   })
@@ -33,14 +34,14 @@ export function MaintenanceRunStatusProvider(
     refetchInterval: 5000,
   }).data?.data.id
 
-  React.useEffect(() => {
+  useEffect(() => {
     setOddRunIds(prevState => ({
       ...prevState,
       currentRunId: currentRunIdQueryResult ?? null,
     }))
   }, [currentRunIdQueryResult])
 
-  const maintenanceRunStatus = React.useMemo(
+  const maintenanceRunStatus = useMemo(
     () => ({
       getRunIds: () => oddRunIds,
       setOddRunIds,
diff --git a/app/src/organisms/TakeoverModal/MaintenanceRunTakeover.tsx b/app/src/organisms/TakeoverModal/MaintenanceRunTakeover.tsx
index b4cef390203..bb2b380cef1 100644
--- a/app/src/organisms/TakeoverModal/MaintenanceRunTakeover.tsx
+++ b/app/src/organisms/TakeoverModal/MaintenanceRunTakeover.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useDeleteMaintenanceRunMutation } from '@opentrons/react-api-client'
@@ -7,8 +7,10 @@ import { TakeoverModal } from './TakeoverModal'
 import { MaintenanceRunStatusProvider } from './MaintenanceRunStatusProvider'
 import { useMaintenanceRunTakeover } from './useMaintenanceRunTakeover'
 
+import type { ReactNode } from 'react'
+
 interface MaintenanceRunTakeoverProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function MaintenanceRunTakeover({
@@ -22,18 +24,18 @@ export function MaintenanceRunTakeover({
 }
 
 interface MaintenanceRunTakeoverModalProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function MaintenanceRunTakeoverModal(
   props: MaintenanceRunTakeoverModalProps
 ): JSX.Element {
   const { i18n, t } = useTranslation(['shared', 'branded'])
-  const [isLoading, setIsLoading] = React.useState<boolean>(false)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
   const [
     showConfirmTerminateModal,
     setShowConfirmTerminateModal,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   const { oddRunId, currentRunId } = useMaintenanceRunTakeover().getRunIds()
   const isMaintenanceRunCurrent = currentRunId != null
@@ -50,7 +52,7 @@ export function MaintenanceRunTakeoverModal(
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (currentRunId == null) {
       setIsLoading(false)
       setShowConfirmTerminateModal(false)
diff --git a/app/src/organisms/ToasterOven/ToasterOven.tsx b/app/src/organisms/ToasterOven/ToasterOven.tsx
index 4f29be519ae..c3130793750 100644
--- a/app/src/organisms/ToasterOven/ToasterOven.tsx
+++ b/app/src/organisms/ToasterOven/ToasterOven.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -17,6 +17,7 @@ import {
 import { getIsOnDevice } from '/app/redux/config'
 import { ToasterContext } from './ToasterContext'
 
+import type { ReactNode } from 'react'
 import type { SnackbarProps } from '@opentrons/components'
 import type {
   ToastProps,
@@ -25,7 +26,7 @@ import type {
 import type { MakeSnackbarOptions, MakeToastOptions } from './ToasterContext'
 
 interface ToasterOvenProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 /**
@@ -34,8 +35,8 @@ interface ToasterOvenProps {
  * @returns
  */
 export function ToasterOven({ children }: ToasterOvenProps): JSX.Element {
-  const [toasts, setToasts] = React.useState<ToastProps[]>([])
-  const [snackbar, setSnackbar] = React.useState<SnackbarProps | null>(null)
+  const [toasts, setToasts] = useState<ToastProps[]>([])
+  const [snackbar, setSnackbar] = useState<SnackbarProps | null>(null)
 
   const isOnDevice = useSelector(getIsOnDevice) ?? null
   const displayType: 'desktop' | 'odd' =
diff --git a/app/src/organisms/WellSelection/Selection384Wells.tsx b/app/src/organisms/WellSelection/Selection384Wells.tsx
index d0fcddef752..94e2eaf9e74 100644
--- a/app/src/organisms/WellSelection/Selection384Wells.tsx
+++ b/app/src/organisms/WellSelection/Selection384Wells.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import flatten from 'lodash/flatten'
 
@@ -15,6 +15,7 @@ import {
 
 import { IconButton } from '/app/atoms/buttons/IconButton'
 
+import type { Dispatch, SetStateAction, ReactNode } from 'react'
 import type { WellGroup } from '@opentrons/components'
 import type {
   LabwareDefinition2,
@@ -26,7 +27,7 @@ interface Selection384WellsProps {
   channels: PipetteChannels
   definition: LabwareDefinition2
   deselectWells: (wells: string[]) => void
-  labwareRender: React.ReactNode
+  labwareRender: ReactNode
   selectWells: (wellGroup: WellGroup) => unknown
 }
 
@@ -43,18 +44,18 @@ export function Selection384Wells({
   labwareRender,
   selectWells,
 }: Selection384WellsProps): JSX.Element {
-  const [selectBy, setSelectBy] = React.useState<'columns' | 'wells'>('columns')
+  const [selectBy, setSelectBy] = useState<'columns' | 'wells'>('columns')
 
-  const [lastSelectedIndex, setLastSelectedIndex] = React.useState<
-    number | null
-  >(null)
+  const [lastSelectedIndex, setLastSelectedIndex] = useState<number | null>(
+    null
+  )
 
-  const [startingWellState, setStartingWellState] = React.useState<
+  const [startingWellState, setStartingWellState] = useState<
     Record<StartingWellOption, boolean>
   >({ A1: false, A2: false, B1: false, B2: false })
 
   // to reset last selected index and starting well state on page-level selected well reset
-  React.useEffect(() => {
+  useEffect(() => {
     if (Object.keys(allSelectedWells).length === 0) {
       setLastSelectedIndex(null)
       if (channels === 96) {
@@ -180,8 +181,8 @@ export function Selection384Wells({
 
 interface SelectByProps {
   selectBy: 'columns' | 'wells'
-  setSelectBy: React.Dispatch<React.SetStateAction<'columns' | 'wells'>>
-  setLastSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>
+  setSelectBy: Dispatch<SetStateAction<'columns' | 'wells'>>
+  setLastSelectedIndex: Dispatch<SetStateAction<number | null>>
 }
 
 function SelectBy({
@@ -244,8 +245,8 @@ function StartingWell({
   deselectWells: (wells: string[]) => void
   selectWells: (wellGroup: WellGroup) => void
   startingWellState: Record<StartingWellOption, boolean>
-  setStartingWellState: React.Dispatch<
-    React.SetStateAction<Record<StartingWellOption, boolean>>
+  setStartingWellState: Dispatch<
+    SetStateAction<Record<StartingWellOption, boolean>>
   >
   wells: string[]
 }): JSX.Element {
@@ -255,7 +256,7 @@ function StartingWell({
     channels === 8 ? ['A1', 'B1'] : ['A1', 'A2', 'B1', 'B2']
 
   // on mount, select A1 well group for 96-channel
-  React.useEffect(() => {
+  useEffect(() => {
     // deselect all wells on mount; clears well selection when navigating back within quick transfer flow
     // otherwise, selected wells and lastSelectedIndex pointer will be out of sync
     deselectWells(wells)
diff --git a/app/src/organisms/WellSelection/SelectionRect.tsx b/app/src/organisms/WellSelection/SelectionRect.tsx
index 7c9d1ac0357..6d241d5f0c0 100644
--- a/app/src/organisms/WellSelection/SelectionRect.tsx
+++ b/app/src/organisms/WellSelection/SelectionRect.tsx
@@ -1,19 +1,20 @@
-import * as React from 'react'
+import { useState, useRef, useCallback, useEffect } from 'react'
 import { Flex, JUSTIFY_CENTER } from '@opentrons/components'
 
+import type { MouseEventHandler, ReactNode, TouchEventHandler } from 'react'
 import type { DragRect, GenericRect } from './types'
 
 interface SelectionRectProps {
   onSelectionMove?: (rect: GenericRect) => void
   onSelectionDone?: (rect: GenericRect) => void
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export function SelectionRect(props: SelectionRectProps): JSX.Element {
   const { onSelectionMove, onSelectionDone, children } = props
 
-  const [positions, setPositions] = React.useState<DragRect | null>(null)
-  const parentRef = React.useRef<HTMLElement | SVGElement | null>(null)
+  const [positions, setPositions] = useState<DragRect | null>(null)
+  const parentRef = useRef<HTMLElement | SVGElement | null>(null)
 
   const getRect = (args: DragRect): GenericRect => {
     const { xStart, yStart, xDynamic, yDynamic } = args
@@ -25,7 +26,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     }
   }
 
-  const handleDrag = React.useCallback(
+  const handleDrag = useCallback(
     (e: TouchEvent | MouseEvent): void => {
       let xDynamic: number
       let yDynamic: number
@@ -55,7 +56,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     [onSelectionMove]
   )
 
-  const handleDragEnd = React.useCallback(
+  const handleDragEnd = useCallback(
     (e: TouchEvent | MouseEvent): void => {
       if (!(e instanceof TouchEvent) && !(e instanceof MouseEvent)) {
         return
@@ -70,7 +71,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     [onSelectionDone, positions]
   )
 
-  const handleTouchStart: React.TouchEventHandler = e => {
+  const handleTouchStart: TouchEventHandler = e => {
     const touch = e.touches[0]
     setPositions({
       xStart: touch.clientX,
@@ -80,7 +81,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     })
   }
 
-  const handleMouseDown: React.MouseEventHandler = e => {
+  const handleMouseDown: MouseEventHandler = e => {
     setPositions({
       xStart: e.clientX,
       xDynamic: e.clientX,
@@ -89,7 +90,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     })
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener('touchmove', handleDrag)
     document.addEventListener('touchend', handleDragEnd)
     document.addEventListener('mousemove', handleDrag)
diff --git a/app/src/pages/ODD/ConnectViaWifi/JoinOtherNetwork.tsx b/app/src/pages/ODD/ConnectViaWifi/JoinOtherNetwork.tsx
index 4abd146238a..3366f9180b0 100644
--- a/app/src/pages/ODD/ConnectViaWifi/JoinOtherNetwork.tsx
+++ b/app/src/pages/ODD/ConnectViaWifi/JoinOtherNetwork.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Flex, DIRECTION_COLUMN } from '@opentrons/components'
@@ -6,11 +6,12 @@ import { Flex, DIRECTION_COLUMN } from '@opentrons/components'
 import { SetWifiSsid } from '/app/organisms/ODD/NetworkSettings'
 import { RobotSetupHeader } from '/app/organisms/ODD/RobotSetupHeader'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { WifiScreenOption } from './'
 
 interface JoinOtherNetworkProps {
   setCurrentOption: (option: WifiScreenOption) => void
-  setSelectedSsid: React.Dispatch<React.SetStateAction<string>>
+  setSelectedSsid: Dispatch<SetStateAction<string>>
 }
 
 export function JoinOtherNetwork({
@@ -19,8 +20,8 @@ export function JoinOtherNetwork({
 }: JoinOtherNetworkProps): JSX.Element {
   const { i18n, t } = useTranslation('device_settings')
 
-  const [inputSsid, setInputSsid] = React.useState<string>('')
-  const [errorMessage, setErrorMessage] = React.useState<string | null>(null)
+  const [inputSsid, setInputSsid] = useState<string>('')
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
   const handleContinue = (): void => {
     if (inputSsid.length >= 2 && inputSsid.length <= 32) {
diff --git a/app/src/pages/ODD/DeckConfiguration/index.tsx b/app/src/pages/ODD/DeckConfiguration/index.tsx
index 2de5de02c46..71b8b5905bc 100644
--- a/app/src/pages/ODD/DeckConfiguration/index.tsx
+++ b/app/src/pages/ODD/DeckConfiguration/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
@@ -20,6 +20,7 @@ import {
   useNotifyDeckConfigurationQuery,
 } from '/app/resources/deck_configuration'
 
+import type { ComponentProps } from 'react'
 import type { SmallButton } from '/app/atoms/buttons'
 
 export function DeckConfigurationEditor(): JSX.Element {
@@ -32,7 +33,7 @@ export function DeckConfigurationEditor(): JSX.Element {
   const [
     showSetupInstructionsModal,
     setShowSetupInstructionsModal,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
 
   const isOnDevice = true
   const {
@@ -41,10 +42,9 @@ export function DeckConfigurationEditor(): JSX.Element {
     addFixtureModal,
   } = useDeckConfigurationEditingTools(isOnDevice)
 
-  const [
-    showDiscardChangeModal,
-    setShowDiscardChangeModal,
-  ] = React.useState<boolean>(false)
+  const [showDiscardChangeModal, setShowDiscardChangeModal] = useState<boolean>(
+    false
+  )
 
   const deckConfig = useNotifyDeckConfigurationQuery().data ?? []
 
@@ -52,7 +52,7 @@ export function DeckConfigurationEditor(): JSX.Element {
     navigate(-1)
   }
 
-  const secondaryButtonProps: React.ComponentProps<typeof SmallButton> = {
+  const secondaryButtonProps: ComponentProps<typeof SmallButton> = {
     onClick: () => {
       setShowSetupInstructionsModal(true)
     },
diff --git a/app/src/pages/ODD/InstrumentDetail/InstrumentDetailOverflowMenu.tsx b/app/src/pages/ODD/InstrumentDetail/InstrumentDetailOverflowMenu.tsx
index 96ea37d14d3..c49ef3d4f34 100644
--- a/app/src/pages/ODD/InstrumentDetail/InstrumentDetailOverflowMenu.tsx
+++ b/app/src/pages/ODD/InstrumentDetail/InstrumentDetailOverflowMenu.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import NiceModal, { useModal } from '@ebay/nice-modal-react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
@@ -26,6 +26,7 @@ import { FLOWS } from '/app/organisms/PipetteWizardFlows/constants'
 import { GRIPPER_FLOW_TYPES } from '/app/organisms/GripperWizardFlows/constants'
 import { getTopPortalEl } from '/app/App/portal'
 
+import type { ComponentProps, MouseEventHandler } from 'react'
 import type {
   PipetteData,
   GripperData,
@@ -55,13 +56,13 @@ const InstrumentDetailsOverflowMenu = NiceModal.create(
     const { instrument, host, enableDTWiz } = props
     const { t } = useTranslation('robot_controls')
     const modal = useModal()
-    const [wizardProps, setWizardProps] = React.useState<
-      | React.ComponentProps<typeof GripperWizardFlows>
-      | React.ComponentProps<typeof PipetteWizardFlows>
+    const [wizardProps, setWizardProps] = useState<
+      | ComponentProps<typeof GripperWizardFlows>
+      | ComponentProps<typeof PipetteWizardFlows>
       | null
     >(null)
     const sharedGripperWizardProps: Pick<
-      React.ComponentProps<typeof GripperWizardFlows>,
+      ComponentProps<typeof GripperWizardFlows>,
       'attachedGripper' | 'closeFlow'
     > = {
       attachedGripper: instrument,
@@ -75,7 +76,7 @@ const InstrumentDetailsOverflowMenu = NiceModal.create(
       instrument.mount !== 'extension' &&
       instrument.data?.channels === 96
 
-    const handleRecalibrate: React.MouseEventHandler = () => {
+    const handleRecalibrate: MouseEventHandler = () => {
       if (instrument?.ok) {
         setWizardProps(
           instrument.mount === 'extension'
diff --git a/app/src/pages/ODD/ProtocolDashboard/PinnedProtocol.tsx b/app/src/pages/ODD/ProtocolDashboard/PinnedProtocol.tsx
index 2620bd6de52..27db6210d68 100644
--- a/app/src/pages/ODD/ProtocolDashboard/PinnedProtocol.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/PinnedProtocol.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import styled, { css } from 'styled-components'
@@ -23,6 +23,7 @@ import { LongPressModal } from './LongPressModal'
 import { formatTimeWithUtcLabel } from '/app/resources/runs'
 import { useUpdatedLastRunTime } from './hooks'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { UseLongPressResult } from '@opentrons/components'
 import type { ProtocolResource } from '@opentrons/shared-data'
 
@@ -63,7 +64,7 @@ const cardStyleBySize: {
 
 interface PinnedProtocolProps {
   protocol: ProtocolResource
-  longPress: React.Dispatch<React.SetStateAction<boolean>>
+  longPress: Dispatch<SetStateAction<boolean>>
   setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void
   setTargetProtocolId: (targetProtocolId: string) => void
   cardSize?: CardSizeType
@@ -98,7 +99,7 @@ export function PinnedProtocol(props: PinnedProtocolProps): JSX.Element {
       navigate(`/protocols/${protocolId}`)
     }
   }
-  React.useEffect(() => {
+  useEffect(() => {
     if (longpress.isLongPressed) {
       longPress(true)
     }
diff --git a/app/src/pages/ODD/ProtocolSetup/index.tsx b/app/src/pages/ODD/ProtocolSetup/index.tsx
index 03a03626a55..553eec5aadd 100644
--- a/app/src/pages/ODD/ProtocolSetup/index.tsx
+++ b/app/src/pages/ODD/ProtocolSetup/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 import last from 'lodash/last'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
@@ -82,7 +82,14 @@ import {
   useProtocolAnalysisErrors,
 } from '/app/resources/runs'
 import { useScrollPosition } from '/app/local-resources/dom-utils'
+import {
+  getLabwareSetupItemGroups,
+  getProtocolUsesGripper,
+  useRequiredProtocolHardwareFromAnalysis,
+  useMissingProtocolHardwareFromAnalysis,
+} from '/app/transformations/commands'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { Run } from '@opentrons/api-client'
 import type { CutoutFixtureId, CutoutId } from '@opentrons/shared-data'
 import type { OnDeviceRouteParams } from '/app/App/types'
@@ -92,19 +99,13 @@ import type {
   ProtocolHardware,
   ProtocolFixture,
 } from '/app/transformations/commands'
-import {
-  getLabwareSetupItemGroups,
-  getProtocolUsesGripper,
-  useRequiredProtocolHardwareFromAnalysis,
-  useMissingProtocolHardwareFromAnalysis,
-} from '/app/transformations/commands'
 
 const FETCH_DURATION_MS = 5000
 
 const ANALYSIS_POLL_MS = 5000
 interface PrepareToRunProps {
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
   confirmAttachment: () => void
   confirmStepsComplete: () => void
   play: () => void
@@ -147,7 +148,7 @@ function PrepareToRun({
   const [
     isPollingForCompletedAnalysis,
     setIsPollingForCompletedAnalysis,
-  ] = React.useState<boolean>(mostRecentAnalysisSummary?.status !== 'completed')
+  ] = useState<boolean>(mostRecentAnalysisSummary?.status !== 'completed')
 
   const {
     data: mostRecentAnalysis = null,
@@ -165,7 +166,7 @@ function PrepareToRun({
     navigate('/protocols')
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (mostRecentAnalysis?.status === 'completed') {
       setIsPollingForCompletedAnalysis(false)
     } else {
@@ -229,10 +230,9 @@ function PrepareToRun({
       parameter.type === 'csv_file' || parameter.value !== parameter.default
   )
 
-  const [
-    showConfirmCancelModal,
-    setShowConfirmCancelModal,
-  ] = React.useState<boolean>(false)
+  const [showConfirmCancelModal, setShowConfirmCancelModal] = useState<boolean>(
+    false
+  )
 
   const deckConfigCompatibility = useDeckConfigurationCompatibility(
     robotType,
@@ -670,7 +670,7 @@ export function ProtocolSetup(): JSX.Element {
   const [
     showAnalysisFailedModal,
     setShowAnalysisFailedModal,
-  ] = React.useState<boolean>(true)
+  ] = useState<boolean>(true)
   const robotType = useRobotType(robotName)
   const attachedModules =
     useAttachedModules({
@@ -684,7 +684,7 @@ export function ProtocolSetup(): JSX.Element {
   const [
     isPollingForCompletedAnalysis,
     setIsPollingForCompletedAnalysis,
-  ] = React.useState<boolean>(mostRecentAnalysisSummary?.status !== 'completed')
+  ] = useState<boolean>(mostRecentAnalysisSummary?.status !== 'completed')
 
   const {
     data: mostRecentAnalysis = null,
@@ -699,7 +699,7 @@ export function ProtocolSetup(): JSX.Element {
 
   const areLiquidsInProtocol = (mostRecentAnalysis?.liquids?.length ?? 0) > 0
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (mostRecentAnalysis?.status === 'completed') {
       setIsPollingForCompletedAnalysis(false)
     } else {
@@ -754,14 +754,14 @@ export function ProtocolSetup(): JSX.Element {
     handleProceedToRunClick,
     !configBypassHeaterShakerAttachmentConfirmation
   )
-  const [cutoutId, setCutoutId] = React.useState<CutoutId | null>(null)
-  const [providedFixtureOptions, setProvidedFixtureOptions] = React.useState<
+  const [cutoutId, setCutoutId] = useState<CutoutId | null>(null)
+  const [providedFixtureOptions, setProvidedFixtureOptions] = useState<
     CutoutFixtureId[]
   >([])
   // TODO(jh 10-31-24): Refactor the below to utilize useMissingStepsModal.
-  const [labwareConfirmed, setLabwareConfirmed] = React.useState<boolean>(false)
-  const [liquidsConfirmed, setLiquidsConfirmed] = React.useState<boolean>(false)
-  const [offsetsConfirmed, setOffsetsConfirmed] = React.useState<boolean>(false)
+  const [labwareConfirmed, setLabwareConfirmed] = useState<boolean>(false)
+  const [liquidsConfirmed, setLiquidsConfirmed] = useState<boolean>(false)
+  const [offsetsConfirmed, setOffsetsConfirmed] = useState<boolean>(false)
   const missingSteps = [
     !offsetsConfirmed ? t('applied_labware_offsets') : null,
     !labwareConfirmed ? t('labware_placement') : null,
@@ -779,9 +779,7 @@ export function ProtocolSetup(): JSX.Element {
   const isHeaterShakerInProtocol = useIsHeaterShakerInProtocol()
 
   // orchestrate setup subpages/components
-  const [setupScreen, setSetupScreen] = React.useState<SetupScreens>(
-    'prepare to run'
-  )
+  const [setupScreen, setSetupScreen] = useState<SetupScreens>('prepare to run')
   const setupComponentByScreen = {
     'prepare to run': (
       <PrepareToRun
diff --git a/app/src/pages/ODD/QuickTransferDashboard/PinnedTransfer.tsx b/app/src/pages/ODD/QuickTransferDashboard/PinnedTransfer.tsx
index dcb282be9d7..ad01dedc2d9 100644
--- a/app/src/pages/ODD/QuickTransferDashboard/PinnedTransfer.tsx
+++ b/app/src/pages/ODD/QuickTransferDashboard/PinnedTransfer.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled, { css } from 'styled-components'
 
@@ -20,6 +20,7 @@ import {
 import { LongPressModal } from './LongPressModal'
 import { formatTimeWithUtcLabel } from '/app/resources/runs'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { UseLongPressResult } from '@opentrons/components'
 import type { ProtocolResource } from '@opentrons/shared-data'
 
@@ -59,7 +60,7 @@ const cardStyleBySize: {
 
 export function PinnedTransfer(props: {
   transfer: ProtocolResource
-  longPress: React.Dispatch<React.SetStateAction<boolean>>
+  longPress: Dispatch<SetStateAction<boolean>>
   setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void
   setTargetTransferId: (targetProtocolId: string) => void
   cardSize?: CardSizeType
@@ -83,7 +84,7 @@ export function PinnedTransfer(props: {
       navigate(`/quick-transfer/${transferId}`)
     }
   }
-  React.useEffect(() => {
+  useEffect(() => {
     if (longpress.isLongPressed) {
       longPress(true)
     }
diff --git a/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx b/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx
index a0f99a4367e..fe4a939d543 100644
--- a/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx
+++ b/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
@@ -36,6 +36,7 @@ import { OddModal } from '/app/molecules/OddModal'
 import { LongPressModal } from './LongPressModal'
 import { formatTimeWithUtcLabel } from '/app/resources/runs'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { UseLongPressResult } from '@opentrons/components'
 import type { ProtocolResource } from '@opentrons/shared-data'
 import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
@@ -44,7 +45,7 @@ const REFETCH_INTERVAL = 5000
 
 export function QuickTransferCard(props: {
   quickTransfer: ProtocolResource
-  longPress: React.Dispatch<React.SetStateAction<boolean>>
+  longPress: Dispatch<SetStateAction<boolean>>
   setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void
   setTargetTransferId: (targetTransferId: string) => void
 }): JSX.Element {
@@ -55,11 +56,11 @@ export function QuickTransferCard(props: {
     setTargetTransferId,
   } = props
   const navigate = useNavigate()
-  const [showIcon, setShowIcon] = React.useState<boolean>(false)
+  const [showIcon, setShowIcon] = useState<boolean>(false)
   const [
     showFailedAnalysisModal,
     setShowFailedAnalysisModal,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
   const { t, i18n } = useTranslation(['quick_transfer', 'branded'])
   const transferName =
     quickTransfer.metadata.protocolName ?? quickTransfer.files[0].name
@@ -113,7 +114,7 @@ export function QuickTransferCard(props: {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (longpress.isLongPressed) {
       longPress(true)
       setTargetTransferId(quickTransfer.id)
diff --git a/app/src/resources/deck_configuration/hooks.tsx b/app/src/resources/deck_configuration/hooks.tsx
index 79a2e80124b..935c81a4cb2 100644
--- a/app/src/resources/deck_configuration/hooks.tsx
+++ b/app/src/resources/deck_configuration/hooks.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { getInitialAndMovedLabwareInSlots } from '@opentrons/components'
 import {
   FLEX_ROBOT_TYPE,
@@ -15,6 +15,7 @@ import {
   SINGLE_SLOT_FIXTURES,
 } from '@opentrons/shared-data'
 
+import type { ReactNode } from 'react'
 import type {
   CompletedProtocolAnalysis,
   CutoutConfigProtocolSpec,
@@ -118,7 +119,7 @@ interface DeckConfigurationEditingTools {
     cutoutId: CutoutId,
     cutoutFixtureId: CutoutFixtureId
   ) => void
-  addFixtureModal: React.ReactNode
+  addFixtureModal: ReactNode
 }
 export function useDeckConfigurationEditingTools(
   isOnDevice: boolean
@@ -129,9 +130,7 @@ export function useDeckConfigurationEditingTools(
       refetchInterval: DECK_CONFIG_REFETCH_INTERVAL,
     }).data ?? []
   const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
-  const [targetCutoutId, setTargetCutoutId] = React.useState<CutoutId | null>(
-    null
-  )
+  const [targetCutoutId, setTargetCutoutId] = useState<CutoutId | null>(null)
 
   const addFixtureToCutout = (cutoutId: CutoutId): void => {
     setTargetCutoutId(cutoutId)