how to active toggle node in d3.js collapsed force simulation

Question

i have a code with collapsed force simulation with toggle click nodes but i dont want toggle click nodes i want only active toggle with perticular node

Here is my data

  const data = {
  name: "flare",
  children: [
    /*from  w w w . d  e  m  o  2s  .co m*/
    {
      name: "analytics",
      children: [
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
      ],
    },
    {
      name: "analytics",
      children: [
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
      ],
    },
    {
      name: "analytics",
      children: [
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
      ],
    },
    {
      name: "analytics",
      children: [
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
      ],
    },
    {
      name: "analytics",
      children: [
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
      ],
    },
    {
      name: "analytics",
      children: [
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
      ],
    },
    {
      name: "analytics",
      children: [
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
      ],
    },
    {
      name: "analytics",
      children: [
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
        { name: "testera1" },
      ],
    },
  ],
};

Here is my full working code

import React from "react";
import { data } from "../components/CollapsedFGLData";
import * as d3 from "d3";
const CillapsedFLG = () => {
  console.log(data);
  const collapsedFLGRef = React.useRef(null)

  React.useEffect(() => {
    var width = 700,
      height = 500,
      root;
    const simulation = d3
      .forceSimulation()
      .force(
        "link",
        d3
          .forceLink()
          .id(function (d) {
            return d.id;
          })
          .distance(100)
          .strength(2)
      )
      //   .force("collide", d3.forceCollide())

      .force("charge", d3.forceManyBody().distanceMin(0).distanceMax(4000))
      .force("center", d3.forceCenter())

      .on("tick", tick);

    var svg = d3
      .select(collapsedFLGRef.current)
      .append("svg")
      .attr("width", width)
      .attr("height", height)

      .attr("stroke", "black")
      .attr("viewBox", [-width / 2, -height / 2, width, height])
      .attr("fill", "gray");
    var link = svg.selectAll(".link"),
      node = svg.selectAll(".node");
    root = d3.hierarchy(data);
    function collapse(d) {
      if (d.children) {
        d._children = d.children;
        d._children.forEach(collapse);
        d.children = null;
      }
    }
    function collapseAll() {
      //   collapse(root);
      root.children.forEach(collapse);
      update();
    }
    update();
    collapseAll();
    function update() {
      const nodes = flatten(root);
      const links = root.links();

      link = svg.selectAll(".link").data(links, function (d) {
        return d.target.id;
      });

      link.exit().remove();

      const linkEnter = link
        .enter()
        .append("line")
        .attr("class", "link")
        .style("stroke", "#000")
        .style("opacity", "0.2")
        .style("stroke-width", 2)
        .style("stroke-dasharray", "5,5"); //dashed array for line

      link = linkEnter.merge(link);

      node = svg.selectAll(".node").data(nodes, function (d) {
        return d.id;
      });

      node.exit().remove();

      const nodeEnter = node
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("stroke", "#666")
        .attr("stroke-width", 2)
        .style("fill", color)
        .style("opacity", 1)
        .on("click", click)
        .call(drag(simulation));
      //   console.log(node._groups[0]);
      //   console.log(data);

      nodeEnter
        .filter((d, i) => i === 48)
        .append("circle")
        .attr("r", 10)
        .style("text-anchor", function (d) {
          return d.children ? "end" : "start";
        });
      nodeEnter
        .filter((d, i) => i !== 48)
        .append("circle")
        .attr("r", 10)
        // .attr("cx", -40)
        .attr("fill", "#e8fadc")
        .style("stroke", "#8ee556")
        .style("stroke-width", 2);

      node = nodeEnter.merge(node);
      simulation.nodes(nodes);
      simulation.force("link").links(links);
    }

    function drag(simulation) {
      function dragstarted(d) {
        if (!d.active) simulation.alphaTarget(1).restart();
        d.subject.fx = d.subject.x;
        d.subject.fy = d.subject.y;
      }

      function dragged(d) {
        d.subject.fx = d.x;
        d.subject.fy = d.y;
      }

      function dragended(d) {
        if (!d.active) simulation.alphaTarget(0);
        d.subject.fx = null;
        d.subject.fy = null;
      }

      return d3
        .drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended);
    }

    function tick() {
      link
        .attr("x1", function (d) {
          return d.source.x;
        })
        .attr("y1", function (d) {
          return d.source.y;
        })
        .attr("x2", function (d) {
          return d.target.x;
        })
        .attr("y2", function (d) {
          return d.target.y;
        });
      node.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
      });
    }
    function color(d) {
      return d._children
        ? "#3182bd" // collapsed package
        : d.children
        ? "#c6dbef" // expanded package
        : "#fd8d3c"; // leaf node
    }
    // Toggle children on click.
    function click(event, t) {
      if (event.defaultPrevented) return; // ignore drag
      //   console.log(event.target.__data__.id);
      //   console.log(t.id);
      //   ==============================================================
      if (t.children) {
        t._children = t.children;
        t.children = null;
      } else {
        t.children = t._children;
        t._children = null;
      }
      //   node._groups[0].map((el) => console.log(el));

      //   node.filter((d, i) =>
      //     d.id === t.id ?
      //     if (t.children) {
      //             t._children = t.children;
      //             t.children = null;
      //             console.log(t._children);
      //             console.log(t.children);
      //           } else {
      //             t.children = t._children;
      //             t._children = null;
      //           }
      //          : (t._children = null)
      //   );

      //   if (event.target.__data__.id !== t.id) {
      //     t.children = t._children
      //     console.log(t.children);
      //     t._children = null;
      //   } else {
      //     t._children = null;
      //     t.children = t._children;
      //     console.log(t._children);
      //   }
      // ===================================================================
      // console.log("else loop");
      //   }
      update();
    }
    // Returns a list of all nodes under the root.
    function flatten(root) {
      var nodes = [],
        i = 0;
      function recurse(node) {
        if (node.children) node.children.forEach(recurse);
        if (!node.id) node.id = ++i;
        nodes.push(node);
      }
      recurse(root);
      return nodes;
    }
  });
  return <div ref={collapsedFLGRef}></div>;
};

export default CillapsedFLG

I dont want like the above image, if i click one node that node should be shown and previous nodes should be hidden state

Here im trying with onclick with active toggle but is not working with my logic

   function click(event, t) {
      if (event.defaultPrevented) return; // ignore drag
       if (event.target.__data__.id !== t.id) {
        t.children = t._children;
        console.log(t.children);
        t._children = null;
      } else {
        t._children = null;
        t.children = t._children;
        console.log(t._children);
      }
     
      update();
    }

if anyone gives the solution for this question is so much appreciatable