React: Passing Props not working. Am I missing something?

as you may get from the title, passing props in react is not working. And i don´t get why.

import styled from 'styled-components';


const Login = (props) => {
    return<div>Login</div>

}

export default Login;

On my App.js page here is the following:

import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login.js';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path="/" >
            <Login />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Problem: if i start the script and render the page, nothing is shown. What am I doing wrong?

Answer

You should pass <Login /> as the element. Try this code:
App.js:

import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login.js';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path="/" element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;