Refactor InfoCollapse component to use collapseKey prop for active state management and improve structure

src/components/Dashboard/common/InfoCollapse.jsx

@@ -12,33 +12,33 @@ const InfoCollapse = ({
   active,
   onToggle,
   className = '',
-  key = 'default'
+  collapseKey = 'default'
 }) => {
   return (
     <Collapse
       ghost
       expandIconPosition='end'
-      activeKey={active ? [key] : []}
+      activeKey={active ? [collapseKey] : []}
       onChange={(keys) => onToggle(keys.length > 0)}
       expandIcon={({ isActive }) => (
         <CaretLeftOutlined rotate={isActive ? -90 : 0} />
       )}
       className={`no-h-padding-collapse ${className}`}
-    >
+      items={[
-      <Collapse.Panel
+        {
-        header={
+          key: collapseKey,
-          <Flex align='center' gap={'middle'}>
+          children: children,
-            {icon}
+          label: (
-            <Title level={5} style={{ margin: 0 }}>
+            <Flex align='center' gap={'middle'}>
-              {title}
+              {icon}
-            </Title>
+              <Title level={5} style={{ margin: 0 }}>
-          </Flex>
+                {title}
+              </Title>
+            </Flex>
+          )
         }
-        key={key}
+      ]}
-      >
+    />
-        {children}
-      </Collapse.Panel>
-    </Collapse>
   )
 }
 
@@ -49,7 +49,7 @@ InfoCollapse.propTypes = {
   active: PropTypes.bool.isRequired,
   onToggle: PropTypes.func.isRequired,
   className: PropTypes.string,
-  key: PropTypes.string
+  collapseKey: PropTypes.string
 }
 
 export default InfoCollapse