Self recursive React Component

TreeList.js

import React, { useState } from "react";
import "./style.css";

import TreeListItem from "./TreeListItem";

const STATIC_DATA = [
  { label: "Label A", isOpen: true },
  { label: "Label B", isOpen: true },
  { label: "Label C", isOpen: false },
  { label: "Label D", isOpen: true },
  { label: "Label E", isOpen: true },
  { label: "Label F", isOpen: false },
  { label: "Label G", isOpen: true }
];

const STATIC_CHILD = [
  { label: "Child A", isOpen: false },
  { label: "Child B", isOpen: false },
  { label: "Child C", isOpen: false },
  { label: "Child D", isOpen: false }
];

export default function TreeList() {
  const [data, setData] = useState(STATIC_DATA);

  return (
    <ul>
      {data.map((item, index) => (
        <TreeListItem key={index} label={item.label} children={STATIC_CHILD} />
      ))}
    </ul>
  );
}

TreeListItem.js

import React, { useState } from "react";

const TreeListItem = ({ label, children }) => {
  const [isOpen, setOpen] = useState(false);

  return (
    <>
      {isOpen ? (
        <li>
          {label}
          <ul>
            {children.map((child, index) => (
              <TreeListItem
                key={index}
                label={child.label}
                children={children}
              />
            ))}
          </ul>
        </li>
      ) : (
        <li>
          {label} <button onClick={() => setOpen(!isOpen)}>Load</button>
        </li>
      )}
    </>
  );
};

export default TreeListItem;