diff --git a/packages/react/src/components/ReactiveField.tsx b/packages/react/src/components/ReactiveField.tsx
index 3b5d986293b..95d70ecc74a 100644
--- a/packages/react/src/components/ReactiveField.tsx
+++ b/packages/react/src/components/ReactiveField.tsx
@@ -24,6 +24,9 @@ const mergeChildren = (
   )
 }
 
+const isValidComponent = (target: any) =>
+  target && (typeof target === 'object' || typeof target === 'function')
+
 const renderChildren = (
   children: RenderPropsChildren<GeneralField>,
   field?: GeneralField,
@@ -42,15 +45,19 @@ const ReactiveInternal: React.FC<IReactiveFieldProps> = (props) => {
   )
   if (field.display !== 'visible') return null
 
+  const getComponent = (target: any) => {
+    return isValidComponent(target)
+      ? target
+      : FormPath.getIn(components, target) ?? target
+  }
+
   const renderDecorator = (children: React.ReactNode) => {
     if (!field.decoratorType) {
       return <Fragment>{children}</Fragment>
     }
-    const finalComponent =
-      FormPath.getIn(components, field.decoratorType) ?? field.decoratorType
 
     return React.createElement(
-      finalComponent,
+      getComponent(field.decoratorType),
       toJS(field.decoratorProps),
       children
     )
@@ -83,10 +90,8 @@ const ReactiveInternal: React.FC<IReactiveFieldProps> = (props) => {
     const readOnly = !isVoidField(field)
       ? field.pattern === 'readOnly'
       : undefined
-    const finalComponent =
-      FormPath.getIn(components, field.componentType) ?? field.componentType
     return React.createElement(
-      finalComponent,
+      getComponent(field.componentType),
       {
         disabled,
         readOnly,