fix: move React flushSync to microtask (#3188)

To avoid seeing the `Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.` error, we need to move the `flushSync()` code that avoids automatic batching to a microtask to not fire a lifecycle event `setState()` during rendering.

Fixes warning introduced in #2985

packages/react/src/ReactRenderer.tsx

@@ -78,15 +78,17 @@ export class ReactRenderer<R = unknown, P = unknown> {
 
     this.reactElement = <Component {...props } />
 
-    flushSync(() => {
+    queueMicrotask(() => {
-      if (this.editor?.contentComponent) {
+      flushSync(() => {
-        this.editor.contentComponent.setState({
+        if (this.editor?.contentComponent) {
-          renderers: this.editor.contentComponent.state.renderers.set(
+          this.editor.contentComponent.setState({
-            this.id,
+            renderers: this.editor.contentComponent.state.renderers.set(
-            this,
+              this.id,
-          ),
+              this,
-        })
+            ),
-      }
+          })
+        }
+      })
     })
   }
 
@@ -100,16 +102,18 @@ export class ReactRenderer<R = unknown, P = unknown> {
   }
 
   destroy(): void {
-    flushSync(() => {
+    queueMicrotask(() => {
-      if (this.editor?.contentComponent) {
+      flushSync(() => {
-        const { renderers } = this.editor.contentComponent.state
+        if (this.editor?.contentComponent) {
+          const { renderers } = this.editor.contentComponent.state
 
-        renderers.delete(this.id)
+          renderers.delete(this.id)
 
-        this.editor.contentComponent.setState({
+          this.editor.contentComponent.setState({
-          renderers,
+            renderers,
-        })
+          })
-      }
+        }
+      })
     })
   }
 }