docs: fix error on collapsing prerequisites (#10153)

www/packages/docs-ui/src/components/Prerequisites/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react"
+import React, { useRef } from "react"
 import { Button, useCollapsible } from "../.."
 import clsx from "clsx"
 import { TriangleRightMini } from "@medusajs/icons"
@@ -15,9 +15,12 @@ type PrerequisitesProps = {
 }
 
 export const Prerequisites = ({ items }: PrerequisitesProps) => {
+  const itemsRef = useRef<HTMLDivElement>(null)
   const { collapsed, getCollapsibleElms, setCollapsed } = useCollapsible({
     initialValue: false,
     translateEnabled: false,
+    childrenRef: itemsRef,
+    useChild: false,
   })
 
   const getPosition = (index: number): PrerequisiteItemPosition => {
@@ -71,7 +74,7 @@ export const Prerequisites = ({ items }: PrerequisitesProps) => {
         </Button>
       </summary>
       {getCollapsibleElms(
-        <div className="flex gap-[6px] flex-col">
+        <div className="flex gap-[6px] flex-col" ref={itemsRef}>
           {items.map((item, index) => (
             <PrerequisiteItem
               item={{

www/packages/docs-ui/src/hooks/use-collapsible/index.tsx

@@ -11,6 +11,7 @@ export type CollapsibleProps = {
   onClose?: () => void
   unmountOnExit?: boolean
   childrenRef?: React.RefObject<HTMLElement | null>
+  useChild?: boolean
 }
 
 export type CollapsibleReturn = {
@@ -26,10 +27,15 @@ export const useCollapsible = ({
   onClose,
   unmountOnExit = true,
   childrenRef,
+  useChild = true,
 }: CollapsibleProps): CollapsibleReturn => {
   const [collapsed, setCollapsed] = useState(initialValue)
 
   const getNodeFromChildrenRef = () => {
+    if (!useChild) {
+      return childrenRef?.current
+    }
+
     return (
       (childrenRef?.current?.firstElementChild as HTMLElement) ||
       childrenRef?.current