tree view component

import React, { useState } from "react";
import { FaChevronDown, FaChevronRight } from "react-icons/fa";

const TreeNode = ({ node }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggle = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className="">
      <div
        onClick={handleToggle}
        className="flex items-center px-4  group rounded-md hover:text-blue-600 hover:bg-blue-200 text-base font-serif">
        {Object.keys(node).length > 1 ? (
          <span className="mr-2 text-xs ">
            {isExpanded ? <FaChevronDown /> : <FaChevronRight />}
          </span>
        ) : (
          <span className="ml-5"></span>
        )}
        {node.name}
      </div>
      {isExpanded && (
        <div className="ml-5 ">
          {Object.keys(node).map((key) => {
            if (Array.isArray(node[key])) {
              return node[key].map((child) => (
                <TreeNode key={child.name} node={child} />
              ));
            }
            return null;
          })}
        </div>
      )}
    </div>
  );
};

// Define the Tree component
const Tree = ({ data }) => {
  return (
    <div className="">
      {data.map((node) => (
        <TreeNode key={node.id} node={node} />
      ))}
    </div>
  );
};

const states = [
  {
    name: "Gujarat",
    districts: [
      {
        name: "Surat",
        cities: [
          {
            name: "varachha",
            area: [
              { name: "yogivhowk" },
              { name: "varachha" },
              { name: "puna" },
            ],
          },
          {
            name: "kamrej",
            area: [{ name: "tapi" }, { name: "choryashi" }],
          },
        ],
      },
      { name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] },
    ],
  },
  {
    name: "Rajasthan",
    districts: [
      {
        name: "Surat",
        cities: [
          {
            name: "varachha",
            area: [
              { name: "yogivhowk" },
              { name: "varachha" },
              { name: "puna" },
            ],
          },
          {
            name: "kamrej",
          },
        ],
      },
      { name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] },
    ],
  },
  {
    name: "Bihar",
    districts: [
      {
        name: "Surat",
        cities: [
          {
            name: "varachha",
            area: [
              { name: "yogivhowk" },
              { name: "varachha" },
              { name: "puna" },
            ],
          },
          {
            name: "kamrej",
          },
        ],
      },
      { name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] },
    ],
  },
  {
    name: "delhi",
    districts: [
      {
        name: "Surat",
        cities: [
          {
            name: "varachha",
            area: [
              { name: "yogivhowk" },
              { name: "varachha" },
              { name: "puna" },
            ],
          },
          {
            name: "kamrej",
          },
        ],
      },
      { name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] },
    ],
  },
];

function App() {
  return (
    <div className="flex flex-col w-60 h-96 border border-gray-300 rounded-md p-4 m-auto mt-52 overflow-y-scroll bg-blue-50">
      <Tree data={states} />
    </div>
  );
}

export default App;