我有一个来自api的数据，如何在react中以树的形式显示它

import React, { useEffect, useState } from 'react';

const TreeNode = ({ node }) => {
  const [expanded, setExpanded] = useState(false);

  const handleToggle = () => {
    setExpanded(!expanded);
  };

  if (node.children && node.children.length > 0) {
    return (
      <div>
        <span onClick={handleToggle}>{expanded ? '-' : '+'}</span>
        {node.name}
        {expanded && node.children.map((child) => <TreeNode key={child.id} node={child} />)}
      </div>
    );
  } else {
    return <div>{node.name}</div>;
  }
};

const TreeView = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 发送网络请求获取数据并存储到data状态变量中
    fetch('https://example.com/api/data')
      .then((response) => response.json())
      .then((responseData) => setData(responseData));
  }, []);

  return (
    <div>
      {data.map((node) => (
        <TreeNode key={node.id} node={node} />
      ))}
    </div>
  );
};

export default TreeView;