allow children and prevent rerender issue

src/app/page.tsx

@@ -3,6 +3,7 @@
 import { LiveImageShapeUtil } from "@/components/live-image";
 import * as fal from "@fal-ai/serverless-client";
 import { Editor, Tldraw } from "@tldraw/tldraw";
+import { useCallback } from "react";
 
 fal.config({
   requestMiddleware: fal.withProxy({
@@ -13,7 +14,7 @@ fal.config({
 const shapeUtils = [LiveImageShapeUtil];
 
 export default function Home() {
-  const onEditorMount = (editor: Editor) => {
+  const onEditorMount = useCallback((editor: Editor) => {
     // If there isn't a live image shape, create one
     const liveImage = editor.getCurrentPageShapes().find((shape) => {
       return shape.type === "live-image";
@@ -28,7 +29,7 @@ export default function Home() {
       x: 120,
       y: 180,
     });
-  };
+  }, []);
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between">

src/components/live-image.tsx

@@ -5,6 +5,7 @@ import {
   ShapeUtil,
   TLBaseShape,
   TLEventMapHandler,
+  TLShape,
   useEditor,
 } from "@tldraw/tldraw";
 
@@ -96,7 +97,7 @@ export function LiveImage() {
         setImage(result.images[0].url);
       }
     }, 16),
-    [],
+    []
   );
 
   useEffect(() => {
@@ -155,6 +156,13 @@ type LiveImageShape = TLBaseShape<"live-image", { w: number; h: number }>;
 export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
   static override type = "live-image" as const;
 
+  override canReceiveNewChildrenOfType = (
+    shape: LiveImageShape,
+    type: TLShape["type"]
+  ) => {
+    return true;
+  };
+
   getDefaultProps(): LiveImageShape["props"] {
     return {
       w: 1060,