diff --git a/.changeset/twelve-dolls-tap.md b/.changeset/twelve-dolls-tap.md
new file mode 100644
index 0000000000..8c5953f17e
--- /dev/null
+++ b/.changeset/twelve-dolls-tap.md
@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed React 17 compatibility by using `useId` from `react-aria` instead of React's built-in hook which is only available in React 18+.
diff --git a/.patches/pr-32428.txt b/.patches/pr-32428.txt
new file mode 100644
index 0000000000..77136cf4c8
--- /dev/null
+++ b/.patches/pr-32428.txt
@@ -0,0 +1 @@
+fix(ui): restore React 17 compatibility for useId
\ No newline at end of file
diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx
index fd6e595eba..f417063e74 100644
--- a/packages/ui/src/components/Table/components/Table.tsx
+++ b/packages/ui/src/components/Table/components/Table.tsx
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { useId } from 'react-aria';
 import { type Key, ResizableTableContainer } from 'react-aria-components';
 import { TableRoot } from './TableRoot';
 import { TableHeader } from './TableHeader';
@@ -28,7 +29,7 @@ import type {
   RowRenderFn,
   TablePaginationType,
 } from '../types';
-import { Fragment, useId, useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import { VisuallyHidden } from '../../VisuallyHidden';
 import { Flex } from '../../Flex';
 
diff --git a/packages/ui/src/components/TablePagination/TablePagination.tsx b/packages/ui/src/components/TablePagination/TablePagination.tsx
index a8ff46e889..93ba1e0ef0 100644
--- a/packages/ui/src/components/TablePagination/TablePagination.tsx
+++ b/packages/ui/src/components/TablePagination/TablePagination.tsx
@@ -15,6 +15,7 @@
  */
 
 import clsx from 'clsx';
+import { useId } from 'react-aria';
 import { Text } from '../Text';
 import { ButtonIcon } from '../ButtonIcon';
 import { Select } from '../Select';
@@ -23,7 +24,7 @@ import { useStyles } from '../../hooks/useStyles';
 import { TablePaginationDefinition } from './definition';
 import styles from './TablePagination.module.css';
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
 
 const DEFAULT_PAGE_SIZE_OPTIONS: PageSizeOption[] = [
   { label: 'Show 5 results', value: 5 },