How to pass props from from parent to grand child when using react-router--dom <Link>?

I sending image path data from parent component(TaskSubmissions.js component) to child component(Card.js component) and same image path data I want to pass child component of Card which is CardDetail.js.

Problem is data is passed from TaskSubmissions.js to Card.js but it's not getting passed from Card.js to DetailCard.js

I am using react-router-dom . To understand it better below I am sharing all three components code. I'll appreciate your help. P.S I am new to react and trying to understand the flow with such experiments.

Data Flow = image URL is passing from TaskSubmission.js to -> Card.js to -> DetailCard.js

Parent Component TaskSubmissions.js

import React from "react";
import Card from "../components/Card";

const TaskSubmissions = () => {
  return (
    <div className="container-fluid">
      <div className="row justify-content-center mt-5">
        <h1 className="text-info display-4 text-center">
          Review All Students Task!
        </h1>
      </div>

      <div className="row justify-content-center">
        <p className="lead text-center">Rate your students performance</p>
      </div>

      <div className="row justify-content-center mt-5">
        <div className="col-lg-3 col-md-4 col-sm-12">
          <Card
            name="Jane"
            path="https://source.unsplash.com/aob0ukAYfuI/400x300"
          />
        </div>
      </div>
    </div>
  );
};

export default TaskSubmissions;

Child Component Card.js

import React from "react";
import { Link } from "react-router-dom";

const Card = (props) => {
  return (
    <div className="container-fluid">
      <div className="row">
        <h4 className="card-title">{props.name}</h4>
        <Link
          to={{
            pathname: "/detail",
            state: { imgpath: props.path, name: props.name },
          }}
          className="d-block mb-4 h-100"
        >
          <img
            className="img-fluid img-thumbnail"
            src={props.path}
            alt="image"
          />
        </Link>
      </div>
    </div>
  );
};
export default Card;

GrandChild Component CardDetail.js

import React from "react";
import { useLocation } from "react-router";

const CardDetail = (props) => {
  const data = useLocation();
  return (
    <div className="container-fluid">
      <div className="row justify-content-center">
        <div className="card mb-3">
          <img src={data.imgpath} className="card-img-top" alt="..." />
          <div className="card-body">
            <h5 className="card-title">{data.name}</h5>
            <p className="card-text">Assignment 1 is completed.</p>
            <p className="card-text">
              <small className="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CardDetail;