diff --git a/packages/component-library/package.json b/packages/component-library/package.json
index 9b3f1ceda6..07f4ce5847 100644
--- a/packages/component-library/package.json
+++ b/packages/component-library/package.json
@@ -47,8 +47,8 @@
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
     "@types/react": "^19.2.5",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "vitest": "^4.0.16"
   },
   "peerDependencies": {
diff --git a/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-1-chromium-linux.png b/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-1-chromium-linux.png
index 859d8ef3cb..65c002cbff 100644
Binary files a/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-1-chromium-linux.png and b/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-2-chromium-linux.png b/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-2-chromium-linux.png
index 2291358b78..0fa42dd360 100644
Binary files a/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-2-chromium-linux.png and b/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-3-chromium-linux.png b/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-3-chromium-linux.png
index 8f56516c71..3aeadb2006 100644
Binary files a/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-3-chromium-linux.png and b/packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-1-chromium-linux.png
index d6c059b72d..ebcbc8a7c2 100644
Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png
index ec84778d2a..709ad751e1 100644
Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png
index 595f0c7576..079d44edce 100644
Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png
index f1541a0860..d2a5770057 100644
Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png differ
diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
index c9b9e0a043..2a92afb99c 100644
--- a/packages/desktop-client/package.json
+++ b/packages/desktop-client/package.json
@@ -41,7 +41,6 @@
     "@types/promise-retry": "^1.1.6",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
-    "@types/react-grid-layout": "^1",
     "@types/react-modal": "^3.16.3",
     "@uiw/react-codemirror": "^4.25.4",
     "@use-gesture/react": "^10.3.1",
@@ -66,14 +65,14 @@
     "promise-retry": "^2.0.1",
     "prop-types": "^15.8.1",
     "re-resizable": "^6.11.2",
-    "react": "19.2.0",
+    "react": "19.2.3",
     "react-aria": "^3.45.0",
     "react-aria-components": "^1.14.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "19.2.0",
+    "react-dom": "19.2.3",
     "react-error-boundary": "^6.0.3",
-    "react-grid-layout": "^1.5.3",
+    "react-grid-layout": "^2.2.2",
     "react-hotkeys-hook": "^5.2.1",
     "react-i18next": "^16.5.1",
     "react-markdown": "^10.1.0",
@@ -83,7 +82,7 @@
     "react-simple-pull-to-refresh": "^1.3.4",
     "react-spring": "10.0.0",
     "react-swipeable": "^7.0.2",
-    "react-virtualized-auto-sizer": "^1.0.26",
+    "react-virtualized-auto-sizer": "^2.0.2",
     "recharts": "^3.4.1",
     "rehype-external-links": "^3.0.0",
     "remark-gfm": "^4.0.1",
diff --git a/packages/desktop-client/src/components/accounts/BalanceHistoryGraph.tsx b/packages/desktop-client/src/components/accounts/BalanceHistoryGraph.tsx
index 97d4ade7ef..bd63716162 100644
--- a/packages/desktop-client/src/components/accounts/BalanceHistoryGraph.tsx
+++ b/packages/desktop-client/src/components/accounts/BalanceHistoryGraph.tsx
@@ -5,7 +5,7 @@ import React, {
   type CSSProperties,
   type Ref,
 } from 'react';
-import AutoSizer from 'react-virtualized-auto-sizer';
+import { AutoSizer } from 'react-virtualized-auto-sizer';
 
 import { SpaceBetween } from '@actual-app/components/space-between';
 import { styles } from '@actual-app/components/styles';
@@ -208,8 +208,12 @@ export function BalanceHistoryGraph({
 
   return (
     <View ref={ref} style={{ margin: 10, ...style }}>
-      <AutoSizer>
-        {({ width, height }: { width: number; height: number }) => {
+      <AutoSizer
+        renderProp={({ width = 0, height = 0 }) => {
+          if (width === 0 || height === 0) {
+            return null;
+          }
+
           if (loading) {
             return (
               <div style={{ width, height }}>
@@ -326,7 +330,7 @@ export function BalanceHistoryGraph({
             </View>
           );
         }}
-      </AutoSizer>
+      />
     </View>
   );
 }
diff --git a/packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx b/packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx
index 416ad3acef..f31e7e560a 100644
--- a/packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx
+++ b/packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import React, { useEffect, type ComponentProps } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import AutoSizer from 'react-virtualized-auto-sizer';
+import { AutoSizer } from 'react-virtualized-auto-sizer';
 
 import { View } from '@actual-app/components/view';
 
@@ -162,11 +162,15 @@ type AutoSizingBudgetTableProps = Omit<
 
 export const AutoSizingBudgetTable = (props: AutoSizingBudgetTableProps) => {
   return (
-    <AutoSizer>
-      {({ width, height }) => (
-        <DynamicBudgetTable width={width} height={height} {...props} />
-      )}
-    </AutoSizer>
+    <AutoSizer
+      renderProp={({ width = 0, height = 0 }) => {
+        if (width === 0 || height === 0) {
+          return null;
+        }
+
+        return <DynamicBudgetTable width={width} height={height} {...props} />;
+      }}
+    />
   );
 };
 
diff --git a/packages/desktop-client/src/components/reports/Container.tsx b/packages/desktop-client/src/components/reports/Container.tsx
index c35bf87dae..01aebc9f03 100644
--- a/packages/desktop-client/src/components/reports/Container.tsx
+++ b/packages/desktop-client/src/components/reports/Container.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, type CSSProperties, type ReactNode } from 'react';
-import AutoSizer from 'react-virtualized-auto-sizer';
+import { AutoSizer } from 'react-virtualized-auto-sizer';
 
 import { View } from '@actual-app/components/view';
 
@@ -19,13 +19,19 @@ export function Container({ style, children }: ContainerProps) {
       style={{ height: 300, position: 'relative', flexShrink: 0, ...style }}
     >
       <div ref={portalHost} />
-      <AutoSizer>
-        {({ width, height }: { width: number; height: number }) => (
-          <div style={{ width, height }}>
-            {children(width, height, portalHost.current)}
-          </div>
-        )}
-      </AutoSizer>
+      <AutoSizer
+        renderProp={({ width = 0, height = 0 }) => {
+          if (width === 0 || height === 0) {
+            return null;
+          }
+
+          return (
+            <div style={{ width, height }}>
+              {children(width, height, portalHost.current)}
+            </div>
+          );
+        }}
+      />
     </View>
   );
 }
diff --git a/packages/desktop-client/src/components/reports/Overview.tsx b/packages/desktop-client/src/components/reports/Overview.tsx
index 0209bd8aff..b9b8e0f62e 100644
--- a/packages/desktop-client/src/components/reports/Overview.tsx
+++ b/packages/desktop-client/src/components/reports/Overview.tsx
@@ -1,6 +1,6 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Dialog, DialogTrigger } from 'react-aria-components';
-import { Responsive, WidthProvider, type Layout } from 'react-grid-layout';
+import ReactGridLayout, { type Layout } from 'react-grid-layout';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Trans, useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router';
@@ -11,7 +11,6 @@ import { SvgDotsHorizontalTriple } from '@actual-app/components/icons/v1';
 import { Menu } from '@actual-app/components/menu';
 import { Popover } from '@actual-app/components/popover';
 import { theme } from '@actual-app/components/theme';
-import { breakpoints } from '@actual-app/components/tokens';
 import { View } from '@actual-app/components/view';
 
 import { send } from 'loot-core/platform/client/fetch';
@@ -48,6 +47,7 @@ import {
 import { useFeatureFlag } from '@desktop-client/hooks/useFeatureFlag';
 import { useNavigate } from '@desktop-client/hooks/useNavigate';
 import { useReports } from '@desktop-client/hooks/useReports';
+import { useResizeObserver } from '@desktop-client/hooks/useResizeObserver';
 import { useSyncedPref } from '@desktop-client/hooks/useSyncedPref';
 import { useUndo } from '@desktop-client/hooks/useUndo';
 import {
@@ -56,8 +56,6 @@ import {
 } from '@desktop-client/notifications/notificationsSlice';
 import { useDispatch } from '@desktop-client/redux';
 
-const ResponsiveGridLayout = WidthProvider(Responsive);
-
 function isCustomReportWidget(widget: Widget): widget is CustomReportWidget {
   return widget.type === 'custom-report';
 }
@@ -77,9 +75,10 @@ export function Overview({ dashboard }: OverviewProps) {
 
   const [isImporting, setIsImporting] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
-  const [currentBreakpoint, setCurrentBreakpoint] = useState<
-    'mobile' | 'desktop'
-  >('desktop');
+  const { isNarrowWidth } = useResponsive();
+  const currentBreakpoint: 'mobile' | 'desktop' = isNarrowWidth
+    ? 'mobile'
+    : 'desktop';
 
   const { data: customReports, isLoading: isCustomReportsLoading } =
     useReports();
@@ -96,12 +95,18 @@ export function Overview({ dashboard }: OverviewProps) {
 
   const isLoading = isCustomReportsLoading || isWidgetsLoading;
 
-  const { isNarrowWidth } = useResponsive();
   const navigate = useNavigate();
 
   const location = useLocation();
   sessionStorage.setItem('url', location.pathname);
 
+  const [containerWidth, setContainerWidth] = useState(0);
+  const handleResize = useCallback((contentRect: DOMRectReadOnly) => {
+    setContainerWidth(Math.floor(contentRect.width));
+  }, []);
+  const containerRef = useResizeObserver<HTMLDivElement>(handleResize);
+  const isMounted = containerWidth > 0;
+
   const mobileLayout = useMemo(() => {
     if (!widgets || widgets.length === 0) {
       return [];
@@ -124,7 +129,6 @@ export function Overview({ dashboard }: OverviewProps) {
       currentY += widget.height;
 
       return {
-        ...widget,
         i: widget.id,
         x: 0,
         y: itemY, // Calculate correct y co-ordinate to prevent react-grid-layout's auto-compacting behaviour
@@ -138,16 +142,27 @@ export function Overview({ dashboard }: OverviewProps) {
     if (!widgets) return [];
     return widgets.map(widget => ({
       i: widget.id,
+      x: widget.x,
+      y: widget.y,
       w: widget.width,
       h: widget.height,
       minW:
         isCustomReportWidget(widget) || widget.type === 'markdown-card' ? 2 : 3,
       minH:
         isCustomReportWidget(widget) || widget.type === 'markdown-card' ? 1 : 2,
-      ...widget,
     }));
   }, [widgets]);
 
+  const currentLayout = useMemo(
+    () => (currentBreakpoint === 'desktop' ? desktopLayout : mobileLayout),
+    [currentBreakpoint, desktopLayout, mobileLayout],
+  );
+
+  const widgetMap = useMemo(
+    () => new Map((widgets ?? []).map(widget => [widget.id, widget])),
+    [widgets],
+  );
+
   const closeNotifications = () => {
     dispatch(removeNotification({ id: 'import' }));
   };
@@ -184,10 +199,6 @@ export function Overview({ dashboard }: OverviewProps) {
     );
   };
 
-  const onBreakpointChange = (breakpoint: 'mobile' | 'desktop') => {
-    setCurrentBreakpoint(breakpoint);
-  };
-
   const onResetDashboard = async () => {
     setIsImporting(true);
     await send('dashboard-reset', dashboard.id);
@@ -200,7 +211,7 @@ export function Overview({ dashboard }: OverviewProps) {
     );
   };
 
-  const onLayoutChange = (newLayout: Layout[]) => {
+  const onLayoutChange = (newLayout: Layout) => {
     if (!isEditing) {
       return;
     }
@@ -235,8 +246,6 @@ export function Overview({ dashboard }: OverviewProps) {
   };
 
   const onExport = () => {
-    const widgetMap = new Map(widgets.map(item => [item.id, item]));
-
     const data = {
       version: 1,
       widgets: desktopLayout.map(item => {
@@ -639,127 +648,143 @@ export function Overview({ dashboard }: OverviewProps) {
         <div>
           <View
             data-testid="reports-overview"
+            innerRef={containerRef}
             style={{ userSelect: 'none', paddingBottom: MOBILE_NAV_HEIGHT }}
           >
-            <ResponsiveGridLayout
-              breakpoints={{ desktop: breakpoints.medium, mobile: 1 }}
-              layouts={{ desktop: desktopLayout, mobile: mobileLayout }}
-              onLayoutChange={
-                currentBreakpoint === 'desktop' ? onLayoutChange : undefined
-              }
-              onBreakpointChange={onBreakpointChange}
-              cols={{ desktop: 12, mobile: 1 }}
-              rowHeight={100}
-              draggableCancel={`.${NON_DRAGGABLE_AREA_CLASS_NAME}`}
-              isDraggable={currentBreakpoint === 'desktop' && isEditing}
-              isResizable={currentBreakpoint === 'desktop' && isEditing}
-            >
-              {desktopLayout.map(item => (
-                <div key={item.i}>
-                  {item.type === 'net-worth-card' ? (
-                    <NetWorthCard
-                      widgetId={item.i}
-                      isEditing={isEditing}
-                      accounts={accounts}
-                      meta={item.meta}
-                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                      onRemove={() => onRemoveWidget(item.i)}
-                      onCopy={targetDashboardId =>
-                        onCopyWidget(item.i, targetDashboardId)
-                      }
-                    />
-                  ) : item.type === 'crossover-card' &&
-                    crossoverReportEnabled ? (
-                    <CrossoverCard
-                      widgetId={item.i}
-                      isEditing={isEditing}
-                      accounts={accounts}
-                      meta={item.meta}
-                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                      onRemove={() => onRemoveWidget(item.i)}
-                      onCopy={targetDashboardId =>
-                        onCopyWidget(item.i, targetDashboardId)
-                      }
-                    />
-                  ) : item.type === 'cash-flow-card' ? (
-                    <CashFlowCard
-                      widgetId={item.i}
-                      isEditing={isEditing}
-                      meta={item.meta}
-                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                      onRemove={() => onRemoveWidget(item.i)}
-                      onCopy={targetDashboardId =>
-                        onCopyWidget(item.i, targetDashboardId)
-                      }
-                    />
-                  ) : item.type === 'spending-card' ? (
-                    <SpendingCard
-                      widgetId={item.i}
-                      isEditing={isEditing}
-                      meta={item.meta}
-                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                      onRemove={() => onRemoveWidget(item.i)}
-                      onCopy={targetDashboardId =>
-                        onCopyWidget(item.i, targetDashboardId)
-                      }
-                    />
-                  ) : item.type === 'markdown-card' ? (
-                    <MarkdownCard
-                      isEditing={isEditing}
-                      meta={item.meta}
-                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                      onRemove={() => onRemoveWidget(item.i)}
-                      onCopy={targetDashboardId =>
-                        onCopyWidget(item.i, targetDashboardId)
-                      }
-                    />
-                  ) : item.type === 'custom-report' ? (
-                    <CustomReportListCards
-                      isEditing={isEditing}
-                      report={customReportMap.get(item.meta.id)}
-                      onRemove={() => onRemoveWidget(item.i)}
-                      onCopy={targetDashboardId =>
-                        onCopyWidget(item.i, targetDashboardId)
-                      }
-                    />
-                  ) : item.type === 'summary-card' ? (
-                    <SummaryCard
-                      widgetId={item.i}
-                      isEditing={isEditing}
-                      meta={item.meta}
-                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                      onRemove={() => onRemoveWidget(item.i)}
-                      onCopy={targetDashboardId =>
-                        onCopyWidget(item.i, targetDashboardId)
-                      }
-                    />
-                  ) : item.type === 'calendar-card' ? (
-                    <CalendarCard
-                      widgetId={item.i}
-                      isEditing={isEditing}
-                      meta={item.meta}
-                      firstDayOfWeekIdx={firstDayOfWeekIdx}
-                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                      onRemove={() => onRemoveWidget(item.i)}
-                      onCopy={targetDashboardId =>
-                        onCopyWidget(item.i, targetDashboardId)
-                      }
-                    />
-                  ) : item.type === 'formula-card' && formulaMode ? (
-                    <FormulaCard
-                      widgetId={item.i}
-                      isEditing={isEditing}
-                      meta={item.meta}
-                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                      onRemove={() => onRemoveWidget(item.i)}
-                      onCopy={targetDashboardId =>
-                        onCopyWidget(item.i, targetDashboardId)
-                      }
-                    />
-                  ) : null}
-                </div>
-              ))}
-            </ResponsiveGridLayout>
+            {isMounted && (
+              <ReactGridLayout
+                width={containerWidth}
+                layout={currentLayout}
+                gridConfig={{
+                  cols: currentBreakpoint === 'desktop' ? 12 : 1,
+                  rowHeight: 100,
+                }}
+                dragConfig={{
+                  enabled: currentBreakpoint === 'desktop' && isEditing,
+                  cancel: `.${NON_DRAGGABLE_AREA_CLASS_NAME}`,
+                }}
+                resizeConfig={{
+                  enabled: currentBreakpoint === 'desktop' && isEditing,
+                }}
+                onLayoutChange={
+                  currentBreakpoint === 'desktop' ? onLayoutChange : undefined
+                }
+              >
+                {currentLayout.map(item => {
+                  const widget = widgetMap.get(item.i);
+
+                  if (!widget) {
+                    return null;
+                  }
+
+                  return (
+                    <div key={item.i}>
+                      {widget.type === 'net-worth-card' ? (
+                        <NetWorthCard
+                          widgetId={item.i}
+                          isEditing={isEditing}
+                          accounts={accounts}
+                          meta={widget.meta}
+                          onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                          onRemove={() => onRemoveWidget(item.i)}
+                          onCopy={targetDashboardId =>
+                            onCopyWidget(item.i, targetDashboardId)
+                          }
+                        />
+                      ) : widget.type === 'crossover-card' &&
+                        crossoverReportEnabled ? (
+                        <CrossoverCard
+                          widgetId={item.i}
+                          isEditing={isEditing}
+                          accounts={accounts}
+                          meta={widget.meta}
+                          onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                          onRemove={() => onRemoveWidget(item.i)}
+                          onCopy={targetDashboardId =>
+                            onCopyWidget(item.i, targetDashboardId)
+                          }
+                        />
+                      ) : widget.type === 'cash-flow-card' ? (
+                        <CashFlowCard
+                          widgetId={item.i}
+                          isEditing={isEditing}
+                          meta={widget.meta}
+                          onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                          onRemove={() => onRemoveWidget(item.i)}
+                          onCopy={targetDashboardId =>
+                            onCopyWidget(item.i, targetDashboardId)
+                          }
+                        />
+                      ) : widget.type === 'spending-card' ? (
+                        <SpendingCard
+                          widgetId={item.i}
+                          isEditing={isEditing}
+                          meta={widget.meta}
+                          onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                          onRemove={() => onRemoveWidget(item.i)}
+                          onCopy={targetDashboardId =>
+                            onCopyWidget(item.i, targetDashboardId)
+                          }
+                        />
+                      ) : widget.type === 'markdown-card' ? (
+                        <MarkdownCard
+                          isEditing={isEditing}
+                          meta={widget.meta}
+                          onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                          onRemove={() => onRemoveWidget(item.i)}
+                          onCopy={targetDashboardId =>
+                            onCopyWidget(item.i, targetDashboardId)
+                          }
+                        />
+                      ) : widget.type === 'custom-report' ? (
+                        <CustomReportListCards
+                          isEditing={isEditing}
+                          report={customReportMap.get(widget.meta.id)}
+                          onRemove={() => onRemoveWidget(item.i)}
+                          onCopy={targetDashboardId =>
+                            onCopyWidget(item.i, targetDashboardId)
+                          }
+                        />
+                      ) : widget.type === 'summary-card' ? (
+                        <SummaryCard
+                          widgetId={item.i}
+                          isEditing={isEditing}
+                          meta={widget.meta}
+                          onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                          onRemove={() => onRemoveWidget(item.i)}
+                          onCopy={targetDashboardId =>
+                            onCopyWidget(item.i, targetDashboardId)
+                          }
+                        />
+                      ) : widget.type === 'calendar-card' ? (
+                        <CalendarCard
+                          widgetId={item.i}
+                          isEditing={isEditing}
+                          meta={widget.meta}
+                          firstDayOfWeekIdx={firstDayOfWeekIdx}
+                          onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                          onRemove={() => onRemoveWidget(item.i)}
+                          onCopy={targetDashboardId =>
+                            onCopyWidget(item.i, targetDashboardId)
+                          }
+                        />
+                      ) : widget.type === 'formula-card' && formulaMode ? (
+                        <FormulaCard
+                          widgetId={item.i}
+                          isEditing={isEditing}
+                          meta={widget.meta}
+                          onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                          onRemove={() => onRemoveWidget(item.i)}
+                          onCopy={targetDashboardId =>
+                            onCopyWidget(item.i, targetDashboardId)
+                          }
+                        />
+                      ) : null}
+                    </div>
+                  );
+                })}
+              </ReactGridLayout>
+            )}
           </View>
         </div>
       )}
diff --git a/packages/desktop-client/src/components/settings/ThemeInstaller.tsx b/packages/desktop-client/src/components/settings/ThemeInstaller.tsx
index 409de31fed..09c2aff205 100644
--- a/packages/desktop-client/src/components/settings/ThemeInstaller.tsx
+++ b/packages/desktop-client/src/components/settings/ThemeInstaller.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { TextArea } from 'react-aria-components';
 import { Trans, useTranslation } from 'react-i18next';
-import AutoSizer from 'react-virtualized-auto-sizer';
+import { AutoSizer } from 'react-virtualized-auto-sizer';
 
 import { Button } from '@actual-app/components/button';
 import { AnimatedLoading } from '@actual-app/components/icons/AnimatedLoading';
@@ -237,8 +237,8 @@ export function ThemeInstaller({
               />
             </View>
           ) : (
-            <AutoSizer>
-              {({ width, height }) => {
+            <AutoSizer
+              renderProp={({ width = 0, height = 0 }) => {
                 if (width === 0 || height === 0) {
                   return null;
                 }
@@ -390,7 +390,7 @@ export function ThemeInstaller({
                   />
                 );
               }}
-            </AutoSizer>
+            />
           )}
         </View>
       )}
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index 09e7123c6a..99a3f5c357 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -17,7 +17,7 @@ import React, {
   type RefObject,
   type UIEvent,
 } from 'react';
-import AutoSizer from 'react-virtualized-auto-sizer';
+import { AutoSizer } from 'react-virtualized-auto-sizer';
 
 import { Button } from '@actual-app/components/button';
 import { AnimatedLoading } from '@actual-app/components/icons/AnimatedLoading';
@@ -1177,8 +1177,8 @@ export const Table = forwardRef(
           {isEmpty ? (
             getEmptyContent(renderEmpty)
           ) : (
-            <AutoSizer>
-              {({ width, height }) => {
+            <AutoSizer
+              renderProp={({ width = 0, height = 0 }) => {
                 if (width === 0 || height === 0) {
                   return null;
                 }
@@ -1213,7 +1213,7 @@ export const Table = forwardRef(
                   </AvoidRefocusScrollProvider>
                 );
               }}
-            </AutoSizer>
+            />
           )}
         </View>
       </View>
diff --git a/packages/desktop-client/src/setupTests.js b/packages/desktop-client/src/setupTests.js
index 35c47e4fa3..66a9618100 100644
--- a/packages/desktop-client/src/setupTests.js
+++ b/packages/desktop-client/src/setupTests.js
@@ -8,11 +8,17 @@ installPolyfills();
 global.IS_TESTING = true;
 global.Actual = {};
 
-vi.mock('react-virtualized-auto-sizer', () => ({
-  default: props => {
-    return props.children({ height: 1000, width: 600 });
-  },
-}));
+vi.mock('react-virtualized-auto-sizer', () => {
+  const AutoSizer = props => {
+    const render = props.renderProp ?? props.children;
+    return render ? render({ height: 1000, width: 600 }) : null;
+  };
+
+  return {
+    AutoSizer,
+    default: AutoSizer,
+  };
+});
 
 global.Date.now = () => 123456789;
 
diff --git a/upcoming-release-notes/6717.md b/upcoming-release-notes/6717.md
new file mode 100644
index 0000000000..cb4ad6e280
--- /dev/null
+++ b/upcoming-release-notes/6717.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [matt-fidd]
+---
+
+Upgrade various React dependencies
diff --git a/yarn.lock b/yarn.lock
index ef073835c8..2ae3113210 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -49,9 +49,9 @@ __metadata:
     "@emotion/css": "npm:^11.13.5"
     "@svgr/cli": "npm:^8.1.0"
     "@types/react": "npm:^19.2.5"
-    react: "npm:19.2.0"
+    react: "npm:19.2.3"
     react-aria-components: "npm:^1.14.0"
-    react-dom: "npm:19.2.0"
+    react-dom: "npm:19.2.3"
     usehooks-ts: "npm:^3.1.1"
     vitest: "npm:^4.0.16"
   peerDependencies:
@@ -157,7 +157,6 @@ __metadata:
     "@types/promise-retry": "npm:^1.1.6"
     "@types/react": "npm:^19.2.5"
     "@types/react-dom": "npm:^19.2.3"
-    "@types/react-grid-layout": "npm:^1"
     "@types/react-modal": "npm:^3.16.3"
     "@uiw/react-codemirror": "npm:^4.25.4"
     "@use-gesture/react": "npm:^10.3.1"
@@ -182,14 +181,14 @@ __metadata:
     promise-retry: "npm:^2.0.1"
     prop-types: "npm:^15.8.1"
     re-resizable: "npm:^6.11.2"
-    react: "npm:19.2.0"
+    react: "npm:19.2.3"
     react-aria: "npm:^3.45.0"
     react-aria-components: "npm:^1.14.0"
     react-dnd: "npm:^16.0.1"
     react-dnd-html5-backend: "npm:^16.0.1"
-    react-dom: "npm:19.2.0"
+    react-dom: "npm:19.2.3"
     react-error-boundary: "npm:^6.0.3"
-    react-grid-layout: "npm:^1.5.3"
+    react-grid-layout: "npm:^2.2.2"
     react-hotkeys-hook: "npm:^5.2.1"
     react-i18next: "npm:^16.5.1"
     react-markdown: "npm:^10.1.0"
@@ -199,7 +198,7 @@ __metadata:
     react-simple-pull-to-refresh: "npm:^1.3.4"
     react-spring: "npm:10.0.0"
     react-swipeable: "npm:^7.0.2"
-    react-virtualized-auto-sizer: "npm:^1.0.26"
+    react-virtualized-auto-sizer: "npm:^2.0.2"
     recharts: "npm:^3.4.1"
     rehype-external-links: "npm:^3.0.0"
     remark-gfm: "npm:^4.0.1"
@@ -9138,15 +9137,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-grid-layout@npm:^1":
-  version: 1.3.5
-  resolution: "@types/react-grid-layout@npm:1.3.5"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10/21599054dfa977ed8445b1ab3198a842531cb36bd620564c3f8a469688cbea051149eb644a99b2f8f6d02f8d9909a6145668f385781b5647601e9663de216946
-  languageName: node
-  linkType: hard
-
 "@types/react-modal@npm:^3.16.3":
   version: 3.16.3
   resolution: "@types/react-modal@npm:3.16.3"
@@ -22960,18 +22950,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:19.2.0":
-  version: 19.2.0
-  resolution: "react-dom@npm:19.2.0"
-  dependencies:
-    scheduler: "npm:^0.27.0"
-  peerDependencies:
-    react: ^19.2.0
-  checksum: 10/3dbba071b9b1e7a19eae55f05c100f6b44f88c0aee72397d719ae338248ca66ed5028e6964c1c14870cc3e1abcecc91b22baba6dc2072f819dea81a9fd72f2fd
-  languageName: node
-  linkType: hard
-
-"react-dom@npm:^19.2.3":
+"react-dom@npm:19.2.3, react-dom@npm:^19.2.3":
   version: 19.2.3
   resolution: "react-dom@npm:19.2.3"
   dependencies:
@@ -23011,9 +22990,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-grid-layout@npm:^1.5.3":
-  version: 1.5.3
-  resolution: "react-grid-layout@npm:1.5.3"
+"react-grid-layout@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "react-grid-layout@npm:2.2.2"
   dependencies:
     clsx: "npm:^2.1.1"
     fast-equals: "npm:^4.0.3"
@@ -23024,7 +23003,7 @@ __metadata:
   peerDependencies:
     react: ">= 16.3.0"
     react-dom: ">= 16.3.0"
-  checksum: 10/a534a33f2a15e075458ba307324c8c39a24a63576ef4f719273a927db7b228ee3fd795dc8f3f4f8d1db16167ccd76f003736abb022615b7b5b71aa1e5e68885e
+  checksum: 10/bfaa2d821b6bbe08732c1f841af23ddec982d4aafa33412fc6fd1c1eee6d60103a92a9f73bd995cc283c673650861271ee0fb36de06f3458469759395c012531
   languageName: node
   linkType: hard
 
@@ -23405,24 +23384,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-virtualized-auto-sizer@npm:^1.0.26":
-  version: 1.0.26
-  resolution: "react-virtualized-auto-sizer@npm:1.0.26"
+"react-virtualized-auto-sizer@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "react-virtualized-auto-sizer@npm:2.0.2"
   peerDependencies:
-    react: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0
-    react-dom: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10/8f8127369fb3ae1a49987a1e7d2d136f379b71d1b031a4c169389274946eca0248e3fb9130aa8a7ebe82f4ca8aaab58c37252398f8f6220a6eafaa78b8464b6b
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  checksum: 10/ae8e442573c01ad357a25f30f0e838bd56016cefce3995b5505417de3b06e2dd666350616ab9d5d0d2dc7fccab2878845dc59d611252122a37a7ec153a922bfa
   languageName: node
   linkType: hard
 
-"react@npm:19.2.0":
-  version: 19.2.0
-  resolution: "react@npm:19.2.0"
-  checksum: 10/e13bcdb8e994c3cfa922743cb75ca8deb60531bf02f584d2d8dab940a8132ce8a2e6ef16f8ed7f372b4072e7a7eeff589b2812dabbedfa73e6e46201dac8a9d0
-  languageName: node
-  linkType: hard
-
-"react@npm:^19.2.3":
+"react@npm:19.2.3, react@npm:^19.2.3":
   version: 19.2.3
   resolution: "react@npm:19.2.3"
   checksum: 10/d16b7f35c0d35a56f63d9d1693819762e4abc479c57dd6310298920bed3820fcec7e17a99d44983416d8f5049143ea45b8005d3ab8324bae8973224400502b08