reactjs - Hur man implementerar expandera och kollapsa-funktionalitet i reactflow i en React-applikation

Jag försöker implementera utvidgning och kollaps av underordnade noder i react-flow i en react-applikation. Jag har försökt använda hidden-egenskapen för noder och kanter för att dölja dem.

 const hide = (hidden: boolean) => (nodeOrEdge: any) => {
  const value = nodeOrEdge.id.includes("hidden");
  if (value) {
    nodeOrEdge.hidden = hidden;
  }
  return nodeOrEdge;
  };

Men denna implementation kontrollerar texten 'hidden' i id-egenskapen och döljer den. Men jag vill dölja hela barnnoder och kanter när föräldranoden klickas. Har också försökt skapa ett groupelement och placerat barnnoder inuti det.

Egenskapen onNodeClick returnerar den aktuella noden och även getOutgoers() och getConnectedEdges() alla utgående noder och anslutna kanter.

const onNodeClick = (_: ReactMouseEvent, node: Node) => {
    console.log("clicked node", node);
    let n = getOutgoers(node, nodes, edges);
    let e = getConnectedEdges(nodes, edges);
    console.log("All outgoing node", n);
    console.log("All connected edges", e);
};

Jag försöker hitta ett renare sätt att dölja barnnoder om man klickar på en föräldranod som har barnnoder och kanter. All hjälp eller förslag skulle vara till nytta. Koden hittills finns på codesandbox