Applied candidates link does not work

src/components/Ads/AdDetailsCandidateCard.js

 import React from "react";
 import PropTypes from "prop-types";
+import { CANDIDATES_DETAILS_PAGE } from "../../constants/pages";
+import { useHistory } from "react-router-dom";
 
 const AdDetailsCandidateCard = ({
   className,
+  id,
   firstName,
   lastName,
   experience,
   cv,
 }) => {
+  const history = useHistory();
   return (
     <div className={`ad-details-candidate ${className}`}>
       <div className="ad-details-candidate-date">
         <p>{new Date().toLocaleDateString()}</p>
       </div>
       <div className="ad-details-candidate-title">
-        <h3>
+        <h3 onClick={() => history.push(CANDIDATES_DETAILS_PAGE.replace(":id", id))}>
           {firstName} {lastName}
         </h3>
       </div>
 
 AdDetailsCandidateCard.propTypes = {
   className: PropTypes.any,
+  id: PropTypes.number,
   firstName: PropTypes.string,
   lastName: PropTypes.string,
   experience: PropTypes.number,

src/pages/AdsPage/AdDetailsPage.js

                     {ad.applicants.map((applicant, index) => (
                       <AdDetailsCandidateCard
                         key={index}
+                        id={applicant.applicantId}
                         firstName={applicant.firstName}
                         lastName={applicant.lastName}
                         experience={applicant.experience}