How can I show my data with a parent child relationship with javascript?

const data = [
{ id: 1, text: 'hello', parent: null },
{ id: 2, text: 'hello2', parent: 1 },
{ id: 3, text: 'hello3', parent: 2 },
{ id: 4, text: 'where are u?', parent: null },
];

  function convertToTree(data: any) {
const tree: any = {};
data.forEach((item: any) => {
const parentId = item.parent;
if (!parentId) {
tree[item.id] = { ...item, children: [] };
} else {
if (!tree[parentId]) {
tree[parentId] = { children: [] };
}
tree[parentId].children.push({ ...item, children: [] });
}
});
return tree;
}
function TreeNode({ data }: any) {
const [isVisible, setIsVisible] = useState(false);
const handleClick = () => {
setIsVisible(!isVisible);
};
return (
<div>
<p onClick={handleClick}>{data.text}</p>
{isVisible && data.children && data.children.length > 0 && (
<ul>
{data.children.map((child: any) => (
<li key={child.id}>
<TreeNode data={child} />
</li>
))}
</ul>
)}
</div>
);
}

I want to show this data as perent-child depending on the parent data in the data using javascript-react.
rule1- when I click on the parent data I want to see the child data.
rule2- since every child can also be a parent, if a child has child data, I want to access its own child data when I click on the child.

But in the code I wrote, only when I click on the parent data, only the children come. As it appears in the data, the child data also has childi, but I cannot see them.

thank you for your help

This is what I have, basically your method of recursively adding nodes to the trees and then printing it

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
    { id: 1, text: 'hello', parent: null },
    { id: 2, text: 'hello2', parent: 1 },
    { id: 3, text: 'hello3', parent: 2 },
    { id: 4, text: 'where are u?', parent: null },
      ]
    }
  }
  
  transformToTree(data) {
  	const tree = {};
    
    //elems that have a parent but not in tree
    const invisibleParents = {};
    for(let node in data.items)
    {
    	if (!node.parent)
      {
      	//first node of tree
      	tree[node.id] = {...node, children: []};
        
        if (node.id in invisibleParents)
        {
        	tree[node.id].children.push(...invisibleParents[node.id]);
        	delete invisibleParents[node.id];
        }
        
        continue;
      }
      
      if (node.parent in tree)
      {
      	//directly add
        tree[node.parent].children.push(node);
      }
      else
      {
      	if (node.parent in invisibleParents)
        	invisibleParents[node.parent].push(node);
        else
        	invisibleParents[node.parent] = [node];
      }
    }
    
    return tree;
  }
  
  render() {
  const treeData = transformData(this.state.data);
    return (
        treeData.map(x => 
        {
        	return (<SmallComponent item={x} />)
        })
    )
  }
}

class SmallComponent extends React.Component
{
  constructor(props)
  {
  	super(props);
    this.state = {...props};
  }
  
	render() {
  item = this.state.item;
  return (
  <div>
  	  <p>
  	    {item.text}
        {item.children.length && 
        <ul>
          <li>
            {item.children.map(x => 
            (
            	<SmallComponent item={x} />
            ))}
          </li>  
        </ul>}
  	  </p>
  	</div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))