fix: use useImperativeHandle instead of mutating a parent ref (#6813)

packages/sanity/src/structure/components/pane/Pane.tsx

@@ -1,18 +1,12 @@
-import {
-  BoundaryElementProvider,
-  Card,
-  type CardProps,
-  Code,
-  Flex,
-  useForwardedRef,
-} from '@sanity/ui'
+import {BoundaryElementProvider, Card, type CardProps, Code, Flex} from '@sanity/ui'
 import {
   type ForwardedRef,
   forwardRef,
   type HTMLProps,
   type ReactNode,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useState,
 } from 'react'
@@ -81,18 +75,12 @@ export const Pane = forwardRef(function Pane(
   const expanded = expandedElement === rootElement
   const collapsed = layoutCollapsed ? false : pane?.collapsed || false
   const nextCollapsed = nextPane?.collapsed || false
-  const forwardedRef = useForwardedRef(ref)
   const flex = pane?.flex ?? flexProp
   const currentMinWidth = pane?.currentMinWidth ?? currentMinWidthProp
   const currentMaxWidth = pane?.currentMaxWidth ?? currentMaxWidthProp
 
-  const setRef = useCallback(
-    (refValue: HTMLDivElement | null) => {
-      setRootElement(refValue)
-      forwardedRef.current = refValue
-    },
-    [forwardedRef],
-  )
+  // Forward ref to parent
+  useImperativeHandle(ref, () => rootElement!, [rootElement])
 
   useEffect(() => {
     if (!rootElement) return undefined
@@ -211,7 +199,7 @@ export const Pane = forwardRef(function Pane(
               data-pane-collapsed={collapsed ? '' : undefined}
               data-pane-index={paneIndex}
               data-pane-selected={selected ? '' : undefined}
-              ref={setRef}
+              ref={setRootElement}
               style={style}
             >
               {PANE_DEBUG && (