(En React.js) Quiero crear un padre, cuando hago clic en el padre, debe abrir un hijo y cuando hago clic en ese hijo, debe abrir otro hijo con el primero y continúa incluso cuando hago clic en el padre una vez más. debe abrir un niño (Separar uno).

 ***App.tsx*** import React, { useCallback, useState } from 'react'; import './App.css'; import { FileNode, root } from './data'; const File: React.FC<FileNode> = ({ id, children }: FileNode) => { const [showChildren, setShowChildren] = useState<boolean>(false); const handleClick = useCallback(() => { setShowChildren(!showChildren); }, [showChildren, setShowChildren]) return ( <div> <span onClick={handleClick}> <h4 style={{ fontWeight: showChildren ? 'bold' : 'normal' }}>{id}</h4> {/* <h3 style={{fontWeight: showSubChildren? 'italic' : 'normal'}}>{subChildren}</h3> */} </span> <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', left: 25, borderLeft: '1px solid', paddingLeft: 15 }}> {showChildren && (children ?? []).map((node: FileNode) => <File {...node}/>)} </div> </div> ) } function App() { return ( <div style={{ marginLeft: 15 }}> <File {...root}/> </div> ); } export default App;

 *****data.ts***** import { Children } from "react"; export interface FileNode { id: string children?: FileNode[] // subChildren?: string } export const root: FileNode = { id: "Computer", children: [{ id: "Information", children: [{ id: "Software", children: [{ id: "Hardware",children:[{id: "Mouse",children:[{id: "keyboard", children:[{id: "USB", children:[{id: "Touch Pen",children:[{id: "CD ROM", children:[{id: "Combo CD DVD",children:[{id: "Screen",children:[{id: "LCD", children:[{id: "LED", children:[{id: "CPU", children:[{id: "WebCam", children:[{id: "RAM", children:[{id: "SSD", children:[{id: "Graphic Card", children:[{id: "WiFi Card", children:[{id: "Gaming Card", children:[{id: "Linux", children:[{id: "Ubuntu",}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}, ]}] }, ] }