diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 23adac0b8e45..6426df8ec537 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -6833,6 +6833,25 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
       </div>
     </div>
   </div>
+  <div
+    class="ant-form-item ant-form-item-hidden"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-form-item"
   >
@@ -6928,7 +6947,11 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
 </form>
 `;
 
-exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = `
+[
+  "Warning: [antd: Form.Item] \`name\` is only used for validate React element. If you are using Form.Item as layout display, please remove \`name\` instead.",
+]
+`;
 
 exports[`renders components/form/demo/form-in-modal.tsx extend context correctly 1`] = `
 <div>
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
index 76849810c1f1..ca2c8593097b 100644
--- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -4025,6 +4025,25 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-form-item ant-form-item-hidden"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-form-item"
   >
diff --git a/components/form/demo/form-context.tsx b/components/form/demo/form-context.tsx
index 2b689925eadc..284cda9537e6 100644
--- a/components/form/demo/form-context.tsx
+++ b/components/form/demo/form-context.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { SmileOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Button, Form, Input, InputNumber, Modal, Typography } from 'antd';
+import { Avatar, Button, Form, Input, InputNumber, Modal, Space, Typography } from 'antd';
 import type { FormInstance } from 'antd/es/form';
 
 const layout = {
@@ -93,6 +93,10 @@ const App: React.FC = () => {
         <Form.Item name="group" label="Group Name" rules={[{ required: true }]}>
           <Input />
         </Form.Item>
+
+        {/* Create a hidden field to make Form instance record this */}
+        <Form.Item name="users" hidden />
+
         <Form.Item
           label="User List"
           shouldUpdate={(prevValues, curValues) => prevValues.users !== curValues.users}
@@ -103,8 +107,10 @@ const App: React.FC = () => {
               <ul>
                 {users.map((user) => (
                   <li key={user.name} className="user">
-                    <Avatar icon={<UserOutlined />} />
-                    {user.name} - {user.age}
+                    <Space>
+                      <Avatar icon={<UserOutlined />} />
+                      {`${user.name} - ${user.age}`}
+                    </Space>
                   </li>
                 ))}
               </ul>