Is there any solution in react.js to get only "path of the file" from json data to the pdf.js when we click on the documents from directories?

this the wedpage output

Here Iam facing the problem in importing path of the file into the pdf render module

path should import when we click on the tree component

file path from json data needs to import here at file={}

this program renders pdf document

//PDF.js renders pdf document
import React, { useState } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import treeData from "./data.json";
import './components.css';
function Main() 
{
  const [numPages, setNumPages] = useState(null);
  function onDocumentLoadSuccess({ numPages: nextNumPages }) {
    setNumPages(nextNumPages);
  }
  return (
    <>
      <main className="col-md-9 ms-sm-auto col-lg-9 px-md-4 shadow">
        <div className="Example__container">
          <div className="Example__container__document">
             {/* <Document file={props.treeData.File} onLoadSuccess={onDocumentLoadSuccess} > */}
              <Document file='./sample.pdf' onLoadSuccess={onDocumentLoadSuccess} >
                {Array.from(new Array(numPages), (_el, index) => (
                <Page key={`page_${index + 1}`} pageNumber={index + 1} />
              ))}
            </Document>
          </div>
        </div>
      </main>
    </>
  );
}
export default Main

this programs renders tree stucture

//treeList.js renders tree stucture
import React from "react";
import Tree from "./Tree";
import treeData from "./data.json"
import './components.css';
const TreeList = () =>
{
    return (
        <>
          <div className="content">
                <div className="container-fluid">
                    <div className="row ">
                        <nav id="sidebarMenu" className="col-lg-3 d-md-block  sidebar collapse shadow">
                            <div className="col text-center">
                                <h4 className=" p-3 ">PDF Directories</h4>
                                <p className="mt-1">
                                    <div className="row  d-flex justify-content-center">
                                        <div className=" text-left text-dark">
                                            <div className="collapse show" id="home-collapse">
                                                <Tree data={treeData} />
                                            </div>
                                        </div>
                                    </div>
                                </p>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </>
    );
};
export default TreeList;

this program renders data into treelist using json data

//tree.js renders data in the treeList 
import React, { useState } from "react";
import './components.css';
const Tree = (
{ data = [] }) => {
    return (
        <div className="d-tree">
            <ul className="d-flex d-tree-container flex-column ">
                {data.map((tree) => (
                    <TreeNode node={tree} />
                ))}
            </ul>
        </div>
    );
};

const TreeNode = ({ node }) => 
{
    const [childVisible, setChildVisiblity] = useState(false);
    const hasChild = node.children ? true : false;
    return (
        // toggle icon
        <li className="d-tree-node border-0">
            <div className="d-flex" onClick={(e) => setChildVisiblity((v) => !v)}>
                {hasChild && (
                    <div className={`d-inline d-tree-toggler ${childVisible ? "active" : ""}`}>
                        <i className="fas fa-caret-right"></i>
                    </div>
                )}
                <div className="col d-tree-head">
                    <i className={`mr-1 ${node.icon}`}> </i>
                    {node.label}
                </div>
            </div>
            {hasChild && childVisible && (
                <div className="d-tree-content">
                    <ul className="d-flex d-tree-container flex-column">
                        <Tree data={node.children} />
                    </ul> 
                </div>
            )}
        </li>
    );
};
export default Tree;

this is sample json data

//data.json 
[       
    {
        "key": "0",
        "label":  "Documents",
         "icon":  "fa fa-folder",
         "title":  "Documents Folder",
         "children":  [
            {
                "key": "0-0",
                "label":  "Document 1-1",
                 "icon":  "fa fa-folder",
                 "title":  "Documents Folder",
                 "children":  [
                    {
                        "key": "0-1-2",
                        "label":  "Document-0-2.doc",
                         "icon":  "fa fa-file",
                         "title":  "Documents Folder",
                         "File": "./sample.pdf",
                         "path":"./e/work"
                    }
                ]
            }
        ]
    },
    {
        "key": "1",
        "label":  "Desktop",
         "icon":  "fa fa-desktop",
         "title":  "Desktop Folder",
         "children":  [
            {
                "key": "1-0",
                "label":  "document1.doc",
                 "icon":  "fa fa-file",
                 "title":  "Documents Folder",
                 "File": "./sample.pdf",
                 "path":"./e/work"
            },
            {
                "key": "0-0",
                "label":  "documennt-2.doc",
                 "icon":  "fa fa-file",
                 "title":  "Documents Folder",
                 "File": "./sample.pdf",
                 "path":"./e/work"
            }
        ]
    },
    {
        "key": "2",
        "label":  "Downloads",
         "icon":  "fa fa-download",
         "title":  "Downloads Folder",
         "children":  [ 
             {
            "key": "0-0",
            "label":  "documennt-2.doc",
             "icon":  "fa fa-file",
             "title":  "Documents Folder",
             "File": "./sample.pdf",
             "path":"./e/work"
        }]
    }
]