cant seem to access a particular page in my nextjs project; routing issue

TeamsMain.jsx file:

import React from "react";
import styles from './page.module.scss';
import Image, { StaticImageData } from "next/image";
import { useRouter } from "next/navigation";
import { teamList } from "@/app/assets/constants/data";

export interface Team {
    image: StaticImageData;
    name: string;
}

const TeamsMain = () => {

    const router = useRouter();

    const handleClick = (team: Team) => {
        router.push(`/teams/${team.name}`);
    }

    return (
        <div className={styles.teamMain__container}>
            {teamList.map((team: Team) => (
                <div 
                    key={team.name} 
                    className={styles.team__container}
                    onClick={() => handleClick(team)}
                >
                    <Image src={team.image} alt={team.name}/>
                    <div className={styles.blue__overlay}>{team.name}</div>
                    <span>{team.name}</span>
                </div>
            ))}
        </div>
    )
}

export default TeamsMain;

teamProfile page.tsx:

import React from "react";
import styles from './page.module.scss';
import Image, { StaticImageData } from "next/image";
import { teamList } from "../assets/constants/data";
import { Team } from '@/app/components/TeamsMain';
import { useRouter } from "next/router";

interface TeamProfileProps {
    team: {
      image: StaticImageData;
      description: string;
    }
  }
  
  const TeamProfilePage = () => {

    const router = useRouter();
    const { teamId } = router.query;

    const selectedTeam = teamList.find((team: Team) => team.name === teamId);
  
    return (
      <div>
        {selectedTeam ? (
          <TeamProfile team={selectedTeam} />
        ) : (
          <p>Team not found</p>
        )}
      </div>
    );
  };
  
  const TeamProfile = ({ team }: TeamProfileProps) => {
    return (
      <div>
        <Image src={team.image} alt="teamLogo" width={100} height={100} />
        <p>{team.description}</p>
      </div>
    );
  };
  
  export default TeamProfilePage;

TeamId.tsx page:

import React from "react";
import TeamProfilePage from "../teamProfile/page";

const TeamIdPage = () => {
    return <TeamProfilePage/>;
};

export default TeamIdPage;

When I try to click on an individual team from my array in the TeamsMain, it directs me to a 404 error page. The data is in another file and everything seems fine with code there.

Tried a bunch of methods, tried changing file structure as well to no avail.