diff --git a/packages/react/src/ReactRenderer.tsx b/packages/react/src/ReactRenderer.tsx
index eae25e520b9..249571e266e 100644
--- a/packages/react/src/ReactRenderer.tsx
+++ b/packages/react/src/ReactRenderer.tsx
@@ -9,12 +9,21 @@ function isClassComponent(Component: any) {
   )
 }
 
+function isForwardRefComponent(Component: any) {
+  return !!(typeof Component === 'object' && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)')
+}
+
 export interface ReactRendererOptions {
   editor: Editor,
   props?: Record<string, any>,
   as?: string,
 }
 
+type ComponentType = React.Component | React.FunctionComponent | React.ForwardRefExoticComponent<{
+    items: any[];
+    command: any;
+} & React.RefAttributes<unknown>>
+
 export class ReactRenderer {
   id: string
 
@@ -30,7 +39,7 @@ export class ReactRenderer {
 
   ref: React.Component | null = null
 
-  constructor(component: React.Component | React.FunctionComponent, { editor, props = {}, as = 'div' }: ReactRendererOptions) {
+  constructor(component: ComponentType, { editor, props = {}, as = 'div' }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
     this.editor = editor
@@ -44,7 +53,7 @@ export class ReactRenderer {
     const Component = this.component
     const props = this.props
 
-    if (isClassComponent(Component)) {
+    if (isClassComponent(Component) || isForwardRefComponent(Component)) {
       props.ref = (ref: React.Component) => {
         this.ref = ref
       }