Content is not showing from the specific page while using the react-router-dom

I create an app having the following files, But my problem is that while using react-router-dom, The contents in pages like jobs.js, and home.js are not displaying. I reffered similar questions in stackoverflow, but none of them are working for me!

App.js

<BrowserRouter>
    <div className="App container">
      

      <nav className='navbar navbar-expand-sm bg-light navbar-dark'>
        <ul className='navbar-nav'>
          <li className='nav-item m-1'>
            <NavLink className='btn btn-light btn-outline-primary' to="/home">
              Home
            </NavLink>
          </li>
          <li className='nav-item m-1'>
            <NavLink className='btn btn-light btn-outline-primary' to="/jobs">
              Jobs
            </NavLink>
          </li>
          <li className='nav-item m-1'>
            <NavLink className='btn btn-light btn-outline-primary' to="/jobdetails">
              Job Details
            </NavLink>
          </li>
        </ul>
      </nav>
      <Routes >
        <Route path='/home' element={<home/>} />
        <Route path='/jobs' component={jobs} />
        <Route path='/jobdetails' component={jobdetails} />
      </Routes >
    </div>
    </BrowserRouter>

jobs.js

import React,{Component} from "react";

export class jobs extends Component{
    render(){
        return(
            <div>
                <h3>This is Jobs Page</h3>
            </div>
            
        )
    }
}

home.js

import React,{Component} from "react";

export class home extends Component{
    render(){
        return(
            <div>
                <h3>This is Home Page</h3>
            </div>
        )
    }
}