diff --git a/package.json b/package.json
index 0e14c5a2..9f121c43 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
   "dependencies": {
     "@babel/runtime": "^8.0.0",
     "@rc-component/motion": "^1.1.4",
-    "@rc-component/util": "^1.11.1",
+    "@rc-component/util": "^1.13.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
diff --git a/src/Panel.tsx b/src/Panel.tsx
index 5dd97aca..c489ee2c 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
-import { KeyCode } from '@rc-component/util';
+import { isNonNullable, isReactRenderable, KeyCode } from '@rc-component/util';
 import React from 'react';
 import type { CollapsePanelProps } from './interface';
 import PanelContent from './PanelContent';
@@ -30,7 +30,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
 
   const disabled = collapsible === 'disabled';
 
-  const ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
+  const ifExtraExist = isNonNullable(extra) && typeof extra !== 'boolean';
 
   const collapsibleProps = {
     onClick: () => {
@@ -50,7 +50,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
   // ======================== Icon ========================
   const iconNodeInner =
     typeof expandIcon === 'function' ? expandIcon(props) : <i className="arrow" />;
-  const iconNode = iconNodeInner && (
+  const iconNode = isReactRenderable(iconNodeInner) && (
     <div
       className={clsx(`${prefixCls}-expand-icon`, customizeClassNames?.icon)}
       style={styles?.icon}
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index c509cb3c..8197a304 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -205,18 +205,25 @@ describe('collapse', () => {
     });
   });
 
-  it('should support extra whit number 0', () => {
+  it.each([
+    { name: 'number zero', extra: 0, expected: true, content: '0' },
+    { name: 'empty string', extra: '', expected: true, content: '' },
+    { name: 'true', extra: true, expected: false },
+    { name: 'false', extra: false, expected: false },
+  ])('should preserve extra semantics for $name', ({ extra, expected, content }) => {
     const { container } = render(
       <Collapse onChange={onChange} activeKey={0}>
-        <Panel header="collapse 0" key={0} extra={0}>
+        <Panel header="collapse 0" key={0} extra={extra}>
           zero
         </Panel>
       </Collapse>,
     );
 
     const extraNodes = container.querySelectorAll('.rc-collapse-extra');
-    expect(extraNodes).toHaveLength(1);
-    expect(extraNodes[0].innerHTML).toBe('0');
+    expect(extraNodes).toHaveLength(expected ? 1 : 0);
+    if (expected) {
+      expect(extraNodes[0].innerHTML).toBe(content);
+    }
   });
 
   it('should support activeKey number 0', () => {