Passing down Props to "Single Page Views" through components

Question

Hey still new to React but I'm grinding my way through it slowly by building my own personal app/platform. I have a quick question of passing down props to single page views. This is my overview page that will pull in all the teams from my database as such:

import React, { useState, useEffect } from 'react';
import firebase from '../../firebase/firebase.utils'
import Button from '../../Components/GeneralComponents/Button.component'
import * as GoIcons from 'react-icons/go';

import TeamList from '../../Components/Teams/TeamList.Component'

function TeamsPage() {

  const [teams, setTeams] = useState([]);
  const [loading, setLoading] = useState(false);
  const ref = firebase.firestore().collection("teams");

  function getTeams() {
    setLoading(true);
    ref.onSnapshot((querySnapshot) => {
      const items = [];
      querySnapshot.forEach((doc) => {
        items.push(doc.data());
      });
      setTeams(items);
      setLoading(false);
      console.log(items);
    });
  }

  useEffect(() => {
    getTeams();
  },[])

  if(loading) {
    return <h1>Loading...</h1>
  }

  return (
    <div className="content-container">
      <h2>Team Page</h2>
      <div className="add-section">
        <div className="actions">
          <Button
            className="bd-btn outlined add-team"
          ><GoIcons.GoGear/>
            Add Team
          </Button>
        </div>              
      </div>      
        <TeamList teams={teams} />
    </div>
  )
}
  
export default TeamsPage;

This gets passed into my TeamList Component:

import React from 'react';
import { Link } from 'react-router-dom'
import { TeamCard } from './TeamCard.Component';

const TeamList = props => {
    return(
    <div className='teams-overview'>
        {props.teams.map(team => (
            <Link to={`/teams/${team.id}`}>
                <TeamCard key={team.id} team={team}/>
            </Link>
        ))}
    </div>
    )

}

export default TeamList;

Which maps through and then list the Team as a card component with a link that is supposed to route to their id and pass through their data.

Now in my single page view of a team I'm struggling to gain access to that prop data:

import React from 'react'

function TeamSinglePage(team) {
    return (
        <div className="content-container">
            <h1>Single Page View</h1>
            <p>Welcome, {team.teamName}</p>
        </div>
    )
}

export default TeamSinglePage;