diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx
index 77eabf85e720..5b0a04c1dd1b 100644
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@@ -22,13 +22,13 @@ const GlobalDemoStyles: React.FC = () => {
         .code-box {
           position: relative;
           display: inline-block;
-          /* width: calc(100% - ${token.lineWidth * 2}px); */
-          width: 100%;
+          width: calc(100% - ${token.lineWidth * 2}px);
           margin: 0 0 ${token.margin}px;
           background-color: ${token.colorBgContainer};
-          border: 1px solid ${token.colorSplit};
+          border: ${token.lineWidth}px ${token.lineType} ${token.colorSplit};
           border-radius: ${token.borderRadiusLG}px;
           transition: all ${token.motionDurationMid};
+          box-sizing: content-box;
 
           &.code-box-simplify {
             border-radius: 0;
diff --git a/components/descriptions/Row.tsx b/components/descriptions/Row.tsx
index c8103ca64a8f..593df00b5225 100644
--- a/components/descriptions/Row.tsx
+++ b/components/descriptions/Row.tsx
@@ -42,10 +42,12 @@ function renderCells(
       },
       index,
     ) => {
+      const mergedKey = key ?? index;
+
       if (typeof component === 'string') {
         return (
           <Cell
-            key={`${type}-${key || index}`}
+            key={`${type}-${mergedKey}`}
             className={className}
             style={style}
             classNames={classNames}
@@ -91,7 +93,7 @@ function renderCells(
       };
       return [
         <Cell
-          key={`label-${key || index}`}
+          key={`label-${mergedKey}`}
           className={className}
           style={style}
           classNames={classNames}
@@ -105,7 +107,7 @@ function renderCells(
           type="label"
         />,
         <Cell
-          key={`content-${key || index}`}
+          key={`content-${mergedKey}`}
           className={className}
           style={style}
           classNames={classNames}
diff --git a/components/descriptions/__tests__/index.test.tsx b/components/descriptions/__tests__/index.test.tsx
index f24b21c924e2..0a1e9424c18c 100644
--- a/components/descriptions/__tests__/index.test.tsx
+++ b/components/descriptions/__tests__/index.test.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import MockDate from 'mockdate';
 
 import Descriptions from '..';
+import { matchScreen } from '../../_util/responsiveObserver';
 import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
-import { render } from '../../../tests/utils';
+import { fireEvent, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
-import { matchScreen } from '../../_util/responsiveObserver';
 import DEFAULT_COLUMN_MAP from '../constant';
 
 describe('Descriptions', () => {
@@ -284,6 +284,29 @@ describe('Descriptions', () => {
     expect(jest.spyOn(document, 'createElement')).not.toHaveBeenCalled();
   });
 
+  it('should preserve item state after reordering when key is 0', () => {
+    const items = [
+      {
+        key: 0,
+        label: 'Zero',
+        children: <input aria-label="Zero value" defaultValue="zero" />,
+      },
+      {
+        key: 2,
+        label: 'Two',
+        children: <input aria-label="Two value" defaultValue="two" />,
+      },
+    ];
+    const { getByLabelText, rerender } = render(<Descriptions column={2} items={items} />);
+    const input = getByLabelText('Zero value');
+
+    fireEvent.change(input, { target: { value: 'edited' } });
+    rerender(<Descriptions column={2} items={[...items].reverse()} />);
+
+    expect(getByLabelText('Zero value')).toBe(input);
+    expect(getByLabelText('Zero value')).toHaveValue('edited');
+  });
+
   // https://github.com/ant-design/ant-design/issues/19887
   it('should work with React Fragment', () => {
     if (!React.Fragment) {