Route to an empty page does not work in a React app

Question

I want to establish a standalone route to a login page apart from the routes that render the content of a page with a header and footer. For now the login page is supposed to close the current window as it is expected to be opened in a popup.

For that I have a following structure for my React app:

App.js

<Router>
  <Route path="/login" element={<Login />} />
  <Header />
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/page1" element={<Page1 />} />
  </Routes>
  <Footer />
</Router>

Login.js

import React, { useEffect } from "react";
    
function Login() {
  useEffect(() => {
    return () => {
      window.close();
    };
  }, []);
    
  return <h1>This window should be closed</h1>;
}
    
export default Login;

While if I skip the <Route path="/login" element={<Login />} /> clause, the app works fine doing what is expected. But, for some reason, if I add the top level <Route path="/login" element={<Login />} />, it makes my app blank altogether, routes '/' and '/page1' stop working giving a blank page and <Login /> is not rendered.

Placing the <Route path="/login" element={<Login />} /> into the <Routes></Routes> does not help - it renders the header and the footer for '/login', which is not what I want. Also I tried using <Route path="/login" render={() => <Login />} />, it also does not work behaving the same way as with the element prop.

How can I make my app render a standalone route?