Fix Collapsible

src/Collapsible.tsx

@@ -1,28 +1,18 @@
 import React from 'react';
 import {Collapse} from 'bootstrap';
-import classNames from 'classnames';
-
-export interface CollapsibleHandle {
-  show: () => void;
-  hide: () => void;
-  toggle: () => void;
-}
 
 export default function Collapsible({children, show}: { children: React.ReactNode; show: boolean }) {
-  const collapse = React.useRef<Collapse>();
+  const id = React.useId();
-
-  const onLoad = React.useCallback((element: HTMLDivElement) => {
-    collapse.current = new Collapse(element, {toggle: show});
-  }, []);
 
   React.useEffect(() => {
+    const collapse = Collapse.getOrCreateInstance(`#${id}`, {toggle: show});
     if (show)
-      collapse.current?.show();
+      collapse.show();
     else
-      collapse.current?.hide();
+      collapse.hide();
-  }, [show]);
+  }, [id, show]);
 
-  return <div ref={onLoad} className={classNames('collapse', {show})}>
+  return <div id={id} className="collapse">
     {children}
   </div>;
 }