React Routers don't show up in the browser

Question

I'm trying to do a page with "Login" and "Sign up" buttons that will redirect me to the Login and Sign up pages. I tried multiple things and I'm out of ideas so here's the code:

App.js:

import './App.css';
import TextButtons from "./components/firstpage";
import './stylesheets/signUpStyle.css'
import './stylesheets/firstPageStyle.css'
import './stylesheets/loginStyle.css'

import React from "react";

function App() {
  return (
      <div className="App">
        <TextButtons/>
      </div>
  );
}

export default App;

firstpage.js:

import React from 'react'

import {
    BrowserRouter,
    Routes,
    Route,
    Link
} from "react-router-dom";

import Form from "./signup";
import FormLogin from "./login";

const TextButtons = () =>
{
    return (
        <div id="text_and_buttons">
            <div id="text">
                <p id="CMS">Conference Management System</p>
            </div>
            <BrowserRouter>
                <Routes>
                    <Route exact path="/signup" element={<Form/>}/>
                    <Route exact path="/login" element={<FormLogin/>}/>
                </Routes>
            </BrowserRouter>
        </div>
    )
}

export default TextButtons

Not that important here but if needed, these are the login and sign up files:

signup.js:

import React, {Component} from 'react'


class Form extends Component
{
    render() {
        return (
            <>
            <form action="http://localhost:8080/signUp/accountRegistered" method="POST">
                <div class="container">
                    <h1>Sign up</h1>
                    <hr />

                    <label for = "firstname"><b>First name</b></label>
                    <input type="text" placeholder="Enter first name" name="firstname" id="firstname" required />

                    <label for = "lastname"><b>Last name</b></label>
                    <input type="text" placeholder="Enter last name" name="lastname" id="lastname" required />

                    <label for="email"><b>Email</b></label>
                    <input type="text" placeholder="Enter Email" name="email" id="email" required />

                    <label for="psw"><b>Password</b></label>
                    <input type="password" placeholder="Enter Password" name="psw" id="psw" minlength="8" required />

                    <label for="psw-repeat"><b>Repeat Password</b></label>
                    <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" minlength="8" required />

                    <label for="description"><b>Description</b></label>
                    <input type="text" placeholder="Enter a short description" name="description" id="description" />
                    <hr />
                    <button type="submit" class="registerbtn">Register</button>
                </div>
            </form>

            <div class="container login">
                <p>Already have an account? <a href="/login">Login</a>.</p>
            </div>
            </>
        )
    }
}

export default Form

and login.js:

import React, {Component} from 'react'

class FormLogin extends Component
{
    render() {
        return (
            <>
                <form action="http://localhost:8080/signIn/connected" method="POST">
                    <div class="container">
                        <h1>Login</h1>
                        <hr/>

                        <label for="email"><b>Email</b></label>
                        <input type="text" placeholder="Enter Email" name="email" id="email" required />

                        <label for="psw"><b>Password</b></label>
                        <input type="password" placeholder="Enter Password" name="psw" id="psw" minlength="8" required />

                        <hr/>
                        <button type="submit" class="loginbtn">Login</button>
                    </div>
                </form>

                <div class="container signup">
                    <p>Do not have an account? <a href="/signUp">Sign up</a>.</p>
                </div>
            </>

        )
    }
}

export default FormLogin

I think the problem is in firstpage.js, I can only see the div with the text on my page. Help??