I'm not sure how this dynamic route in Next JSON functions, so I'm not sure why it's not working for me

Question

When I navigate to a specific class using the dynamic route (/classes/[id]), the ClassDetail component doesn't receive the expected item prop, and it shows as undefined. I'm not sure if the issue is with how I'm passing the props, the dynamic routing setup, or the data fetching process.

export default function Home() {
  const [createdClasses, setCreatedClasses] = useState([]);
  const [joinedClasses, setJoinedClasses] = useState([]);

  const { data: session } = useSession();
  const userEmail = session?.user?.email;
  
  useEffect(()=>{
    const fetchClasses = async ()=> {
      if(userEmail){
        const classRef = collection(db, 'CreatedClass', userEmail, 'Classes',);
        try {
          const docSnap = await getDocs(classRef);
          if (docSnap.exists()) {
            setCreatedClasses(docSnap.data());
          } else {
            console.error('document does not exist');
          }
        } catch (error) {
          // console.error("Error fetching document: ", error); // this cuases an error in the console. 
        }

        const unsubscribe = onSnapshot(classRef, (snapshot) => {
          setCreatedClasses(snapshot.docs.map(doc => doc.data()));
        });
        return () => unsubscribe();
      }
    }
    fetchClasses()
  },[userEmail])
  // console.log(createdClasses)


  useEffect(() => {
    const fetchJoinedClasses = async () => {
      if(userEmail){
        const JoinedClassRef = collection(db, 'JoinedClasses', userEmail, 'classes',);
        try {
          const docSnap = await getDoc(JoinedClassRef)
          if (docSnap.exists()) {
            setJoinedClasses(docSnap.data());
          } else {
            console.error('document does not exist');
          }
        }catch (error) {
          // console.error("Error fetching document: ", error); // this cuases an error in the console. 
        }
        const unsubscribe = onSnapshot(JoinedClassRef, (snapshot) => {
          setJoinedClasses(snapshot.docs.map(doc => doc.data()));
        });
        return () => unsubscribe();
      }
    }
    fetchJoinedClasses()
  },[userEmail])

  // console.log(joinedClasses)


  return (
    <div className="h-screen w-full p-8 overflow-y-auto">
      <div className='flex gap-8 grid-cols-4'>
       <ol className='flex flex-wrap mx-w-auto gap-5'>
            {joinedClasses.map((item) => (
             <Link href={`/classes/${item.id.current}`} key={item.id}>
                 <JoinedClass item={item} createdClasses={createdClasses} />
             </Link>
           ))}
            {createdClasses.map((item) => (
             <Link href={`/classes/${item.id.current}`} key={item.id}>
                 <p>
                    <JoinedClass item={item} joinedClasses={joinedClasses}/>
                 </p>
             </Link>
           ))}
       </ol>
      </div>
      
  </div>
  )
}

/classes/[id]/page 

'use client'

import React from 'react';
const ClassDetail = ({ item }) => {
  console.log(item)
  //when console logged it says undifiened 
 

  return (
    <div className='h-screen w-screen'>
      <h1>Class Information</h1>
      {/* <p>Owner: {ClassInfo.owner}</p>
      <p>Class Name: {ClassInfo.className}</p> */}
    </div>
  );
};

export default ClassDetail;

Checking if the data is correctly fetched from Firebase. Ensuring that the item prop is passed correctly to the ClassDetail component. Verifying the dynamic routing setup in Next.js. i've used userRouter from next/navigation