diff --git a/src/App.tsx b/src/App.tsx
index 15e2992..b9b973c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,29 @@
 import React from 'react';
 import Component, { renderFieldProps } from './lib';
+import { ProConfigProvider, BetaSchemaForm, ProFieldValueType, ProFormColumnsType } from '{{ UIPackageName }}';
 import './App.css';
-import { ProConfigProvider, Form } from '{{ UIPackageName }}';
 
-const valueType = Component.displayName.charAt(0).toLowerCase() + Component.displayName.slice(1)
+const valueType = (Component.displayName.charAt(0).toLowerCase() + Component.displayName.slice(1)) as ProFieldValueType;
+
+type Obj = {
+  test_valuetype: string;
+  test_comp: string;
+};
+
+const columns: ProFormColumnsType<Obj>[] = [
+  {
+    dataIndex: 'test_valuetype',
+    title: "ValueType",
+    valueType: valueType,
+  },
+  {
+    dataIndex: 'test_comp',
+    title: "Children",
+    renderFormItem: (schema, config, form, action) => {
+      return <Component />
+    },
+  }
+];
 
 const App: React.FC = () => {
   return (
@@ -13,12 +33,7 @@ const App: React.FC = () => {
           [valueType]: renderFieldProps,
         }}
       >
-        <Form>
-          <Form.Item label="ValueType" name="test_valuetype" valueType={valueType} />
-          <Form.Item label="Children" name="test_comp">
-            <Component />
-          </Form.Item>
-        </Form>
+        <BetaSchemaForm layoutType="Form" columns={columns} />
       </ProConfigProvider>
     </div>
   );