fix(profiling): use state for canvas bounds (#37306)

static/app/components/profiling/flamegraph.tsx

@@ -5,7 +5,6 @@ import {
   useEffect,
   useLayoutEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 import {mat3, vec2} from 'gl-matrix';
@@ -57,7 +56,7 @@ interface FlamegraphProps {
 }
 
 function Flamegraph(props: FlamegraphProps): ReactElement {
-  const canvasBounds = useRef<Rect>(Rect.Empty());
+  const [canvasBounds, setCanvasBounds] = useState<Rect>(Rect.Empty());
   const devicePixelRatio = useDevicePixelRatio();
 
   const flamegraphTheme = useFlamegraphTheme();
@@ -216,7 +215,7 @@ function Flamegraph(props: FlamegraphProps): ReactElement {
       [flamegraphCanvasRef, flamegraphOverlayCanvasRef],
       () => {
         const bounds = flamegraphCanvasRef.getBoundingClientRect();
-        canvasBounds.current = new Rect(bounds.x, bounds.y, bounds.width, bounds.height);
+        setCanvasBounds(new Rect(bounds.x, bounds.y, bounds.width, bounds.height));
 
         flamegraphCanvas.initPhysicalSpace();
         flamegraphView.resizeConfigSpace(flamegraphCanvas);
@@ -329,7 +328,7 @@ function Flamegraph(props: FlamegraphProps): ReactElement {
           <ProfileDragDropImport onImport={props.onImport}>
             <FlamegraphZoomView
               flamegraphRenderer={flamegraphRenderer}
-              canvasBounds={canvasBounds.current}
+              canvasBounds={canvasBounds}
               canvasPoolManager={canvasPoolManager}
               flamegraph={flamegraph}
               flamegraphCanvas={flamegraphCanvas}