Replace JSON with Firebase Firestore Data on ReactJS

Question

I'm learning React JS and I'm studying the library called react-d3-tree, which allows me to display hierarchical data in the form of a family tree.

In the documentation of the library they use a const named "orgChart" with the data that will be used by the family tree component.

Attached is a photo of the example that the library documentation gives you.

import React from 'react';
import Tree from 'react-d3-tree';

// This is a simplified example of an org chart with a depth of 2.
// Note how deeper levels are defined recursively via the `children` property.
const orgChart = {
  name: 'CEO',
  children: [
    {
      name: 'Manager',
      attributes: {
        department: 'Production',
      },
      children: [
        {
          name: 'Foreman',
          attributes: {
            department: 'Fabrication',
          },
          children: [
            {
              name: 'Worker',
            },
          ],
        },
        {
          name: 'Foreman',
          attributes: {
            department: 'Assembly',
          },
          children: [
            {
              name: 'Worker',
            },
          ],
        },
      ],
    },
  ],
};

export default function OrgChartTree() {
  return (
    // `<Tree />` will fill width/height of its container; in this case `#treeWrapper`.
    <div id="treeWrapper" style={{ width: '50em', height: '20em' }}>
      <Tree data={orgChart} />
    </div>
  );
}

What I want to do is replace that "const orgChart" with data from my Firebase Firestore.

I have created some collections in my firestore with similar data as the orgChart, however when I bring the data from my firestore and replace the data={} that has the family tree component with my data from my firestore, it just doesn't seem to work. How can I use the data from my firestore with my family tree component?

I will attach some photos of my firestore collections :)

And inside children collection...

Edit: Here is how I tried to pass my firestore data to the family tree component.

import React, { useCallback, useEffect, useState } from 'react'
import Tree from 'react-d3-tree';
import './App.css'

import { db } from './firebase'
import { collection, getDocs } from "firebase/firestore";

function App() {

  useEffect(() => {
    handleData()
  }, [])

  const [datos, setDatos] = useState("")

  const handleData = useCallback(async() => {
    const querySnapshot = await getDocs(collection(db, "chart"));

    querySnapshot.forEach((doc) => {
      setDatos(doc.data());
    });
  })

  return (
    <div className='App'>
        <Tree data={datos} />
    </div>
  )
}

export default App