diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index f223924294..ccf3d98149 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -27,7 +27,7 @@ import {
   RELATION_PROVIDES_API,
 } from '@backstage/catalog-model';
 import { createApp } from '@backstage/app-defaults';
-import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
+import { FlatRoutes } from '@backstage/core-app-api';
 import {
   AlertDisplay,
   OAuthRequestDialog,
@@ -149,6 +149,9 @@ const app = createApp({
   },
 });
 
+const AppProvider = app.getProvider();
+const AppRouter = app.getRouter();
+
 const routes = (
   <FlatRoutes>
     <Route path="/" element={<Navigate to="catalog" />} />
@@ -279,12 +282,14 @@ const routes = (
   </FlatRoutes>
 );
 
-export default app.createRoot(
-  <>
+const App = () => (
+  <AppProvider>
     <AlertDisplay transientTimeoutMs={2500} />
     <OAuthRequestDialog />
     <AppRouter>
       <Root>{routes}</Root>
     </AppRouter>
-  </>,
+  </AppProvider>
 );
+
+export default App;