I'm following this YouTube tutorial from JavaBrains https://www.youtube.com/watch?v=4iM7eEl3Rag&list=PLqq-6Pq4lTTa8V613TZhGq4o8hSgkMGQ0&index=9&t=292s

Everything goes smooth and well until he implements the BrowserRouter. The thing is that I copy exactly what he's doing but unfortunately I get a blank page, not matter what I change it's still blank. Any ideas how to solve it? I have asked also in the channel but with no answer. Thanks! The url will be: localhost:3000/teams/xxx

This is the piece of code of App.js

import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { TeamPage } from './pages/TeamPage';

function App() {
  return (
    <div className="App">
      <Router>
        <Route path="/teams/:teamName">
          <TeamPage />
        </Route>
      </Router>
    </div>
  ); 
}

export default App;

and this is the TeamPage.js

import { React, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { MatchDetailCard } from "../components/MatchDetailCard";
import { MatchSmallCard } from "../components/MatchSmallCard";

export const TeamPage = () => {

  const [team, setTeam] = useState({ matches: [] });
  const { teamName } = useParams();

  useEffect(
    () => {
      const fetchMatches = async () => {
        const response = await fetch(`http://localhost:8080/api/team/${teamName}`);
        const data = await response.json();
        setTeam(data);
      };
      fetchMatches();
    }, [teamName] //This empty array as a second argument tells: Call useEffect only when something inside change
  );

  if(!team || !team.teamName) {
    return <h1>Team Not Found</h1>
  }

  return (
    <div className="TeamPage">
      <h1>{team.teamName}</h1>

      <MatchDetailCard teamName={team.teamName} match={team.matches[0]} />
      {team.matches.slice(1).map((match) => 
        <MatchSmallCard teamName={team.teamName} match={match} />
      )}
    </div>
  );
};

export default TeamPage;

Hope you can help meee!!!