diff --git a/packages/react-router/__tests__/data-memory-router-test.tsx b/packages/react-router/__tests__/data-memory-router-test.tsx
index 1d47ae7400..f23d7e73bd 100644
--- a/packages/react-router/__tests__/data-memory-router-test.tsx
+++ b/packages/react-router/__tests__/data-memory-router-test.tsx
@@ -8,9 +8,8 @@ import {
   queryByText,
 } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import type { FormMethod, Router, RouterInit } from "@remix-run/router";
+import type { ErrorResponse, FormMethod } from "@remix-run/router";
 import { joinPaths } from "@remix-run/router";
-import type { RouteObject } from "react-router";
 import {
   Await,
   MemoryRouter,
@@ -35,39 +34,10 @@ import {
   UNSAFE_DataRouterContext as DataRouterContext,
 } from "react-router";
 
-let router: Router | null = null;
-
-describe("<DataMemoryRouter>", () => {
+describe("createMemoryRouter", () => {
   let consoleWarn: jest.SpyInstance;
   let consoleError: jest.SpyInstance;
 
-  // Abstraction to avoid re-writing all tests for the time being
-  function DataMemoryRouter({
-    basename,
-    children,
-    fallbackElement,
-    hydrationData,
-    initialEntries,
-    initialIndex,
-    routes,
-  }: {
-    basename?: RouterInit["basename"];
-    children?: React.ReactNode | React.ReactNode[];
-    fallbackElement?: React.ReactNode;
-    hydrationData?: RouterInit["hydrationData"];
-    initialEntries?: string[];
-    initialIndex?: number;
-    routes?: RouteObject[];
-  }) {
-    router = createMemoryRouter(routes || createRoutesFromElements(children), {
-      basename,
-      hydrationData,
-      initialEntries,
-      initialIndex,
-    });
-    return <RouterProvider router={router} fallbackElement={fallbackElement} />;
-  }
-
   beforeEach(() => {
     consoleWarn = jest.spyOn(console, "warn").mockImplementation(() => {});
     consoleError = jest.spyOn(console, "error").mockImplementation(() => {});
@@ -76,15 +46,13 @@ describe("<DataMemoryRouter>", () => {
   afterEach(() => {
     consoleWarn.mockRestore();
     consoleError.mockRestore();
-    router = null;
   });
 
   it("renders the first route that matches the URL (element)", () => {
-    let { container } = render(
-      <DataMemoryRouter initialEntries={["/"]} hydrationData={{}}>
-        <Route path="/" element={<h1>Home</h1>} />
-      </DataMemoryRouter>
+    let router = createMemoryRouter(
+      createRoutesFromElements(<Route path="/" element={<h1>Home</h1>} />)
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     expect(getHtml(container)).toMatchInlineSnapshot(`
       "<div>
@@ -96,11 +64,12 @@ describe("<DataMemoryRouter>", () => {
   });
 
   it("renders the first route that matches the URL (Component)", () => {
-    let { container } = render(
-      <DataMemoryRouter initialEntries={["/"]} hydrationData={{}}>
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" Component={() => <h1>Home</h1>} />
-      </DataMemoryRouter>
+      )
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     expect(getHtml(container)).toMatchInlineSnapshot(`
       "<div>
@@ -112,19 +81,13 @@ describe("<DataMemoryRouter>", () => {
   });
 
   it("supports a `routes` prop instead of <Route /> children", () => {
-    let routes = [
+    let router = createMemoryRouter([
       {
         path: "/",
         element: <h1>Home</h1>,
       },
-    ];
-    let { container } = render(
-      <DataMemoryRouter
-        initialEntries={["/"]}
-        hydrationData={{}}
-        routes={routes}
-      />
-    );
+    ]);
+    let { container } = render(<RouterProvider router={router} />);
 
     expect(getHtml(container)).toMatchInlineSnapshot(`
       "<div>
@@ -136,16 +99,17 @@ describe("<DataMemoryRouter>", () => {
   });
 
   it("renders the first route that matches the URL when wrapped in a root route", () => {
-    let { container } = render(
-      <DataMemoryRouter
-        initialEntries={["/my/base/path/thing"]}
-        hydrationData={{}}
-      >
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/my/base/path">
           <Route path="thing" element={<h1>Heyooo</h1>} />
         </Route>
-      </DataMemoryRouter>
+      ),
+      {
+        initialEntries: ["/my/base/path/thing"],
+      }
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     expect(getHtml(container)).toMatchInlineSnapshot(`
       "<div>
@@ -157,15 +121,16 @@ describe("<DataMemoryRouter>", () => {
   });
 
   it("supports a basename prop", () => {
-    let { container } = render(
-      <DataMemoryRouter
-        basename="/my/base/path"
-        initialEntries={["/my/base/path/thing"]}
-        hydrationData={{}}
-      >
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="thing" element={<h1>Heyooo</h1>} />
-      </DataMemoryRouter>
+      ),
+      {
+        basename: "/my/base/path",
+        initialEntries: ["/my/base/path/thing"],
+      }
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     expect(getHtml(container)).toMatchInlineSnapshot(`
       "<div>
@@ -177,17 +142,19 @@ describe("<DataMemoryRouter>", () => {
   });
 
   it("prepends basename to loader/action redirects", async () => {
-    let { container } = render(
-      <DataMemoryRouter
-        basename="/my/base/path"
-        initialEntries={["/my/base/path"]}
-      >
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Root />}>
           <Route path="thing" loader={() => redirect("/other")} />
           <Route path="other" element={<h1>Other</h1>} />
         </Route>
-      </DataMemoryRouter>
+      ),
+      {
+        basename: "/my/base/path",
+        initialEntries: ["/my/base/path"],
+      }
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     function Root() {
       return (
@@ -225,19 +192,21 @@ describe("<DataMemoryRouter>", () => {
   });
 
   it("supports relative routing in loader/action redirects", async () => {
-    let { container } = render(
-      <DataMemoryRouter
-        basename="/my/base/path"
-        initialEntries={["/my/base/path"]}
-      >
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Root />}>
           <Route path="parent" element={<Parent />}>
             <Route path="child" loader={() => redirect("../other")} />
             <Route path="other" element={<h2>Other</h2>} />
           </Route>
         </Route>
-      </DataMemoryRouter>
+      ),
+      {
+        basename: "/my/base/path",
+        initialEntries: ["/my/base/path"],
+      }
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     function Root() {
       return (
@@ -287,10 +256,15 @@ describe("<DataMemoryRouter>", () => {
   });
 
   it("renders with hydration data", async () => {
-    let { container } = render(
-      <DataMemoryRouter
-        initialEntries={["/child"]}
-        hydrationData={{
+    let router = createMemoryRouter(
+      createRoutesFromElements(
+        <Route path="/" element={<Comp />}>
+          <Route path="child" element={<Comp />} />
+        </Route>
+      ),
+      {
+        initialEntries: ["/child"],
+        hydrationData: {
           loaderData: {
             "0": "parent data",
             "0-0": "child data",
@@ -298,23 +272,20 @@ describe("<DataMemoryRouter>", () => {
           actionData: {
             "0-0": "child action",
           },
-        }}
-      >
-        <Route path="/" element={<Comp />}>
-          <Route path="child" element={<Comp />} />
-        </Route>
-      </DataMemoryRouter>
+        },
+      }
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     function Comp() {
-      let data = useLoaderData();
+      let data = useLoaderData() as { message: string };
       let actionData = useActionData();
       let navigation = useNavigation();
       return (
         <div>
-          {data}
-          {actionData}
-          {navigation.state}
+          <>{data}</>
+          <>{actionData}</>
+          <>{navigation.state}</>
           <Outlet />
         </div>
       );
@@ -338,16 +309,19 @@ describe("<DataMemoryRouter>", () => {
 
   it("renders fallbackElement while first data fetch happens", async () => {
     let fooDefer = createDeferred();
-    let { container } = render(
-      <DataMemoryRouter
-        fallbackElement={<FallbackElement />}
-        initialEntries={["/foo"]}
-      >
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Outlet />}>
           <Route path="foo" loader={() => fooDefer.promise} element={<Foo />} />
           <Route path="bar" element={<Bar />} />
         </Route>
-      </DataMemoryRouter>
+      ),
+      {
+        initialEntries: ["/foo"],
+      }
+    );
+    let { container } = render(
+      <RouterProvider router={router} fallbackElement={<FallbackElement />} />
     );
 
     function FallbackElement() {
@@ -355,7 +329,7 @@ describe("<DataMemoryRouter>", () => {
     }
 
     function Foo() {
-      let data = useLoaderData();
+      let data = useLoaderData() as { message: string };
       return <h1>Foo:{data?.message}</h1>;
     }
 
@@ -385,17 +359,21 @@ describe("<DataMemoryRouter>", () => {
 
   it("renders a null fallbackElement if none is provided", async () => {
     let fooDefer = createDeferred();
-    let { container } = render(
-      <DataMemoryRouter initialEntries={["/foo"]}>
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Outlet />}>
           <Route path="foo" loader={() => fooDefer.promise} element={<Foo />} />
           <Route path="bar" element={<Bar />} />
         </Route>
-      </DataMemoryRouter>
+      ),
+      {
+        initialEntries: ["/foo"],
+      }
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     function Foo() {
-      let data = useLoaderData();
+      let data = useLoaderData() as { message: string };
       return <h1>Foo:{data?.message}</h1>;
     }
 
@@ -419,16 +397,20 @@ describe("<DataMemoryRouter>", () => {
 
   it("does not render fallbackElement if no data fetch is required", async () => {
     let fooDefer = createDeferred();
-    let { container } = render(
-      <DataMemoryRouter
-        fallbackElement={<FallbackElement />}
-        initialEntries={["/bar"]}
-      >
+
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Outlet />}>
           <Route path="foo" loader={() => fooDefer.promise} element={<Foo />} />
           <Route path="bar" element={<Bar />} />
         </Route>
-      </DataMemoryRouter>
+      ),
+      {
+        initialEntries: ["/bar"],
+      }
+    );
+    let { container } = render(
+      <RouterProvider router={router} fallbackElement={<FallbackElement />} />
     );
 
     function FallbackElement() {
@@ -436,7 +418,7 @@ describe("<DataMemoryRouter>", () => {
     }
 
     function Foo() {
-      let data = useLoaderData();
+      let data = useLoaderData() as { message: string };
       return <h1>Foo:{data?.message}</h1>;
     }
 
@@ -455,15 +437,16 @@ describe("<DataMemoryRouter>", () => {
 
   it("renders fallbackElement within router contexts", async () => {
     let fooDefer = createDeferred();
-    let { container } = render(
-      <DataMemoryRouter
-        fallbackElement={<FallbackElement />}
-        initialEntries={["/foo"]}
-      >
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Outlet />}>
           <Route path="foo" loader={() => fooDefer.promise} element={<Foo />} />
         </Route>
-      </DataMemoryRouter>
+      ),
+      { initialEntries: ["/foo"] }
+    );
+    let { container } = render(
+      <RouterProvider router={router} fallbackElement={<FallbackElement />} />
     );
 
     function FallbackElement() {
@@ -476,7 +459,7 @@ describe("<DataMemoryRouter>", () => {
     }
 
     function Foo() {
-      let data = useLoaderData();
+      let data = useLoaderData() as { message: string };
       return <h1>Foo:{data?.message}</h1>;
     }
 
@@ -502,14 +485,16 @@ describe("<DataMemoryRouter>", () => {
   });
 
   it("handles link navigations", async () => {
-    render(
-      <DataMemoryRouter initialEntries={["/foo"]} hydrationData={{}}>
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Layout />}>
           <Route path="foo" element={<Foo />} />
           <Route path="bar" element={<Bar />} />
         </Route>
-      </DataMemoryRouter>
+      ),
+      { initialEntries: ["/foo"] }
     );
+    render(<RouterProvider router={router} />);
 
     function Layout() {
       return (
@@ -539,15 +524,16 @@ describe("<DataMemoryRouter>", () => {
 
   it("executes route loaders on navigation", async () => {
     let barDefer = createDeferred();
-
-    let { container } = render(
-      <DataMemoryRouter initialEntries={["/foo"]} hydrationData={{}}>
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Layout />}>
           <Route path="foo" element={<Foo />} />
           <Route path="bar" loader={() => barDefer.promise} element={<Bar />} />
         </Route>
-      </DataMemoryRouter>
+      ),
+      { initialEntries: ["/foo"] }
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     function Layout() {
       let navigation = useNavigation();
@@ -564,7 +550,7 @@ describe("<DataMemoryRouter>", () => {
       return <h1>Foo</h1>;
     }
     function Bar() {
-      let data = useLoaderData();
+      let data = useLoaderData() as { message: string };
       return <h1>{data?.message}</h1>;
     }
 
@@ -632,8 +618,8 @@ describe("<DataMemoryRouter>", () => {
     let formData = new FormData();
     formData.append("test", "value");
 
-    let { container } = render(
-      <DataMemoryRouter initialEntries={["/foo"]} hydrationData={{}}>
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Layout />}>
           <Route path="foo" element={<Foo />} />
           <Route
@@ -643,8 +629,10 @@ describe("<DataMemoryRouter>", () => {
             element={<Bar />}
           />
         </Route>
-      </DataMemoryRouter>
+      ),
+      { initialEntries: ["/foo"] }
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     function Layout() {
       let navigation = useNavigation();
@@ -663,12 +651,12 @@ describe("<DataMemoryRouter>", () => {
       return <h1>Foo</h1>;
     }
     function Bar() {
-      let data = useLoaderData();
+      let data = useLoaderData() as { message: string };
       let actionData = useActionData();
       return (
         <h1>
-          {data}
-          {actionData}
+          <>{data}</>
+          <>{actionData}</>
         </h1>
       );
     }
@@ -747,8 +735,8 @@ describe("<DataMemoryRouter>", () => {
   it("provides useMatches", async () => {
     let spy = jest.fn();
 
-    render(
-      <DataMemoryRouter initialEntries={["/"]} hydrationData={{}}>
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Layout />}>
           <Route
             path="foo"
@@ -762,8 +750,9 @@ describe("<DataMemoryRouter>", () => {
             handle={{ key: "value" }}
           />
         </Route>
-      </DataMemoryRouter>
+      )
     );
+    render(<RouterProvider router={router} />);
 
     function Layout() {
       spy("Layout", useMatches());
@@ -832,15 +821,8 @@ describe("<DataMemoryRouter>", () => {
   it("provides useRouteLoaderData", async () => {
     let spy = jest.fn();
 
-    let { container } = render(
-      <DataMemoryRouter
-        initialEntries={["/foo"]}
-        hydrationData={{
-          loaderData: {
-            foo: "FOO",
-          },
-        }}
-      >
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route id="layout" path="/" element={<Layout />}>
           <Route
             id="foo"
@@ -857,8 +839,17 @@ describe("<DataMemoryRouter>", () => {
             />
           </Route>
         </Route>
-      </DataMemoryRouter>
+      ),
+      {
+        initialEntries: ["/foo"],
+        hydrationData: {
+          loaderData: {
+            foo: "FOO",
+          },
+        },
+      }
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     function Layout() {
       spy({
@@ -920,16 +911,8 @@ describe("<DataMemoryRouter>", () => {
 
   it("reloads data using useRevalidate", async () => {
     let count = 1;
-
-    let { container } = render(
-      <DataMemoryRouter
-        initialEntries={["/foo"]}
-        hydrationData={{
-          loaderData: {
-            "0-0": "count=1",
-          },
-        }}
-      >
+    let router = createMemoryRouter(
+      createRoutesFromElements(
         <Route path="/" element={<Layout />}>
           <Route
             path="foo"
@@ -937,8 +920,17 @@ describe("<DataMemoryRouter>", () => {
             element={<Foo />}
           />
         </Route>
-      </DataMemoryRouter>
+      ),
+      {
+        initialEntries: ["/foo"],
+        hydrationData: {
+          loaderData: {
+            "0-0": "count=1",
+          },
+        },
+      }
     );
+    let { container } = render(<RouterProvider router={router} />);
 
     function Layout() {
       let navigation = useNavigation();
@@ -954,7 +946,7 @@ describe("<DataMemoryRouter>", () => {
     }
 
     function Foo() {
-      let data = useLoaderData();
+      let data = useLoaderData() as string;
       return <p>{data}</p>;
     }
 
@@ -1019,6 +1011,23 @@ describe("<DataMemoryRouter>", () => {
   });
 
   it("renders descendent routes inside a data router", () => {
+    let router = createMemoryRouter(
+      createRoutesFromElements(
+        <Route path="/deep">
+          <Route path="path/*" element={<Child />} />
+        </Route>
+      ),
+      {
+        initialEntries: ["/deep/path/to/descendant/routes"],
+        hydrationData: {
+          loaderData: {
+            "0-0": "count=1",
+          },
+        },
+      }
+    );
+    let { container } = render(<RouterProvider router={router} />);
+
     function GrandChild() {
       return (
         <Routes>
@@ -1040,17 +1049,6 @@ describe("<DataMemoryRouter>", () => {
       );
     }
 
-    let { container } = render(
-      <DataMemoryRouter
-        initialEntries={["/deep/path/to/descendant/routes"]}
-        hydrationData={{}}
-      >
-        <Route path="/deep">
-          <Route path="path/*" element={<Child />} />
-        </Route>
-      </DataMemoryRouter>
-    );
-
     expect(getHtml(container)).toMatchInlineSnapshot(`
       "<div>
         <h1>
@@ -1062,10 +1060,19 @@ describe("<DataMemoryRouter>", () => {
 
   describe("errors", () => {
     it("renders hydration errors on leaf elements using errorElement", async () => {
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/child"]}
-          hydrationData={{
+      let router = createMemoryRouter(
+        createRoutesFromElements(
+          <Route path="/" element={<Comp />}>
+            <Route
+              path="child"
+              element={<Comp />}
+              errorElement={<ErrorBoundary />}
+            />
+          </Route>
+        ),
+        {
+          initialEntries: ["/child"],
+          hydrationData: {
             loaderData: {
               "0": "parent data",
             },
@@ -1075,34 +1082,27 @@ describe("<DataMemoryRouter>", () => {
             errors: {
               "0-0": new Error("Kaboom 💥"),
             },
-          }}
-        >
-          <Route path="/" element={<Comp />}>
-            <Route
-              path="child"
-              element={<Comp />}
-              errorElement={<ErrorBoundary />}
-            />
-          </Route>
-        </DataMemoryRouter>
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Comp() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         let actionData = useActionData();
         let navigation = useNavigation();
         return (
           <div>
-            {data}
-            {actionData}
-            {navigation.state}
+            <>{data}</>
+            <>{actionData}</>
+            <>{navigation.state}</>
             <Outlet />
           </div>
         );
       }
 
       function ErrorBoundary() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>{error.message}</p>;
       }
 
@@ -1121,10 +1121,19 @@ describe("<DataMemoryRouter>", () => {
     });
 
     it("renders hydration errors on leaf elements using ErrorBoundary", async () => {
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/child"]}
-          hydrationData={{
+      let router = createMemoryRouter(
+        createRoutesFromElements(
+          <Route path="/" element={<Comp />}>
+            <Route
+              path="child"
+              element={<Comp />}
+              ErrorBoundary={() => <p>{(useRouteError() as Error).message}</p>}
+            />
+          </Route>
+        ),
+        {
+          initialEntries: ["/child"],
+          hydrationData: {
             loaderData: {
               "0": "parent data",
             },
@@ -1134,27 +1143,20 @@ describe("<DataMemoryRouter>", () => {
             errors: {
               "0-0": new Error("Kaboom 💥"),
             },
-          }}
-        >
-          <Route path="/" element={<Comp />}>
-            <Route
-              path="child"
-              element={<Comp />}
-              ErrorBoundary={() => <p>{useRouteError()?.message}</p>}
-            />
-          </Route>
-        </DataMemoryRouter>
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Comp() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         let actionData = useActionData();
         let navigation = useNavigation();
         return (
           <div>
-            {data}
-            {actionData}
-            {navigation.state}
+            <>{data}</>
+            <>{actionData}</>
+            <>{navigation.state}</>
             <Outlet />
           </div>
         );
@@ -1175,39 +1177,41 @@ describe("<DataMemoryRouter>", () => {
     });
 
     it("renders hydration errors on parent elements", async () => {
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/child"]}
-          hydrationData={{
+      let router = createMemoryRouter(
+        createRoutesFromElements(
+          <Route path="/" element={<Comp />} errorElement={<ErrorBoundary />}>
+            <Route path="child" element={<Comp />} />
+          </Route>
+        ),
+        {
+          initialEntries: ["/child"],
+          hydrationData: {
             loaderData: {},
             actionData: null,
             errors: {
               "0": new Error("Kaboom 💥"),
             },
-          }}
-        >
-          <Route path="/" element={<Comp />} errorElement={<ErrorBoundary />}>
-            <Route path="child" element={<Comp />} />
-          </Route>
-        </DataMemoryRouter>
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Comp() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         let actionData = useActionData();
         let navigation = useNavigation();
         return (
           <div>
-            {data}
-            {actionData}
-            {navigation.state}
+            <>{data}</>
+            <>{actionData}</>
+            <>{navigation.state}</>
             <Outlet />
           </div>
         );
       }
 
       function ErrorBoundary() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>{error.message}</p>;
       }
 
@@ -1224,17 +1228,8 @@ describe("<DataMemoryRouter>", () => {
       let fooDefer = createDeferred();
       let barDefer = createDeferred();
 
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/foo"]}
-          hydrationData={{
-            loaderData: {
-              "0-0": {
-                message: "hydrated from foo",
-              },
-            },
-          }}
-        >
+      let router = createMemoryRouter(
+        createRoutesFromElements(
           <Route path="/" element={<Layout />}>
             <Route
               path="foo"
@@ -1249,8 +1244,19 @@ describe("<DataMemoryRouter>", () => {
               errorElement={<BarError />}
             />
           </Route>
-        </DataMemoryRouter>
+        ),
+        {
+          initialEntries: ["/foo"],
+          hydrationData: {
+            loaderData: {
+              "0-0": {
+                message: "hydrated from foo",
+              },
+            },
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Layout() {
         let navigation = useNavigation();
@@ -1265,19 +1271,19 @@ describe("<DataMemoryRouter>", () => {
       }
 
       function Foo() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         return <h1>Foo:{data?.message}</h1>;
       }
       function FooError() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>Foo Error:{error.message}</p>;
       }
       function Bar() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         return <h1>Bar:{data?.message}</h1>;
       }
       function BarError() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>Bar Error:{error.message}</p>;
       }
 
@@ -1364,17 +1370,8 @@ describe("<DataMemoryRouter>", () => {
       let fooDefer = createDeferred();
       let barDefer = createDeferred();
 
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/foo"]}
-          hydrationData={{
-            loaderData: {
-              "0-0": {
-                message: "hydrated from foo",
-              },
-            },
-          }}
-        >
+      let router = createMemoryRouter(
+        createRoutesFromElements(
           <Route path="/" element={<Layout />}>
             <Route
               path="foo"
@@ -1389,8 +1386,19 @@ describe("<DataMemoryRouter>", () => {
               ErrorBoundary={BarError}
             />
           </Route>
-        </DataMemoryRouter>
+        ),
+        {
+          initialEntries: ["/foo"],
+          hydrationData: {
+            loaderData: {
+              "0-0": {
+                message: "hydrated from foo",
+              },
+            },
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Layout() {
         let navigation = useNavigation();
@@ -1405,19 +1413,19 @@ describe("<DataMemoryRouter>", () => {
       }
 
       function Foo() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         return <h1>Foo:{data?.message}</h1>;
       }
       function FooError() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>Foo Error:{error.message}</p>;
       }
       function Bar() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         return <h1>Bar:{data?.message}</h1>;
       }
       function BarError() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>Bar Error:{error.message}</p>;
       }
 
@@ -1504,17 +1512,8 @@ describe("<DataMemoryRouter>", () => {
       let fooDefer = createDeferred();
       let barDefer = createDeferred();
 
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/foo"]}
-          hydrationData={{
-            loaderData: {
-              "0-0": {
-                message: "hydrated from foo",
-              },
-            },
-          }}
-        >
+      let router = createMemoryRouter(
+        createRoutesFromElements(
           <Route path="/" element={<Layout />} errorElement={<LayoutError />}>
             <Route
               path="foo"
@@ -1528,8 +1527,19 @@ describe("<DataMemoryRouter>", () => {
               element={<Bar />}
             />
           </Route>
-        </DataMemoryRouter>
+        ),
+        {
+          initialEntries: ["/foo"],
+          hydrationData: {
+            loaderData: {
+              "0-0": {
+                message: "hydrated from foo",
+              },
+            },
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Layout() {
         let navigation = useNavigation();
@@ -1543,19 +1553,19 @@ describe("<DataMemoryRouter>", () => {
         );
       }
       function LayoutError() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>Layout Error:{error.message}</p>;
       }
       function Foo() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         return <h1>Foo:{data?.message}</h1>;
       }
       function FooError() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>Foo Error:{error.message}</p>;
       }
       function Bar() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         return <h1>Bar:{data?.message}</h1>;
       }
 
@@ -1597,42 +1607,46 @@ describe("<DataMemoryRouter>", () => {
     });
 
     it("renders 404 errors using path='/' error boundary", async () => {
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/foo"]}
-          hydrationData={{
+      let router = createMemoryRouter(
+        createRoutesFromElements(
+          <>
+            <Route
+              path="/thing"
+              element={<h1>Thing 1</h1>}
+              errorElement={<p>Not I!</p>}
+            />
+            <Route
+              path="/"
+              element={
+                <div>
+                  <h1>Hello</h1>
+                  <Outlet />
+                </div>
+              }
+              errorElement={<Boundary />}
+            />
+          </>
+        ),
+        {
+          initialEntries: ["/foo"],
+          hydrationData: {
             loaderData: {
               "0": {
                 message: "hydrated from foo",
               },
             },
-          }}
-        >
-          <Route
-            path="/thing"
-            element={<h1>Thing 1</h1>}
-            errorElement={<p>Not I!</p>}
-          />
-          <Route
-            path="/"
-            element={
-              <div>
-                <h1>Hello</h1>
-                <Outlet />
-              </div>
-            }
-            errorElement={<Boundary />}
-          />
-        </DataMemoryRouter>
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Boundary() {
-        let error = useRouteError();
+        let error = useRouteError() as ErrorResponse;
         return (
           <p>
             Error:
-            {error.status}
-            {error.statusText}
+            <>{error.status}</>
+            <>{error.statusText}</>
           </p>
         );
       }
@@ -1649,42 +1663,46 @@ describe("<DataMemoryRouter>", () => {
     });
 
     it("renders 404 errors using index error boundary", async () => {
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/foo"]}
-          hydrationData={{
+      let router = createMemoryRouter(
+        createRoutesFromElements(
+          <>
+            <Route
+              path="/thing"
+              element={<h1>Thing 1</h1>}
+              errorElement={<p>Not I!</p>}
+            />
+            <Route
+              index
+              element={
+                <div>
+                  <h1>Hello</h1>
+                  <Outlet />
+                </div>
+              }
+              errorElement={<Boundary />}
+            />
+          </>
+        ),
+        {
+          initialEntries: ["/foo"],
+          hydrationData: {
             loaderData: {
               "0": {
                 message: "hydrated from foo",
               },
             },
-          }}
-        >
-          <Route
-            path="/thing"
-            element={<h1>Thing 1</h1>}
-            errorElement={<p>Not I!</p>}
-          />
-          <Route
-            index
-            element={
-              <div>
-                <h1>Hello</h1>
-                <Outlet />
-              </div>
-            }
-            errorElement={<Boundary />}
-          />
-        </DataMemoryRouter>
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Boundary() {
-        let error = useRouteError();
+        let error = useRouteError() as ErrorResponse;
         return (
           <p>
             Error:
-            {error.status}
-            {error.statusText}
+            <>{error.status}</>
+            <>{error.statusText}</>
           </p>
         );
       }
@@ -1701,29 +1719,33 @@ describe("<DataMemoryRouter>", () => {
     });
 
     it("renders 404 errors using fallback boundary if no root layout route exists", async () => {
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/foo"]}
-          hydrationData={{
+      let router = createMemoryRouter(
+        createRoutesFromElements(
+          <>
+            <Route
+              path="/thing1"
+              element={<h1>Thing 1</h1>}
+              errorElement={<p>Not I!</p>}
+            />
+            <Route
+              path="/thing2"
+              element={<h1>Thing 2</h1>}
+              errorElement={<p>Not I!</p>}
+            />
+          </>
+        ),
+        {
+          initialEntries: ["/foo"],
+          hydrationData: {
             loaderData: {
               "0": {
                 message: "hydrated from foo",
               },
             },
-          }}
-        >
-          <Route
-            path="/thing1"
-            element={<h1>Thing 1</h1>}
-            errorElement={<p>Not I!</p>}
-          />
-          <Route
-            path="/thing2"
-            element={<h1>Thing 2</h1>}
-            errorElement={<p>Not I!</p>}
-          />
-        </DataMemoryRouter>
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       expect(getHtml(container)).toMatchInlineSnapshot(`
         "<div>
@@ -1760,17 +1782,8 @@ describe("<DataMemoryRouter>", () => {
       let fooDefer = createDeferred();
       let barDefer = createDeferred();
 
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/foo"]}
-          hydrationData={{
-            loaderData: {
-              "0-0": {
-                message: "hydrated from foo",
-              },
-            },
-          }}
-        >
+      let router = createMemoryRouter(
+        createRoutesFromElements(
           <Route path="/" element={<Layout />}>
             <Route
               path="foo"
@@ -1783,8 +1796,19 @@ describe("<DataMemoryRouter>", () => {
               element={<Bar />}
             />
           </Route>
-        </DataMemoryRouter>
+        ),
+        {
+          initialEntries: ["/foo"],
+          hydrationData: {
+            loaderData: {
+              "0-0": {
+                message: "hydrated from foo",
+              },
+            },
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Layout() {
         let navigation = useNavigation();
@@ -1798,11 +1822,11 @@ describe("<DataMemoryRouter>", () => {
         );
       }
       function Foo() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         return <h1>Foo:{data?.message}</h1>;
       }
       function Bar() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         return <h1>Bar:{data?.message}</h1>;
       }
 
@@ -1894,9 +1918,8 @@ describe("<DataMemoryRouter>", () => {
         },
       ];
 
-      let { container } = render(
-        <DataMemoryRouter routes={routes} initialEntries={["/foo"]} />
-      );
+      let router = createMemoryRouter(routes, { initialEntries: ["/foo"] });
+      let { container } = render(<RouterProvider router={router} />);
 
       function Layout() {
         let navigation = useNavigation();
@@ -1909,11 +1932,11 @@ describe("<DataMemoryRouter>", () => {
         );
       }
       function Bar() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { message: string };
         return <h1>Bar:{data?.message}</h1>;
       }
       function BarError() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>Bar Error:{error.message}</p>;
       }
 
@@ -1959,14 +1982,8 @@ describe("<DataMemoryRouter>", () => {
     });
 
     it("handles render errors in parent errorElement", async () => {
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/child"]}
-          hydrationData={{
-            loaderData: {},
-            actionData: null,
-          }}
-        >
+      let router = createMemoryRouter(
+        createRoutesFromElements(
           <Route
             path="/"
             element={
@@ -1979,15 +1996,17 @@ describe("<DataMemoryRouter>", () => {
           >
             <Route path="child" element={<ChildComp />} />
           </Route>
-        </DataMemoryRouter>
+        ),
+        { initialEntries: ["/child"] }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function ChildComp(): React.ReactElement {
         throw new Error("Kaboom!");
       }
 
       function ErrorBoundary() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>{error.message}</p>;
       }
 
@@ -2001,14 +2020,8 @@ describe("<DataMemoryRouter>", () => {
     });
 
     it("handles render errors in child errorElement", async () => {
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/child"]}
-          hydrationData={{
-            loaderData: {},
-            actionData: null,
-          }}
-        >
+      let router = createMemoryRouter(
+        createRoutesFromElements(
           <Route
             path="/"
             element={
@@ -2025,15 +2038,17 @@ describe("<DataMemoryRouter>", () => {
               errorElement={<ErrorBoundary />}
             />
           </Route>
-        </DataMemoryRouter>
+        ),
+        { initialEntries: ["/child"] }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function ChildComp(): React.ReactElement {
         throw new Error("Kaboom!");
       }
 
       function ErrorBoundary() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>{error.message}</p>;
       }
 
@@ -2052,14 +2067,8 @@ describe("<DataMemoryRouter>", () => {
     });
 
     it("handles render errors in default errorElement", async () => {
-      let { container } = render(
-        <DataMemoryRouter
-          initialEntries={["/child"]}
-          hydrationData={{
-            loaderData: {},
-            actionData: null,
-          }}
-        >
+      let router = createMemoryRouter(
+        createRoutesFromElements(
           <Route
             path="/"
             element={
@@ -2071,8 +2080,10 @@ describe("<DataMemoryRouter>", () => {
           >
             <Route path="child" element={<ChildComp />} />
           </Route>
-        </DataMemoryRouter>
+        ),
+        { initialEntries: ["/child"] }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function ChildComp(): React.ReactElement {
         let error = new Error("Kaboom!");
@@ -2178,7 +2189,7 @@ describe("<DataMemoryRouter>", () => {
       }
 
       function ErrorBoundary() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>{error.message}</p>;
       }
 
@@ -2318,8 +2329,8 @@ describe("<DataMemoryRouter>", () => {
     it("does not allow loaderData usage in self-caught error boundaries", async () => {
       let errorSpy = jest.spyOn(console, "error");
 
-      let { container } = render(
-        <DataMemoryRouter>
+      let router = createMemoryRouter(
+        createRoutesFromElements(
           <Route path="/" element={<Layout />}>
             <Route
               path="foo"
@@ -2328,8 +2339,9 @@ describe("<DataMemoryRouter>", () => {
               errorElement={<FooError />}
             />
           </Route>
-        </DataMemoryRouter>
+        )
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Layout() {
         let navigation = useNavigation();
@@ -2343,8 +2355,8 @@ describe("<DataMemoryRouter>", () => {
       }
 
       function FooError() {
-        let error = useRouteError();
-        let data = useLoaderData();
+        let error = useRouteError() as Error;
+        let data = useLoaderData() as { message: string };
         return (
           <>
             <p>
@@ -2404,14 +2416,8 @@ describe("<DataMemoryRouter>", () => {
     it("does not allow useLoaderData usage in bubbled error boundaries", async () => {
       let errorSpy = jest.spyOn(console, "error");
 
-      let { container } = render(
-        <DataMemoryRouter
-          hydrationData={{
-            loaderData: {
-              "0": "ROOT",
-            },
-          }}
-        >
+      let router = createMemoryRouter(
+        createRoutesFromElements(
           <Route
             path="/"
             element={<Layout />}
@@ -2424,8 +2430,16 @@ describe("<DataMemoryRouter>", () => {
               element={<h1>Foo</h1>}
             />
           </Route>
-        </DataMemoryRouter>
+        ),
+        {
+          hydrationData: {
+            loaderData: {
+              "0": "ROOT",
+            },
+          },
+        }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Layout() {
         let navigation = useNavigation();
@@ -2438,8 +2452,8 @@ describe("<DataMemoryRouter>", () => {
         );
       }
       function LayoutError() {
-        let data = useLoaderData();
-        let error = useRouteError();
+        let data = useLoaderData() as { message: string };
+        let error = useRouteError() as Error;
         return (
           <>
             <p>
@@ -2499,8 +2513,9 @@ describe("<DataMemoryRouter>", () => {
       let awaitRenderCount = 0;
       let barDefer = createDeferred();
       let bazDefer = createDeferred();
-      let { container } = render(
-        <DataMemoryRouter initialEntries={["/foo"]} hydrationData={{}}>
+
+      let router = createMemoryRouter(
+        createRoutesFromElements(
           <Route path="/" element={<Layout />}>
             <Route path="foo" element={<h1>Foo</h1>} />
             <Route
@@ -2515,8 +2530,10 @@ describe("<DataMemoryRouter>", () => {
               element={<h1>Baz</h1>}
             />
           </Route>
-        </DataMemoryRouter>
+        ),
+        { initialEntries: ["/foo"] }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       function Layout() {
         let navigation = useNavigation();
@@ -2533,7 +2550,7 @@ describe("<DataMemoryRouter>", () => {
       }
 
       function Bar() {
-        let data = useLoaderData();
+        let data = useLoaderData() as { critical: string };
         return (
           <>
             <p>{data.critical}</p>
@@ -2559,12 +2576,13 @@ describe("<DataMemoryRouter>", () => {
       }
 
       function RouteError() {
-        let error = useRouteError();
+        let error = useRouteError() as Error;
         return <p>Route Error:{error.message}</p>;
       }
 
       function LazyFallback() {
         return triggerFallbackError ? (
+          // @ts-expect-error
           <p>{oops.i.did.it}</p>
         ) : (
           <p>Loading...</p>
@@ -2572,8 +2590,9 @@ describe("<DataMemoryRouter>", () => {
       }
 
       function LazyData() {
-        let data = useAsyncValue();
+        let data = useAsyncValue() as string;
         return triggerRenderError ? (
+          // @ts-expect-error
           <p>{oops.i.did.it.again}</p>
         ) : (
           <p>{data}</p>
@@ -2581,12 +2600,12 @@ describe("<DataMemoryRouter>", () => {
       }
 
       function LazyError() {
-        let data = useAsyncError();
+        let data = useAsyncError() as Error;
         return <p>Await Error:{data.message}</p>;
       }
 
       return {
-        container: container.querySelector("#content"),
+        container: container.querySelector("#content") as HTMLElement,
         barDefer,
         bazDefer,
         getAwaitRenderCount() {
@@ -3128,28 +3147,37 @@ describe("<DataMemoryRouter>", () => {
 
     it("should permit direct access to resolved values", async () => {
       let barDefer = createDeferred();
-      let { container } = render(
-        <DataMemoryRouter initialEntries={["/foo"]} hydrationData={{}}>
-          <Route
-            path="foo"
-            element={
-              <>
-                <h1>Foo</h1>
-                <MemoryNavigate to="/bar">Link to bar</MemoryNavigate>
-              </>
-            }
-          />
-          <Route path="bar" loader={() => barDefer.promise} element={<Bar />} />
-        </DataMemoryRouter>
+
+      let router = createMemoryRouter(
+        createRoutesFromElements(
+          <>
+            <Route
+              path="foo"
+              element={
+                <>
+                  <h1>Foo</h1>
+                  <MemoryNavigate to="/bar">Link to bar</MemoryNavigate>
+                </>
+              }
+            />
+            <Route
+              path="bar"
+              loader={() => barDefer.promise}
+              element={<Bar />}
+            />
+          </>
+        ),
+        { initialEntries: ["/foo"] }
       );
+      let { container } = render(<RouterProvider router={router} />);
 
       let count = 0;
       function Bar() {
-        let { bar } = useLoaderData();
+        let { bar } = useLoaderData() as { bar: Promise<string> };
 
         React.useEffect(() => {
           bar.then((data) => {
-            container.querySelector("#content").innerHTML =
+            container.querySelector("#content")!.innerHTML =
               data + " " + ++count;
           });
         }, [bar]);
@@ -3225,8 +3253,8 @@ describe("<DataMemoryRouter>", () => {
       );
 
       function ErrorElement() {
-        let error = useAsyncError() as string;
-        return <p>Error:{error}</p>;
+        let error = useAsyncError() as Error;
+        return <p>Error:{error.message}</p>;
       }
 
       expect(getHtml(container)).toMatchInlineSnapshot(`
@@ -3237,7 +3265,7 @@ describe("<DataMemoryRouter>", () => {
         </div>"
       `);
 
-      await dfd.reject("REJECTED");
+      await dfd.reject(new Error("REJECTED"));
       await waitFor(() => screen.getByText("Error:REJECTED"));
       expect(getHtml(container)).toMatchInlineSnapshot(`
         "<div>