diff --git a/packages/react/src/components/Field.tsx b/packages/react/src/components/Field.tsx
index c64f2083526..c3a5e922e66 100644
--- a/packages/react/src/components/Field.tsx
+++ b/packages/react/src/components/Field.tsx
@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useField, useForm } from '../hooks'
-import { useAttach } from '../hooks/useAttach'
 import { ReactiveField } from './ReactiveField'
 import { FieldContext } from '../shared'
 import { JSXComponent, IFieldProps } from '../types'
@@ -10,9 +9,13 @@ export const Field = <D extends JSXComponent, C extends JSXComponent>(
 ) => {
   const form = useForm()
   const parent = useField()
-  const field = useAttach(
-    form.createField({ basePath: parent?.address, ...props })
-  )
+  const field = form.createField({ basePath: parent?.address, ...props })
+  useEffect(() => {
+    field?.onMount()
+    return () => {
+      field?.onUnmount()
+    }
+  }, [field])
   return (
     <FieldContext.Provider value={field}>
       <ReactiveField field={field}>{props.children}</ReactiveField>