How to render React component with `useEffect` in `flushSync`?

I have this Codesandbox (press CMD+S to save it to see the alert):

import { createRoot } from "react-dom/client";
import React from "react";
import { flushSync } from "react-dom";

function App() {
  const [text, setText] = React.useState("Hello world!");
  React.useEffect(() => {
    setText("Async world!");
  }, []);
  return text;
}

const div = document.getElementById("root");
const root = createRoot(div);

flushSync(() => root.render(<App />));

alert(div.innerHTML);

It alerts Hello world!, when it should render Async world! in my opinion.

How do you get React to “render to string” a tree of nested elements which have many useEffect async calls, which themselves may wait a few seconds or do some clunky re-rendering before things finally settle down and are “fully finished rendering”?

Is there something like flush({ waitUntil: 'allUseEffectsAreRun' }, () => root.render(<App />), or generally how should I try and accomplish this?

I am trying to build an SVG editor, and the SVG parent component has a useEffect hook to calculate the viewBox properly. I then want to render the SVG and child SVG elements to a string, to copy/paste.