I want my pages to be navigating smoothly. I’m not sure if I’m using my Routing right!

Here is the routing I tried:

function App() {
  return (
    <Router>
      <AppProvider>
       <Frame
        topbar={<TopBarExample />}
        navigation={<Sidebar />}
       >
      <Routes>
        <Route path="/home" element={<HomePage />} />
        <Route path="/budgetapp" element={<Budget />} />
        <Route path="/transfer" element={<TransferMoney />} />
      </Routes>
       </Frame>
      
      </AppProvider>
      
    </Router> 

Thanks so much!