diff --git a/README.md b/README.md
index 2bbf9e03..221cd54a 100644
--- a/README.md
+++ b/README.md
@@ -77,7 +77,6 @@ React.render(
 | activeKey | string | - | current active tabPanel's key |
 | animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation |
 | defaultActiveKey | string | - | initial active tabPanel's key if activeKey is absent |
-| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
 | direction | `'ltr' | 'rlt'` | `'ltr'` | Layout direction of tabs component |
 | editable | { onEdit(type: 'add' | 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } | - | config tab editable |
 | locale | { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } | - | Accessibility locale help text |
@@ -100,6 +99,7 @@ React.render(
 | forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs |
 | tab | ReactNode | - | current tab's title corresponding to current tabPane |
 | closeIcon | ReactNode | - | Config close icon |
+| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
 
 ## Development
 
diff --git a/docs/examples/mix.tsx b/docs/examples/mix.tsx
index 79693c60..a903bfea 100644
--- a/docs/examples/mix.tsx
+++ b/docs/examples/mix.tsx
@@ -82,7 +82,17 @@ export default () => {
           <input
             type="checkbox"
             checked={destroyInactiveTabPane}
-            onChange={() => setDestroyInactiveTabPane(val => !val)}
+            onChange={() => {
+              setTabPanes(tabs =>
+                tabs.map(tab =>
+                  React.cloneElement(tab, {
+                    ...tab.props,
+                    destroyInactiveTabPane: !tab.props.destroyInactiveTabPane,
+                  }),
+                ),
+              );
+              setDestroyInactiveTabPane(val => !val);
+            }}
           />
           Destroy Inactive TabPane
         </label>
@@ -150,7 +160,6 @@ export default () => {
             onTabScroll={info => {
               console.log('Scroll:', info);
             }}
-            destroyInactiveTabPane={destroyInactiveTabPane}
             animated={{ tabPane: animated }}
             editable={editableConfig}
             direction={rtl ? 'rtl' : null}
diff --git a/src/TabPanelList/TabPane.tsx b/src/TabPanelList/TabPane.tsx
index c21996ab..1346d14c 100644
--- a/src/TabPanelList/TabPane.tsx
+++ b/src/TabPanelList/TabPane.tsx
@@ -10,6 +10,7 @@ export interface TabPaneProps {
   forceRender?: boolean;
   closable?: boolean;
   closeIcon?: React.ReactNode;
+  destroyInactiveTabPane?: boolean;
 
   // Pass by TabPaneList
   prefixCls?: string;
@@ -17,7 +18,6 @@ export interface TabPaneProps {
   id?: string;
   animated?: boolean;
   active?: boolean;
-  destroyInactiveTabPane?: boolean;
 }
 
 export default function TabPane({
diff --git a/src/TabPanelList/index.tsx b/src/TabPanelList/index.tsx
index ac1d0a9d..06280a16 100644
--- a/src/TabPanelList/index.tsx
+++ b/src/TabPanelList/index.tsx
@@ -9,7 +9,6 @@ export interface TabPanelListProps {
   rtl: boolean;
   animated?: AnimatedConfig;
   tabPosition?: TabPosition;
-  destroyInactiveTabPane?: boolean;
 }
 
 export default function TabPanelList({
@@ -18,12 +17,11 @@ export default function TabPanelList({
   animated,
   tabPosition,
   rtl,
-  destroyInactiveTabPane,
 }: TabPanelListProps) {
   const { prefixCls, tabs } = React.useContext(TabContext);
   const tabPaneAnimated = animated.tabPane;
 
-  const activeIndex = tabs.findIndex(tab => tab.key === activeKey);
+  const activeIndex = tabs.findIndex((tab) => tab.key === activeKey);
 
   return (
     <div className={classNames(`${prefixCls}-content-holder`)}>
@@ -37,7 +35,7 @@ export default function TabPanelList({
             : null
         }
       >
-        {tabs.map(tab => {
+        {tabs.map((tab) => {
           return React.cloneElement(tab.node, {
             key: tab.key,
             prefixCls,
@@ -45,7 +43,6 @@ export default function TabPanelList({
             id,
             animated: tabPaneAnimated,
             active: tab.key === activeKey,
-            destroyInactiveTabPane,
           });
         })}
       </div>
diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index f04ec146..c33b734f 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -50,7 +50,6 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
   tabBarGutter?: number;
   tabBarStyle?: React.CSSProperties;
   tabPosition?: TabPosition;
-  destroyInactiveTabPane?: boolean;
 
   onChange?: (activeKey: string) => void;
   onTabClick?: (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;
@@ -81,7 +80,7 @@ function parseTabList(children: React.ReactNode): Tab[] {
 
       return null;
     })
-    .filter(tab => tab);
+    .filter((tab) => tab);
 }
 
 function Tabs(
@@ -105,7 +104,6 @@ function Tabs(
     locale,
     moreIcon,
     moreTransitionName,
-    destroyInactiveTabPane,
     renderTabBar,
     onChange,
     onTabClick,
@@ -149,18 +147,18 @@ function Tabs(
     defaultValue: defaultActiveKey,
   });
   const [activeIndex, setActiveIndex] = useState(() =>
-    tabs.findIndex(tab => tab.key === mergedActiveKey),
+    tabs.findIndex((tab) => tab.key === mergedActiveKey),
   );
 
   // Reset active key if not exist anymore
   useEffect(() => {
-    let newActiveIndex = tabs.findIndex(tab => tab.key === mergedActiveKey);
+    let newActiveIndex = tabs.findIndex((tab) => tab.key === mergedActiveKey);
     if (newActiveIndex === -1) {
       newActiveIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1));
       setMergedActiveKey(tabs[newActiveIndex]?.key);
     }
     setActiveIndex(newActiveIndex);
-  }, [tabs.map(tab => tab.key).join('_'), mergedActiveKey, activeIndex]);
+  }, [tabs.map((tab) => tab.key).join('_'), mergedActiveKey, activeIndex]);
 
   // ===================== Accessibility ====================
   const [mergedId, setMergedId] = useMergedState(null, {
@@ -238,11 +236,7 @@ function Tabs(
         {...restProps}
       >
         {tabNavBar}
-        <TabPanelList
-          destroyInactiveTabPane={destroyInactiveTabPane}
-          {...sharedProps}
-          animated={mergedAnimated}
-        />
+        <TabPanelList {...sharedProps} animated={mergedAnimated} />
       </div>
     </TabContext.Provider>
   );
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index f0917634..584326bd 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -158,8 +158,12 @@ describe('Tabs.Basic', () => {
     const wrapper = mount(
       getTabs({
         activeKey: 'light',
-        destroyInactiveTabPane: true,
-        children: [<TabPane key="light">Light</TabPane>, <TabPane key="bamboo">Bamboo</TabPane>],
+        children: [
+          <TabPane key="light" destroyInactiveTabPane={true}>
+            Light
+          </TabPane>,
+          <TabPane key="bamboo">Bamboo</TabPane>,
+        ],
       }),
     );
 
@@ -172,6 +176,9 @@ describe('Tabs.Basic', () => {
 
     wrapper.setProps({ activeKey: 'bamboo' });
     matchText('', 'Bamboo');
+
+    wrapper.setProps({ activeKey: 'light' });
+    matchText('Light', 'Bamboo');
   });
 
   describe('editable', () => {