I have put BrowserRouter into a component called Router and for some reason when I use it that way all sorts of errors relating to functions may only be used in the context of a <Router> component appear. I was just wondering why this happens?

For example:

This works:

<BrowserRouter>
    <Routes>
        <Route path="*" element={<PageNotFound />} />
        <Route path="/" element={<HomeView />} />
    </Routes>
</BrowserRouter>

This doesn't:

// Router Component
const Router = (props) => {

    // Return component
    return (
        <BrowserRouter>
            {props.children}
        </BrowserRouter>
    );

};

// Export
export default Router;

<Router>
    <Routes>
        <Route path="*" element={<PageNotFound />} />
        <Route path="/" element={<HomeView />} />
    </Routes>
</Router>