Как правильно настроить реакт роутер? [closed]

При нажатии на Link меняется URL но рендер компонента происходит в компоненте Header, на страницу компонента который указан в path перехода не происходит, подскажите как исправить это

 import "./App.css";
 import Header from "../src/components/Header/Header";
 import GetProducts from "../src/components/getProducts/GetProducts";
 import ItemsCart from "./components/ItemsCart/ItemsCart";
 import { Routes, Route } from "react-router-dom";
 function App() {
   return (
    <div className="App">
    <Header />
    <GetProducts />
    <Routes>
       <Route path="/cart" element={<ItemsCart />}></Route>
    </Routes>
  </div>
  );
}

  export default App;

Менял порядок роутеров, пробовал это дело все в index.js и в других компонентах, ситуация не меняется вот версии:
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-router-dom”: “^6.8.1”,