refactor: make small changes in TreeNode

src/components/tree/TreeNode.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, MouseEvent, useState } from 'react'
+import { FC, MouseEvent, useState } from 'react'
 
 import { useTree } from '@/contexts/TreeContext'
 
@@ -13,21 +13,19 @@ const TreeNode: FC<TreeNodeProps> = ({ node }) => {
   const [isExpanded, setIsExpanded] = useState(false)
   const { onSelect, getChildren } = useTree()
 
-  const itemRef = useRef(null)
-
   async function handleNodeClick(e: MouseEvent<HTMLElement>) {
     e.preventDefault()
 
     if (!hasChildren) {
       node.children = [...await getChildren(node)]
-      setHasChildren(true)
+      if (node.children.length > 0) setHasChildren(true)
     }
 
     if (node.children.length > 0) {
       toggleExpand()
       return
     }
-    
+
     onSelect(node, e.target)
   }
 
@@ -47,7 +45,7 @@ const TreeNode: FC<TreeNodeProps> = ({ node }) => {
       ))}
     </div>
 
-  return <div ref={itemRef}
+  return <div
     className="t-mb-1 t-py-[2px] t-px-2 hover:t-bg-gray-100 hover:t-cursor-pointer hover:t-rounded-md"
     onClick={(e) => handleNodeClick(e)}>{node.label}</div>
 }