showing the applicants of a job in reactjs using id - reactjs

Question

Iam trying to make a react application whereby users are applying for a job and also creating a report that will show the profile of the users who have applied for the job. Iam welcome to any ideas that can be given to me since I would like to have a logic on how to implement that.
Here is my code below:
DriverCard.js
import React from "react";
import member2 from "../../../dist/images/user2.png";
const DriverCard = ({cardValues}) => {
return (
<>
<div className="col-lg-3 col-md-3 col-sm-4 col-6 p-0 mb-5">
<div className="text-center">
<div className="mb-2">
<img
src={cardValues ? `${cardValues.location.title}` : member2}
className="rounded-circle"
height="85px"
width="85px"
alt="members"
/>
</div>
<h6 className="mb-0 textHeading">
{cardValues ? cardValues.name : `John Doe`}
</h6>
<span className="text-muted textStyle"> #JohntheD 5h</span>
<hr
style={{
width: "50%",
marginTop: 4,
marginBottom: 1,
}}
/>
<h6 className="textStyle mt-1">
{cardValues ? `${cardValues.licenseAge} +years licence` : `NA`}
</h6>
<h6 className="textStyle">
{cardValues ? `${cardValues.experience} +years experience` : `NA`}
</h6>
</div>
</div>
</>
);
};
export default DriverCard;
This is the report file that is suppossed to show the jobcard and the profile for the applicants.
import React, { useEffect, useState } from "react";
import {useHistory} from "react-router-dom";
import map from "lodash/map"
import { getSpecificJobCard } from "../../Api/index";
import arrowBack from "../../dist/images/arrowBack.svg";
import DriverCard from "./Job_Components/DriverCard";
import JobCardDetails from "./Job_Components/JobCardDetails";
import NextPageButtons from "../Main/DashBoard_Buttons/NextPageButtons";
const JobDetails = ({jobpostId}) => {
const [jobCard, setjobCard] = useState([]);
const history = useHistory();
console.log("param val",jobpostId);
useEffect(() => {
(async () => {
let jobCardRespData = await getSpecificJobCard(jobpostId);
setjobCard(jobCardRespData);
console.log("jobcard response:", jobCardRespData);
})();
}, []);
console.log("resp list ----- ", jobCard);
return (
<div className="">
<div className="col-md-10 m-auto">
<span style={{ cursor: "pointer" }} className="">
<img src={arrowBack} alt="" className="img-fluid" />
</span>
<div className="row">
<div className="col-lg-4 mt-5">
<div className="row">
{}
<JobCardDetails job={jobCard} />
</div>
</div>
<div className="col-lg-8 mt-5">
<div className="row">
<DriverCard/>
{/* <DriverCard /> */}
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="row">
</div>
</div>
</div>
</div>
<div className="col-lg-12 my-3 border-top">
<NextPageButtons/>
</div>
</div>
);
};
export default JobDetails;