[Bug]: flushSync was called from inside a lifecycle method. 
### What happened?

# The `flushSync `error

I was playing with the [examples](https://tldraw.dev/examples/ui/image-component) in tldraw.dev for my new project and have this error

## What should happen?

No error what so ever in the browser console

## The Bug/Error

There is an error in the browser console: `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`

**It only happen when I try to mount `<TldrawImage />` component**

I trace it to a file in: `node_module/@tldraw/editor/dist-esm/lib/exports/exportToSvg.mjs`

![image](https://github.com/user-attachments/assets/aaa8b7f5-3748-4254-b98f-68a396d2c27d)

## My Attempts & Notes:

It will only produce this error in `next dev` 

I tried to build to production and this error don't occur 

I tried this in incognito tabs and same error occur on chrome & firefox

## My solution:

I consult a weird guy name "Chat-gpt" on the internet and he gave he the holy answer "setTimeout"

I just put `setTimeout ` & `flushSync error` its gone 

```
 try {
    setTimeout(() => {
      flushSync(() => {
       root.render(result.jsx);
     }, 0);
 })
```

I have no idea how it works , some explanation & help will be nice!



### How can we reproduce the bug?

# How to reproduce the error?

1. Create Nextjs project
2. install tl draw package
3. use my [component](#My Component)
4. Press the button `✓ Save drawing` to change the state `isEditing`

## Create nextjs project

1. `npx create-next-app@latest`

- [How to set up a Next.js project](https://nextjs.org/docs/app/getting-started/installation)

## tl-draw

1. `npm install tldraw` <br> Make sure you do this in the same path as your `package.json`

## My package.json

```json
{
  "name": "learn-tldraw",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^15.0.3", 
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "tldraw": "^3.5.1"
  },
  "devDependencies": {
    "@types/node": "^20.0.0",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "eslint": "^8.0.0",
    "eslint-config-next": "^15.0.3",
    "postcss": "^8.0.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.0.0"
  },
  "peerDependencies": {
    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
    "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
 }
}
```

I use `npm install --force`

## The tldraw example

- [Tldraw image component](https://tldraw.dev/examples/ui/image-component)

### My Component:

```tsx
"use client"
//  imports ...
function TlDraw() {
  const [isEditing, setIsEditing] = useState<boolean>(true);
  const [editor, setEditor] = useState<TLEditor | undefined>();
  const [snapshot, setSnapshot] = useState<StoreSnapshot<TLRecord>>(snap as TLStoreSnapshot);

  const onClickHandler = () => {
    if (isEditing) {
      if (editor) {
        setSnapshot(getSnapshot(editor.store).document);
        setIsEditing(false);
      }
    } else {
      setIsEditing(true);
    }
  };

  return (
    <div className="flex flex-col">
      <button onClick={onClickHandler}>
        {isEditing ? '✓ Save drawing' : '✎ Edit drawing'}
      </button>

      <div className="relative w-[100vw] h-[50vh] z-0">
        {isEditing ? (
          <Tldraw
            snapshot={snapshot}
            className="absolute"
            persistenceKey="example"
            onMount={(editor: TLEditor) => {
              setEditor(editor);
              editor.updateInstanceState({ isReadonly: false });
            }}
            inferDarkMode
          />
        ) : (
          <TldrawImage snapshot={snapshot} />
        )}
      </div>
    </div>
  );
}
```

Make sure you put this component into the `page.tsx` to see it




### What browsers are you seeing the problem on?

Firefox, Chrome

### Where did this happen?

The developer package

### Contact Details

_No response_

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct