Developing a react.js app. Used nav link at navbar. The router is also defined but it doesn't go anywhere. after reloading it works. If Job Post is clicked on Navbar it doesn't work but in the URL it's http://localhost:3000/jobPost and after reloading it is routed. App package.json is

"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.34.0",
"react-router-dom": "^5.3.0",

import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Offcanvas from 'react-bootstrap/Offcanvas';
import { Link } from 'react-router-dom';

<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link as={Link} to="/home">Home</Nav.Link>
<Nav.Link as={Link} to="/jobPost">job Post</Nav.Link>
<NavDropdown title="Dropdown" id={`offcanvasNavbarDropdown-expand-${expand}`}>
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
... ... ...
<NavDropdown.Divider />
                    

In App.js

<Route exact path="/">
      <Home></Home>
</Route>

<Route path="/home">
        <Home></Home>
</Route>

<Route path="/jobPost">
        <JobPost></JobPost>
</Route>

Need some help.