reactjs - Reactアプリケーションでreactflowの展開と折りたたみ機能を実装する方法

私は react アプリケーションで react-flow の子ノードを展開および折りたたむ機能を実装しようとしています。ノードとエッジの hidden プロパティを使用して非表示にしようとしました。

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

しかし、この実装では id プロパティに 'hidden' というテキストがあるかどうかをチェックして、それを非表示にします。しかし、私は親ノードがクリックされたときに子ノード全体とエッジを非表示にしたいです。また、グループ要素を作成してその中に子ノードを配置することも試しました。

onNodeClick プロパティは現在のノードを返し、さらに getOutgoers() と getConnectedEdges() によって、すべての出力ノードと接続されたエッジも返します。

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);
};

親ノードをクリックしたときに子ノードやエッジを非表示にする、よりクリーンな方法を探しています。何か助けや提案があればありがたいです。現時点までのコードはCodeSandboxにあります。