How can I redirect to a new page of one single Events Component by using their IDs?

I need some help. I think this problem might be solved really easy but I am kinda stuck in my brain. So: I have a Component called Events, which renders multiple Events like musical events or sport events to a list. Now I want to get one single Event by it's specific ID and redirect to a the url: "/events/id". This url should show me now my new Component "SingleEvent" but it ain't working. How do I solve this?

I added only code which matters: Events.tsx, where I render the list of events. I have to press the a tag "View Here" to open my SingleEvent.

const cols = [
  { key: 'checkbox', header: '', width: 2 },
  { key: "name", header: "Name", width: 10 },
  { key: "created_by", header: "Created by", width: 10 },
  { key: "city", header: "City", width: 5 },
  { key: "created_on", header: "Created on", width: 7 },
  { key: "ends_on", header: "Ends on", width: 10 },
  { key: 'reason', header: 'Culture Admin Reason', width: 5 },
  { key: "action", header: "Action", width: 5 },
];


const event = eventQuery.data?.results.map((event) => {
    return {
      id: event.id,
      checkbox: (<input type="checkbox"></input>),
      name: (<h6 className="EventName">{event.name}</h6>),
      created_by: event.created_By?.business_name ? event.created_By.business_name : "-",
      city: event.venue?.city ? event.venue.city : "",
      created_on: convertDate(event.start_date),
      ends_on: convertDate(event.end_date),
      reason: (<a className="ReasonStyle" href={`events/${event.id}`}>View Here</a>),
      action: (
        <>
          <span onClick={handleDetails(event.id)}>
            <Icon icon="details" />
          </span>

          <span onClick={handleDetails(event.id)}>
            <Icon icon="edit" />
          </span>

          <span title="Delete"> {/* onClick={handleDeleteEvent(event.id) */}
            <Icon icon="delete" />
          </span>
        </>
      ),
    };
  });


return (
    <div className="Events Page">
      <Modal open={visible} onClose={toggle} className="mainModal">
        <EventDetails id={eventId} />
      </Modal>
      <InnerHeader title="Events" headingType="heading_bold">
        <div className="flex-a-center">
          <CustomGroupButton 
            label={sortByStatus}
          />
          <Filter
            label="Filter by:"
            placeholder="All"
            data={filterByOptions}
            onChange={(e) => handleFilters(e, "filterBy")}
          />
          <Filter
            label="Sort by:"
            placeholder="All"
            data={sortByOptions}
            onChange={(e) => handleFilters(e, "sortBy")}
          />
        </div>
      </InnerHeader>
      {event?.length ? (
        <>
          <Table
            columns={cols}
            rows={event}
            loading={eventQuery.isLoading}
            error={eventQuery.isError}
          />

          <>
            <hr></hr>
            <Pagination
              data={event}
              itemsPerPage={10}
              setPage={setPage}
              dataLength={eventQuery.data?.metadata.total as number}
              page={page}
            />
          </>
        </>
      ) : (
        <ErrorBoundary />
      )}
    </div>
  );