How can I make Navbar stick to top when using React Router?

Question

I just made my react router work and whenever I change paths to other pages the component always goes above the navbar and footer when I want it in the middle. Any tips ? here is my App.js code:

import Navbar from "./NavBarandFooter/Navbar.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import HomePage from "./pages/HomePage.js";
import Footer from "./NavBarandFooter/Footer.js";
import ContactPage from "./pages/ContactPage.js";
import CatalogPage from "./pages/CatalogPage.js";
import PortfolioPage from "./pages/PortfolioPage.js";
import AboutPage from "./pages/AboutPage.js";
function App() {
  return (
    <Router>
      <div className="flex flex-col min-h-screen">
        <Navbar className="sticky top-0"/>
        <div className="flex-grow"> 
          <Routes>
            <Route path="/home" element={<HomePage />} />
            <Route path="/about" element={<AboutPage />} />
            <Route path="/catalog" element={<CatalogPage />} />
            <Route path="/portfolio" element={<PortfolioPage />} />
            <Route path="/contact" element={<ContactPage />} />
          </Routes>
        </div> 
        <Footer />
      </div>
    </Router>
  );
}

export default App;
[![enter image description here](https://i.stack.imgur.com/ud7EB.png)](https://i.stack.imgur.com/ud7EB.png)

I tried adding in those extra divs inbetween the Router and Routes but didnt help.