Parent Component (UserList Component):

const UsersList = (props) => {    
    const removeCandidateById = (id) => {
        props.removeCandidateDetails(id);
    }    
    const RenderUsersList = props.CandidateDetails.map((userDetails) => {
        return (
            <UserCard userDetails={userDetails} removeUser={removeCandidateById }  key={userDetails.id}/>
        )
}) 

From UserCard Component I would like to pass the props data to another child component via the Link state object like state: { userDetails: this.props.userDetails } , but its always undefined in the grand child component which is configured in the /userDetail path.

I tried by Functional component way also. Via Link I cant get the solution for this.

Child Component (UserCard Component) :

class UserCard extends React.Component {
  constructor(props) {
    super(props);
    const { id, name, age, occupation, phone, imgUrL } = props.userDetails;
  }
  render() {
    return (
      <Col className="col col-lg-2 mb-3 mt-4">
        <div className="card">
          <div className="card-body">
            <h5 className="card-title"> {this.name}</h5>
            <Link
              to={{
                pathname: `/userDetail/${this.id}`,
                state: { userDetails: this.props.userDetails },
              }}
            >
              <img
                className="img"
                src={avatar}
                style={this.imgStyle}
                alt="avatar"
              />
            </Link>
          </div>
        </div>
      </Col>
    );
  }
}

export default UserCard;