Why do we need to wrap the BrowserRouter in parent component instead of routes child component for react router v6

I tried to create useRoutes hook from react-router-dom@6.4.1 to create my App routes using JS, like this in my routes.jsx:

import { useRoutes,  } from "react-router-dom";
import TestPage from "../Pages/Public/TestPage";
import TestPageTwo from "../Pages/Public/TestPageTwo";

const redirectRoutes = [
    {
        path: "/no-match",
        element: () => <div>No Match found</div>,
    },
];

const Router = () => {
    const router = useRoutes([
        {
            path: "/testPage",
            element: <TestPage />,
            loader: false,
        },
        {
            path: "/testPageTwo",
            element: <TestPageTwo />,
            loader: false,
        },
        ...redirectRoutes,
    ]);
    return <BrowserRouter>{router}</BrowserRouter>;
};

export default Router;

and in my app.jsx, I imported the file like so:

import { Provider } from "react-redux";
import Router from "./Router";
import initializeStore from "./Reducer/initializeStore";
import "./App.css";

export const store = initializeStore();

const App = () => {
    return (
        <Provider store={store}>
            <Router />
        </Provider>
    );
};

export default App;

This resulted in the following error:

Uncaught Error: useRoutes() may be used only in the context of a component.

As you can see, I have wrapped the routes using BrowserRouter in the app.jsx, but I still get this error. However, I was able to solve this when I moved the BrowserRouter to app.jsx instead of routes.jsx, like so:

app.jsx:

...
const App = () => {
    return (
        <Provider store={store}>
            <BrowserRouter>
                <Router />
            </BrowserRouter>
        </Provider>
    );
};
...

and, in routes.jsx, I just return the router which is created using useRoutes();

I don't understand why do we need to wrap the BrowserRouter from react-router-dom@6 in the app.jsx like this instead of routes.jsx.