diff --git a/packages/propel/src/collapsible/collapsible.tsx b/packages/propel/src/collapsible/collapsible.tsx
index 9178b44a42c..e105b9c6c8a 100644
--- a/packages/propel/src/collapsible/collapsible.tsx
+++ b/packages/propel/src/collapsible/collapsible.tsx
@@ -47,7 +47,7 @@ const useCollapsible = () => {
 
 // Components
 function Root({ children, className, isOpen: controlledIsOpen, onToggle, defaultOpen }: RootProps) {
-  const [localIsOpen, setLocalIsOpen] = useState<boolean>(controlledIsOpen || defaultOpen || false);
+  const [localIsOpen, setLocalIsOpen] = useState<boolean>(controlledIsOpen !== undefined ? controlledIsOpen : !!defaultOpen);
 
   useEffect(() => {
     if (controlledIsOpen !== undefined) {
diff --git a/packages/ui/src/collapsible/collapsible.tsx b/packages/ui/src/collapsible/collapsible.tsx
index 0831db3bb1a..97a9992513b 100644
--- a/packages/ui/src/collapsible/collapsible.tsx
+++ b/packages/ui/src/collapsible/collapsible.tsx
@@ -4,7 +4,6 @@
  * See the LICENSE file for details.
  */
 
-import { Disclosure, Transition } from "@headlessui/react";
 import React, { useState, useEffect, useCallback } from "react";
 
 export type TCollapsibleProps = {
@@ -21,7 +20,7 @@ export type TCollapsibleProps = {
 export function Collapsible(props: TCollapsibleProps) {
   const { title, children, buttonRef, className, buttonClassName, isOpen, onToggle, defaultOpen } = props;
   // state
-  const [localIsOpen, setLocalIsOpen] = useState<boolean>(isOpen || defaultOpen ? true : false);
+  const [localIsOpen, setLocalIsOpen] = useState<boolean>(isOpen !== undefined ? isOpen : !!defaultOpen);
 
   useEffect(() => {
     if (isOpen !== undefined) {
@@ -39,24 +38,15 @@ export function Collapsible(props: TCollapsibleProps) {
   }, [isOpen, onToggle]);
 
   return (
-    <Disclosure as="div" className={className}>
-      <Disclosure.Button ref={buttonRef} className={buttonClassName} onClick={handleOnClick}>
+    <div className={className}>
+      <button ref={buttonRef} type="button" className={buttonClassName} onClick={handleOnClick} aria-expanded={localIsOpen}>
         {title}
-      </Disclosure.Button>
-      <Transition
-        show={localIsOpen}
-        enter="transition-all duration-300 ease-in-out"
-        enterFrom="grid-rows-[0fr] opacity-0"
-        enterTo="grid-rows-[1fr] opacity-100"
-        leave="transition-all duration-300 ease-in-out"
-        leaveFrom="grid-rows-[1fr] opacity-100"
-        leaveTo="grid-rows-[0fr] opacity-0"
-        className="grid overflow-hidden"
-      >
-        <Disclosure.Panel static className="min-h-0">
+      </button>
+      {localIsOpen && (
+        <div className="min-h-0">
           {children}
-        </Disclosure.Panel>
-      </Transition>
-    </Disclosure>
+        </div>
+      )}
+    </div>
   );
 }