[ksa]

Вот, вполне себе, рабочий тестовый пример... На нем и можно будет потренироваться.
Чего ты в итоге хотел?

import React,{useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import './index.css';


 
const Node = ({node}) => {
    const childrens = node.childrens ? <Tree data={node.childrens} /> : ''
    const classesNode = ['node', 'expandOpen']
 
    const handleExpand = (e) => {
		e.stopPropagation()
		const target = e.target
		console.log('click', target)
    }
    
    return (
		<li	className={classesNode.join(' ')}>
			<div className="content" onClick={handleExpand}>{node.name}</div>
			{childrens}
		</li>
    )
    
}
const Tree = ({data}) => {
    return (
		<ul className="tree-container">
			{
				data.map(el => {
					return (
						<Node key={el.id} node={el} />
					)
				})
			}
		</ul>
    )
    
}
const ShowTree = () => {
    const [tree, setTree] = useState([])
    console.log('rerender tree', tree)
 
    useEffect(() => {
		setTimeout(() => setTree([
			{name: 'Item 0', id: 0},
			{
				name: 'Item 1', 
				id: 1,
				childrens: [
					{name: 'Item 1 0', id: '1, 0'},
					{name: 'Item 1 1', id: '1, 1'},
					{name: 'Item 1 2', id: '1, 2'},
				]
			},
			{name: 'Item 2', id: 2},
		]), 1000)
    }, [])
 
    return <Tree data={tree} />
 
}
 
ReactDOM.render(
	<ShowTree />,
	document.getElementById('root')
);