React Router v6 Stutter in transitions

Question

So i have made my routes as shown below;

function App() {
  return (
    <Router>
    <Routes>
      <Route element={<WithoutNav />}>
        <Route path="/Login" element={<Login />} />
        <Route path="/*" element={<ErrorPage />} />
      </Route>
      <Route element={<WithNav />}>
        <Route index element={<Home />} />
        <Route path="/Dashboard" element={<Dashboard />} />
        <Route path="/Price" element={<Price />} />
        <Route path="/Profile/:username" element={<Profile />} />
      </Route>
    </Routes>
    </Router>
  );
}

But when I go from one page to another, lets say by clicking on my main nav bar at the top, the page "stutters" and doesn't change the page smoothly. Does anyone have a solution to this? I've only found something on youtube called Framer Motion, but I'm very unfamiliar with it and afraid to use it.