fix(ui): restore React 17 compatibility for useId

Use useId from react-aria instead of React's built-in hook,
which is only available in React 18+.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.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+.

.patches/pr-32428.txt

@@ -0,0 +1 @@
+fix(ui): restore React 17 compatibility for useId

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';
 

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 },