如何在react中以树的形式显示来自API的注释？

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

const CommentTree = ({ comments }) => {
  return (
    <ul>
      {comments.map(comment => (
        <li key={comment.id}>
          {comment.content}
          {comment.children.length > 0 && (
            <CommentTree comments={comment.children} />
          )}
        </li>
      ))}
    </ul>
  );
};

const App = () => {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    // 从API获取注释数据
    fetch('api/comments')
      .then(response => response.json())
      .then(data => setComments(data));
  }, []);

  return (
    <div>
      <h1>注释树</h1>
      <CommentTree comments={comments} />
    </div>
  );
};

export default App;