how to get specific json path on onclick event of particular key value pair in json array data using react js?

enter image description here
I m getting json array data as shown in figure I m displaying it with material UI through React js. Now I want specific json path on Onclick event but for same key value pair i m getting all json path present in json data for that all key value, I want json path of only clicked node, how to get that*

for e.g Clicked Node : XPN.1: TEST
Json Path Array : (4) [‘[0].NK1[0].NK1.2.XPN.1’, ‘[0].NK11.NK1.2.XPN.1′, ‘[0].NK1[2].NK1.2.XPN.1’, ‘[0].PV2.PV2.3.CE.1’]
I want specific path instead of array of all same key value pair path .

import React, { useState } from "react";
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { TextField } from "@material-ui/core";
import TreeItem from '@material-ui/lab/TreeItem';
import TreeView from '@material-ui/lab/TreeView';
import axios from "axios";
import copy from "copy-to-clipboard";
import { makeStyles } from '@material-ui/core/styles';    

const useStyles = makeStyles({
  root: {
    height: 700,
    flexGrow: 1,
    maxWidth: 400
  }
});

export const FileUpload3 = (props) => {

  const classes = useStyles();
  const [file, setFile] = useState();
  const [fileName, setFileName] = useState();

  const [data, setData] = useState([]);
  const [key, setKey] = useState();


  const getChildren = obj =>
    Object.keys(obj).map(key => {
      const hasChildren = typeof obj[key] === "object";
      return {
        id: hasChildren ? key : obj[key],
        name: `${key}${hasChildren ? "" : `: ${obj[key]}`}`,
        children: hasChildren ? getChildren(obj[key]) : []
      };
    });

  const getData = objs => {
    return objs.map(obj => ({
      id: "root",
      name: key,
      children: getChildren(obj),    
    }));
  };

  const renderTree = nodes => {
    return (
      <TreeItem value={nodes.parents} nodeId={nodes.id} label={nodes.name}             
        onClick={() => handleClick(nodes)}                
        {Array.isArray(nodes.children)
          ? nodes.children.map(node => renderTree(node))
          : null}
      </TreeItem>

    );
  };
 
  const handleClick = (e) => {

    var mypath = getPath(data, e.id)
    console.log("Json Path : ", mypath);  // JSON PATH
    
  }
  function getPath(object, value) {
    return Object
      .keys(object)
      .reduce((r, k) => {
        var kk = Array.isArray(object) ? `[${k}]` : `${k}`;
        if (object[k] === value) {
          r.push(kk);
        }
        if (object[k] && typeof object[k] === 'object') {
          r.push(...getPath(object[k], value).map(p => kk + (p[0] === '[' ? '' : '.') + p));
        }
        return r;
      }, []);
  }
  
  const saveFile = (e) => {
    console.log(e.target.files[0]);
    setFile(e.target.files[0]);
    setFileName(e.target.files[0].name);
  }
  const UploadFile = async (e) => {

    const bindTree = async (e) => {
      setData(e);
    }

    const setKeyData = async (e) => {
      setKey(e);
    }

    console.log(file);
    const formData = new FormData()

    formData.append("formFile", file);
    formData.append("fileName", fileName);


    try {

      const res = await axios.post("https://localhost:44316/api/TerserExpressionUtility", formData);
      console.log(res.data);

      const keyData = Object.keys(res.data);
      //console.log(keyData);
      setKeyData(keyData);

      //Json object excluding the root node ADT_A01
      const result = Object.keys(res.data).map((key) => res.data[key]);
   ;

      //Convert the result into string array
      const data2 = JSON.stringify(result);
    

      //Parse the string into the object to bind it to TreeView
      const treeObject = JSON.parse(data2);
 
      bindTree(treeObject)
 
    }

    catch (ex) {
      console.log(ex);
    }

  };
 

  return (

    <>

      <input type="file" onChange={saveFile} />
      <input type="button" value="upload" onClick={UploadFile} />
      <br />
      <br />
      <div>

        <TreeView 
          className={classes.root}
          defaultCollapseIcon={<ExpandMoreIcon />}
          defaultExpanded={["root"]}
          defaultExpandIcon={<ChevronRightIcon />}
        >
          {getData(data).map(renderTree)}

        </TreeView>
        
      </div>


    </>

  );

}