How I navigate to the different routes when I am on the certain Route

Question

**I am using latest version of the react-router (v6) where I am navigating from the navbar in header component to other pages. The main question is that, how can I go to the other pages(routes) when I am on a certain page. Like when I am on the Games page and I have to move forward to the careers page, then the route exception occurs, so every time I have to go to other pages, first we have to move the home pages, then we have to move again on another page. This is my heroku deployed link of reactjs app : plomx.herokuapp.com
&& This is my code of app.js

import './App.css';
import Games from './Games'
import GetYourGameOnBockChain from './GetYourGameOnBockChain'
import Careers from './Careers'
import NftMarketplace from './NftMarketplace'
import ErrorPage from './ErrorPage'
import { Routes, Route } from "react-router-dom"
import Metaverse from './Metaverse';
import PlomXHome from './PlomXHome';
function App() {
  return (
    <div className="App">
      
        <Routes>
          <Route path='/' element={<PlomXHome/>}/>
          <Route path='games' element={<Games />} />
          <Route path='nftmarketplace' element={<NftMarketplace/>} />
          <Route path='metaverse' element={<Metaverse/>}/>
          <Route path='getyourgameon' element={<GetYourGameOnBockChain />} />
          <Route path='careers' element={<Careers />} />
          <Route path='*' element={<ErrorPage />} />
        </Routes>
        
    </div>
  );
}

export default App;

&& this is my header page

import React from 'react'
import './Header.css'

import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import { AppBar } from '@mui/material';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import StorefrontIcon from '@mui/icons-material/Storefront';
import GamepadIcon from '@mui/icons-material/Gamepad';
import ChildCareIcon from '@mui/icons-material/ChildCare';
import AcUnitIcon from '@mui/icons-material/AcUnit';
import Box from '@mui/material/Box';
import { useNavigate } from 'react-router-dom';

export const Header = () => {
    const navigate = useNavigate()
    return (
        // <div className='header'>
        <div>
            {/* <div className='plomxName'>PlomX</div> */}
            {/* <Box sx={{ flexGrow: 1 }}> */}
            <AppBar style={{ background: 'black', height: '109px' }}>
                <Grid container justifyContent="center" spacing={2}>
                    <div className='plomxName'>PlomX</div>
                    <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('games')} sx={{ color: "white" }}><SportsEsportsIcon sx={{ color: 'white' }} />Games</Button></Grid>
                    <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('nftmarketplace')} sx={{ color: "white" }}><StorefrontIcon sx={{ color: 'white' }} />NFT Marketplace</Button></Grid>
                    <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('metaverse')} sx={{ color: "white" }}><AcUnitIcon sx={{ color: 'white' }} />MetaVerse</Button></Grid>
                    <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('getyourgameon')} sx={{ color: "white" }}><GamepadIcon sx={{ color: 'white' }} />Get your game on Blockchain</Button></Grid>
                    <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('careers')} sx={{ color: "white" }}><ChildCareIcon sx={{ color: 'white' }} />Careers</Button></Grid>
                </Grid>
            </AppBar>
            {/* </Box> */}
        </div>
    )
}