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,6 +78,7 @@ export class ReactRenderer<R = unknown, P = unknown> {
 
     this.reactElement = <Component {...props } />
 
+    queueMicrotask(() => {
       flushSync(() => {
         if (this.editor?.contentComponent) {
           this.editor.contentComponent.setState({
@@ -88,6 +89,7 @@ export class ReactRenderer<R = unknown, P = unknown> {
           })
         }
       })
+    })
   }
 
   updateProps(props: Record<string, any> = {}): void {
@@ -100,6 +102,7 @@ export class ReactRenderer<R = unknown, P = unknown> {
   }
 
   destroy(): void {
+    queueMicrotask(() => {
       flushSync(() => {
         if (this.editor?.contentComponent) {
           const { renderers } = this.editor.contentComponent.state
@@ -111,5 +114,6 @@ export class ReactRenderer<R = unknown, P = unknown> {
           })
         }
       })
+    })
   }
 }