How do I get my link to take me to the exact event clicked on

I am not able to get the link to take me to the exact link that has been clicked. The id is supposed to be dynamically generated and one the link is clicked it takes to the event of that id that was clicked. Here is the code for the single event.

function EventListItem({ resource }: { resource: Resource<EventListItem> }) {
  const { loading, error, data } = useResource(resource);
  if (loading) return <p>Loading...</p>;
  if (error) return <div className="error">{error.message}</div>;
  
    const {id}: { id: string } = useParams(); 
  // const params = useParams()
  // console.log(params);
  return (
    <div data-event="cube">
      <div className={styles["event_container"]} >

        <h2>{data.name}</h2>
        <div className={styles["dates"]}>
          <h2>
            {data.start_time}
            {console.log(data)}
            {data.end_time}
          </h2>
          <h3>{data.type}</h3>
        </div>

        <div className={styles["block"]}>{data.description}</div>
        <div>stuff: {id}</div>
        <div className={styles["link"]}>
        {/* {`event/${id}`} */}
         <Link to={`/event/${id}`}>   
            Event Details
            {console.log(id)}
        </Link>
        </div>
        <hr className={styles["hr"]} />
      </div>
    </div>
  );
}

export default EventListItem;

And this is the code that maps through the events.

 const { loading, error, items } = useCollection<EventListItem>("/event");
  if (loading) return <p>Loading...</p>;
  if (error) return <div className="error">{error.message}</div>;
  console.log(items);

  
  return (
    // add event Id to enable load more feature
    <div>
      <div className={styles["header"]}>UPCOMING EVENTS</div>
      <div className={styles["event_container_1"]}>
        {items.map((item, i) => (
          <EventListItem key={i} resource={item} />
        ))}
      </div>
       <a href="#" id="loadMore">Load More</a>
    </div>
  );
};

export default EventList;