كيفية عرض محتوى ملف JSON في React.js؟

السلام عليكم ،

انا اتعلم حاليا ReactJs و احتاج مساعدتكم ، اريد ان اعرض البيانات من ملف Persons.json في جدول مكون من ثلاثة اعمدة ( treeview table,collapse) كما هو موضح في الصورة المرفقة.

كيف يمكنني استعراض البيانات من ملف  Persons.json في الجدول كما في الصورة ارجو المساعدة

كود ملف App.js 

import React, { Component } from "react";

import Persons from "./Persons";

export class App extends Component {
  render() {
    return (
      <>
        <div>
          <table border="2">
            <tbody>
              <tr>
                <th>Column1</th> <th>Column2</th> <th>Column3</th>
              </tr>
              {Persons.persons.map((item, i) => (
                <tr key={(i = "1")}>
                  <td>{item.name}</td> <td>{item.name}</td> <td>{item.name}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </>
    );
  }
}
export default App;

و هنا ملف بياناتات Persons.json

{
  "persons": [
    {
      "id": "1",
      "name": "Anna",
      "children": [
        {
          "id": "1.1",
          "name": "Mary",
          "children": [
            {
              "id": "1.1.1",
              "name": "Tim"
            },
            {
              "id": "1.1.2",
              "name": "Bob"
            }
          ]
        },
        {
          "id": "1.2",
          "name": "Max",
          "children": [
            {
              "id": "1.2.1",
              "name": "Mark"
            }
          ]
        }
      ]
    },
    {
      "id": "2",
      "name": "Jack",
      "children": [
        {
          "id": "2.1",
          "name": "Tia"
        },
        {
          "id": "2.2",
          "name": "Carla"
        }
      ]
    },
    {
      "id": "3",
      "name": "David",
      "children": [
        {
          "id": "3.1",
          "name": "Sara"
        },
        {
          "id": "3.2",
          "name": "Ralf"
        }
      ]
    }
  ]
}