How to create 2-3 levels nested tree view arrow structure with object/array values in reactjs javascript?

Question

I tried to create a nested tree view structure but I got some output problem. when I try to add any extra child component in data.json file, it didn't reflect in the output. Viewer should be not be hardcoded (JSON data input ) & should not use 3rd party library for JSON Tree Viewer.

Below are the codes which I tried:

In app.js,

import './App.css';
import Division1 from './Division1';

function App() {
  return (
    <div>
     <Division1/>
    </div>
  );
}

export default App;

In division1 functional component,

import React, { useState } from 'react'
import data from "./data.json"
import { AiFillCaretRight } from "react-icons/ai";
import Division2 from './Division2';
import Division3 from './Division3';

function Division1() {

    const [first, setFirst] = useState(false)

    return (
        <div style={{ padding: "2.8rem" }}>
            <div style={{ "cursor": "pointer" }} >
                <h4>React Tree Viewer</h4>
                <AiFillCaretRight onClick={() => { first ? setFirst(false) : setFirst(true) }} />User1
                <ul style={{ listStyle: "none" }} >
                    {first ? data.map((e, index) => (
                        <li key={index}> ID : {index + 1} <br />  Name : {e.name} <br /> Email : {e.email} <br />
                            <span><Division2 /></span>
                            <span><Division3 /></span>
                        </li>
                    )) : ""}
                </ul>
            </div>
        </div>
    )
}

export default Division1

In division 2 functional component,

import React, { useState } from 'react'
import { AiFillCaretRight } from "react-icons/ai";
import data from "./data.json"

function Division2() {
    const [second, setSecond] = useState(false)
  return (
    <div>
          <AiFillCaretRight onClick={() => { second ? setSecond(false) : setSecond(true) }} />Job
          <ul style={{ listStyle: "none" }}>
              {second ? data.map((e, index) => (
                  <li key={index}> Designation: {e.job.role} <br /> Experience : {e.job.experience} </li>
              )) : ""}
          </ul>
    </div>
  )
}

export default Division2 

In division 3 functional component,

import React, { useState } from 'react'
import { AiFillCaretRight } from "react-icons/ai";
import data from "./data.json"

function Division3() {
    const [third, setThird] = useState(false)
  return (
    <div>
          <AiFillCaretRight onClick={() => { third ? setThird(false) : setThird(true) }} />location
          <ul style={{ listStyle: "none" }}>
              {third ? data.map((e, index) => (
                  <li key={index}>City : {e.location.city} <br/>
                  </li>
              )) : ""}
          </ul>
    </div>
  )
}

export default Division3

In data.json,

[
  {
    "id": 1,
    "name": "user1",
    "email": "[email protected]",
    "job": {
      "role": "Front end developer",
      "experience": "1 year"
    },
    "location": {
      "city": "Chennai"
    }
  }
]

OUTPUT:

In data.json, if I add any child components like location or job which I have used in the json file code, it should automatically added to the UI and if I select that, It should expand and show it details in the web page.

Can anyone clarifies my doubt? Thanks in Advance.