My React Router Doesn't Work for All Routes

I am new to React. I am having a problem with my code below as only Dashboard and Register routes show up. Login shows blank page. I have tried creating other routes and they don't work either. Only routes specifically called Dashboard and Register work. Anyone has any idea where the problem is? Thanks in advance!

App.js

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import Dashboard from './pages/Dashboard.jsx'
import Login from './pages/Login.jsx'
import Register from './pages/Register.jsx'


function App() {
  return (
    <>
      <Router>
        <div className="container">
          <Routes>
            <Route path='/' element={<Dashboard />}/>
            <Route path='/register' element={<Register />}/>
            <Route path='/login' element={<Login />}/>
          </Routes>
        </div>
      </Router>
    </>
  );
}

export default App;

pages/Dashboard.jsx

import React from 'react'

function Dashboard() {
  return (
    <div>Dashboard</div>
  )
}

export default Dashboard

pages/Register.jsx

import React from 'react'

function Register() {
  return (
    <div>Register</div>
  )
}

export default Register

pages/Login.jsx

import React from 'react'

function Login() {
  return (
    <div>Login</div>
  )
}

export default Login