[jabbascript]

Здравствуйте!!!
Кто может подсказать как обойти секцию в компоненте Node с useEffect, useRef(говорят эта связка противоречит философии реакта), но как тогда мне определить рутовый компонент в дереве и ноды которые являются последними? Как получать доступ к li без ref?

export const ShowTree = () => {
    const [tree, setTree] = useState([])
    console.log('rerender tree', tree)
 
    useEffect(() => {
        async function loadTree(){
            const response = await getTree()
            setTree(JSON.parse(response))
        }
        loadTree()
    }, [])
 
    return <Tree data={tree} />
 
}
 
 
const Node = ({node}) => {
    
    const hasChildrens = node.childrens ? true : false
    const classesNode = ['node','expandOpen']
    const nodeTag = React.useRef(null);
 
    const handleExpand = (e) => {
        e.stopPropagation()
         const target = e.target
         console.log('click', target)
    }
 
    useEffect(() => {
        const isRoot = nodeTag?.current?.parentNode?.parentNode.tagName !== 'LI' ? 
        nodeTag.current.classList.add('isRoot') : 
        null
        const isLast = nodeTag.current.nextSibling ? null : nodeTag.current.classList.add('isLast')
        console.log('next', nodeTag.current.nextSibling)
    }, [])
    
    return(
        <>
            <li
                ref={nodeTag}
                className={classesNode.join(' ')}
            >
                <div className="expand-container">
                    <div className="expand" onClick={handleExpand}></div>
                    <div className="content">{node.name}</div>
                </div>
                {
                    hasChildrens && (
                        <Tree data={node.childrens} />
                    )
                }
            </li>
        </>
    )
    
}
 
const Tree = ({data}) => {
    return(
        <>
            <ul className="tree-container">
                {
                    data?.map(el => {
                        return(
                            <Node node={el} />
                        )
                    })
                }
            </ul>
        </>
    )
    
}