diff --git a/web/app/components/base/pagination/type.ts b/web/app/components/base/pagination/type.ts
index 07580e1b19..c3744c06c2 100644
--- a/web/app/components/base/pagination/type.ts
+++ b/web/app/components/base/pagination/type.ts
@@ -31,7 +31,7 @@ type IPagination = IUsePagination & {
 }
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  as?: React.ReactElement
+  as?: React.ReactNode
   children?: string | React.ReactNode
   className?: string
   dataTestId?: string
@@ -39,9 +39,9 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 
 type PageButtonProps = ButtonProps & {
   /**
-   * Provide a custom ReactElement (e.g. Next/Link)
+   * Provide a custom ReactNode (e.g. Next/Link)
    */
-  as?: React.ReactElement
+  as?: React.ReactNode
   activeClassName?: string
   inactiveClassName?: string
   dataTestIdActive?: string
diff --git a/web/app/components/base/popover/index.tsx b/web/app/components/base/popover/index.tsx
index 13090abe0b..60ebb17f95 100644
--- a/web/app/components/base/popover/index.tsx
+++ b/web/app/components/base/popover/index.tsx
@@ -9,7 +9,7 @@ export type HtmlContentProps = {
 
 type IPopover = {
   className?: string
-  htmlContent: React.ReactElement<HtmlContentProps>
+  htmlContent: React.ReactNode<HtmlContentProps>
   popupClassName?: string
   trigger?: 'click' | 'hover'
   position?: 'bottom' | 'br' | 'bl'
@@ -99,7 +99,7 @@ export default function CustomPopover({
                         })
                       }
                     >
-                      {cloneElement(htmlContent as React.ReactElement<HtmlContentProps>, {
+                      {cloneElement(htmlContent as React.ReactNode<HtmlContentProps>, {
                         onClose: () => onMouseLeave(open),
                         ...(manualClose
                           ? {
diff --git a/web/app/components/base/radio/component/group/index.tsx b/web/app/components/base/radio/component/group/index.tsx
index c52ddc23a6..088aec729f 100644
--- a/web/app/components/base/radio/component/group/index.tsx
+++ b/web/app/components/base/radio/component/group/index.tsx
@@ -1,10 +1,10 @@
-import type { ReactElement } from 'react'
+import type { ReactNode } from 'react'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
 import cn from '@/utils/classnames'
 
 export type TRadioGroupProps = {
-  children?: ReactElement | ReactElement[]
+  children?: ReactNode | ReactNode[]
   value?: string | number
   className?: string
   onChange?: (value: any) => void
diff --git a/web/app/components/base/radio/component/radio/index.tsx b/web/app/components/base/radio/component/radio/index.tsx
index 3b08967033..2ecbf4d1b0 100644
--- a/web/app/components/base/radio/component/radio/index.tsx
+++ b/web/app/components/base/radio/component/radio/index.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react'
+import type { ReactNode } from 'react'
 import { useId } from 'react'
 import { useContext } from 'use-context-selector'
 import RadioGroupContext from '../../context'
@@ -8,7 +8,7 @@ import cn from '@/utils/classnames'
 export type IRadioProps = {
   className?: string
   labelClassName?: string
-  children?: string | ReactElement
+  children?: string | ReactNode
   checked?: boolean
   value?: string | number
   disabled?: boolean
diff --git a/web/app/components/browser-initor.tsx b/web/app/components/browser-initor.tsx
index 939ddd567d..5117d3490d 100644
--- a/web/app/components/browser-initor.tsx
+++ b/web/app/components/browser-initor.tsx
@@ -45,7 +45,7 @@ Object.defineProperty(globalThis, 'sessionStorage', {
 
 const BrowserInitor = ({
   children,
-}: { children: React.ReactElement }) => {
+}: { children: React.ReactNode }) => {
   return children
 }
 
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx
index 42d3820672..fb43ff31b1 100644
--- a/web/app/components/develop/code.tsx
+++ b/web/app/components/develop/code.tsx
@@ -24,7 +24,7 @@ const languageNames = {
 } as { [key: string]: string }
 
 type IChildrenProps = {
-  children: React.ReactElement
+  children: React.ReactNode
   [key: string]: any
 }
 
@@ -122,7 +122,7 @@ function CodePanelHeader({ tag, label }: { tag: string; label: string }) {
 }
 
 type ICodePanelProps = {
-  children: React.ReactElement
+  children: React.ReactNode
   tag?: string
   code?: string
   label?: string
@@ -182,7 +182,7 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
 }
 
 type ICodeGroupPanelsProps = {
-  children: React.ReactElement
+  children: React.ReactNode
   [key: string]: any
 }
 function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsProps) {
diff --git a/web/app/components/sentry-initor.tsx b/web/app/components/sentry-initor.tsx
index f0e9b7ea41..457a1cf7c7 100644
--- a/web/app/components/sentry-initor.tsx
+++ b/web/app/components/sentry-initor.tsx
@@ -7,7 +7,7 @@ const isDevelopment = process.env.NODE_ENV === 'development'
 
 const SentryInit = ({
   children,
-}: { children: React.ReactElement }) => {
+}: { children: React.ReactNode }) => {
   useEffect(() => {
     const SENTRY_DSN = document?.body?.getAttribute('data-public-sentry-dsn')
     if (!isDevelopment && SENTRY_DSN) {
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index cccd9be9e7..98b3878fb9 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -1,6 +1,6 @@
 import type {
   FC,
-  ReactElement,
+  ReactNode,
 } from 'react'
 import {
   cloneElement,
@@ -46,7 +46,7 @@ import BlockIcon from '@/app/components/workflow/block-icon'
 import Tooltip from '@/app/components/base/tooltip'
 
 type BaseNodeProps = {
-  children: ReactElement
+  children: ReactNode
 } & NodeProps
 
 const BaseNode: FC<BaseNodeProps> = ({
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index 4c839b0b7f..6f55e0d798 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@@ -1,6 +1,6 @@
 import type {
   FC,
-  ReactElement,
+  ReactNode,
 } from 'react'
 import {
   cloneElement,
@@ -48,7 +48,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { useStore } from '@/app/components/workflow/store'
 
 type BasePanelProps = {
-  children: ReactElement
+  children: ReactNode
 } & Node
 
 const BasePanel: FC<BasePanelProps> = ({