Organizational Tree Structure in react

I am new to react. so pardon me for this silly question.
I want to create an organizational hierarchy as shown in the attachment.

I am pulling all the necessary information from the JSon file.

My jsx file looks like this:

Please help me with two:

1. how to give image address in the json file.

2. i have successfully created root/parent card(i.e chetan lal), how can i create it's child elements? I tried with following code but unable to create child elements.

   import React, { useState } from 'react';
   import Records from '../OrgDetail.json';
   export default function Chart() {
   const center = {
   top: '60px',
   backgroundColor: 'rgb(246,246,246)',
   fontSize: '12px',
   width: "250px",
   height: "85px",
   border: "1px solid grey",
   borderRadius: '25px',
   margin: 'auto',
   display: 'flex',
   justifyContent: 'center',
   position: 'relative'
   }
   const linkstyle = {
   left: '220px',
   position: 'absolute',
   textDecoration: 'none',
   color: 'darkgrey',
   color: 'darkgrey'
   }
   const imagestyle = {
   border: '2px solid grey',
   borderRadius: '50%',
   height: '80px',
   width: '80px',
   position: 'absolute',
   top: '-50px',
   }
   const namestyle = {
   position: 'absolute',
   top: '30px'
   }
   const designstyle = {
   position: 'absolute',
   top: '45px'
   }
   const buttonstyle = {
   position: 'absolute',
   top: '70px',
   borderColor: 'grey'
   }
   const myFunction = (y) => {
   console.log(y);
   var x = document.getElementById(y);
   console.log(x);
   if (x.style.display === "none") {
   x.style.display = "flex";
   } else {
   x.style.display = "none";
   }
   }
   return (
   <>
   {Records && Records.map(record => {
   return (
   <div key={record.key} className="container" style={center}>
   <img src={record.image} style={imagestyle} alt={record.name} />
   <a style={linkstyle} href="/" alt=""><b>...</b></a>
   <span style={namestyle}><b>{record.name}</b></span><br></br>
   <p style={designstyle}>{record.designation}</p>
   <button style={buttonstyle} >{record.child.length} ↓</button>
   </div>
   )
   })}
   {Records.child && Records.child.map(record => {
   return (
   <div className="display:flex" key={record.child.key} style={center}>
   <img src={record.child.image} style={imagestyle} alt={record.name} />
   <a style={linkstyle} href="/" alt=""><b>...</b></a>
   <span style={namestyle}><b>{record.child.name}</b></span><br></br>
   <p style={designstyle}>{record.child.designation}</p>
   <button style={buttonstyle} >{record.child.child.length} ↓</button>
   )
   </div>
   )
   })}
   </>
   )
   }
   

JSon file:

[{
"key": "p1",
"name": "Chetan Lal",
"designation": "Managing Director",
"image": "D:/React/RL_org/my-app/src/Images/Chetan-Lal-edit.jpg",
"about": "This is just test",
"child": [
{
"key": "c1",
"name": "Shagufta Merchant",
"designation": "VP-Digital Operations & HR",
"image": "../Images/Shagufta-Merchant-edit - Copy.jpg",
"about": "This is just test2",
"child": [
{
"key": "gc1",
"name": "Manjiri Nadkarni",
"designation": "Manager - NA Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2",
"child": [
{
"key": "ggc1",
"name": "Anurag Bhagrav",
"designation": "Team Leader - Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2"
},
{
"key": "ggc2",
"name": "Janhavi Chaudhari",
"designation": "Team Leader - Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2"
},
{
"key": "ggc3",
"name": "Anurag Shetty",
"designation": "Team Leader - Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2"
}
]
},
{
"key": "gc2",
"name": "Shailendra More",
"designation": "Manager - NA Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2",
"child": [
{
"key": "ggc1",
"name": "AjayKumar Padhy",
"designation": "Team Leader - SEO & Auto",
"image": "placeholder.jpg",
"about": "This is just test2"
},
{
"key": "ggc2",
"name": "Jignesh Shah",
"designation": "Asist. Manager",
"image": "placeholder.jpg",
"about": "This is just test2"
}
]
},
{
"key": "gc3",
"name": "Vaishakhi Phadke",
"designation": "Asst. Manager - NA Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2",
"child": [
{
"key": "ggc1",
"name": "Hassel Rathod",
"designation": "Team Manger - National",
"image": "placeholder.jpg",
"about": "This is just test2"
}
]
},
{
"key": "gc4",
"name": "Mitesh More",
"designation": "Training Team Manager",
"image": "placeholder.jpg",
"about": "This is just test2"
},
{
"key": "gc5",
"name": "Shrutika Jadhav",
"designation": "Manager - HR",
"image": "placeholder.jpg",
"about": "This is just test2"
},
{
"key": "gc6",
"name": "Tejinder Ossan",
"designation": "Manager - Facility",
"image": "placeholder.jpg",
"about": "This is just test2"
}
]
},
{
"key": "c2",
"name": "Bhavesh Chauhan",
"designation": "VP-Marketing Operations & IT",
"image": "../Images/Bhavesh-Chauhan-edit.jpg",
"about": "This is just test3"
},
{
"key": "c3",
"name": "Sanket Naik",
"designation": "VP-Marketing Operations & Graphics",
"image": "../Images/Sanket-Naik-edit.jpg",
"about": "This is just test4"
},
{
"key": "c4",
"name": "Ankanksha Narula",
"designation": "Sr. Manager - Finance",
"image": "../Images/Akansha-Narula-edit.jpg",
"about": "This is just test5"
},
{
"key": "c5",
"name": "Diju Kurup",
"designation": "Manager - Marketing Operations",
"image": "../Images/Diju-Kurup-edit.jpg",
"about": "This is just test6"
},
{
"key": "c6",
"name": "Arya Andrade",
"designation": "Manager - Facility",
"image": "../Images/Arya-Andrade-edit.jpg",
"about": "This is just test7"
}
]
}]

1. Place the images in your public/static directory and set the paths in the data accordingly:

"image": "/images/placekitten.jpg",

2. To render the hierarchy from data you may want to use a recursive component that renders the current element and then renders itself for each child. This produces a recursive structure to whatever depth your data is.

Might looks something like this:

export function Node({ item }) {
  return (
    {/* render the current item's name, etc. */}
    <div className="node">
      <div class="card">
        <img src={item.image} />
        <div className="name">{item.name}</div>
        <div className="designation">{item.designation}</div>
      </div>

      {item.child?.length && (
        <div className="children">
          {item.child.map((item) => (
            {/* render the children using this same component */}
            <Node key={item.key} item={item} />
          ))}
        </div>
      )}
    </div>
  );
}

Here's a live demo implementation on codesandbox using the component above with your data, producing the result in the screenshot below.

(You could of course modify it to only show the current selection or whatever. This is intended only as an example of the approach for illustrative purposes.)