CardsList.jsx

import Styles from './CardsList.module.css';
import Link from "next/link";
export const CardsList=(props)=>{
  const colleges=props.data.filter(item => item.classes === 'College');
  const university=props.data.filter(item=>item.classes==='vuz');
    return(
      <div className={Styles['container']}>
        <h1 className={Styles['cardsList_title']}>Colloges:</h1>
        <div className={Styles['cards_container']}>
        <div className={Styles['CardsList']} id='recommendations'>
            {colleges.map((item, index) => (
              <Link href={`/school/${item.name}`} key={item.id || item.name} className={Styles['card__link']}>
       <div className={Styles['Cards']}>
         <h1 className={Styles['Card-title__text']}key={index}>{item.name}</h1>
         <p className={Styles['Card-description__text']} key={index}>{item.description}</p>
       </div>
       </Link>
      ))}
        </div>
        </div>
        <h1 className={Styles['cardsList_title']}>University:</h1>
        <div className={Styles['cards_container']}>
        <div className={Styles['CardsList']} id='recommendations'>
            {university.map((item, index) => (
       <div className={Styles['Cards']}>
         <h1 className={Styles['Card-title__text']}key={index}>{item.name}</h1>
         <p className={Styles['Card-description__text']} key={index}>{item.description}</p>
       </div>
      ))}
        </div>
        </div>
        </div>

    )

}

school/[id]/page.js

"use client"
import {useState,useEffect} from 'react';
import {useRouter} from 'next/navigation';
;
import data from '../../components/data/data.json';
export default function School(props) {
    const router = useRouter();
    const name = ()=>{data.find()}
    return (
        <div>
            <h1>{}</h1>
        </div>
    );
}

Как мне сделать так чтобы при клике на какую либо из карточек в school передавалось item.name карточки на которую сделали клик ,я уже сделал динамичный роут в попытках достать эти данные из url, но это оказалось неудачным.Если это не исправить, то не могли бы вы помочь мне организовать эту логику по другому.

How can I make it so that when you click on any of the cards in school, the item.name of the card that was clicked is transmitted? I have already made a dynamic route in attempts to get this data from the url, but it turned out to be unsuccessful. If this cannot be fixed, then they could not Could you help me organize this logic differently.