From c34473a9e05a24c76079ac8515924e32ba390cbb Mon Sep 17 00:00:00 2001
From: Kanstantinas Piatrashka
 <115642938+piatrashkakanstantinas@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:16:47 +0200
Subject: [PATCH] Fix missing useId import (#2411)

Co-authored-by: Rohan <45748283+r100-stack@users.noreply.github.com>
---
 .changeset/cool-pants-greet.md                    | 5 +++++
 packages/itwinui-react/src/core/Panels/Panels.tsx | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cool-pants-greet.md

diff --git a/.changeset/cool-pants-greet.md b/.changeset/cool-pants-greet.md
new file mode 100644
index 00000000000..48d623065a5
--- /dev/null
+++ b/.changeset/cool-pants-greet.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed `Panels.Trigger` not working in older React versions where `useId` is not available.
diff --git a/packages/itwinui-react/src/core/Panels/Panels.tsx b/packages/itwinui-react/src/core/Panels/Panels.tsx
index 9483f1dee42..de0b86c8269 100644
--- a/packages/itwinui-react/src/core/Panels/Panels.tsx
+++ b/packages/itwinui-react/src/core/Panels/Panels.tsx
@@ -16,6 +16,7 @@ import {
   useWarningLogger,
   useLayoutEffect,
   useLatestRef,
+  useId,
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
@@ -269,7 +270,7 @@ const PanelTrigger = (props: PanelTriggerProps) => {
   } = useSafeContext(PanelsWrapperContext);
   const { id: panelId } = useSafeContext(PanelContext);
 
-  const fallbackId = React.useId();
+  const fallbackId = useId();
   const triggerId = children.props.id || fallbackId;
 
   const onClick = React.useCallback(() => {