Schema Node - Copy this React, Tailwind Component to your project

Create a React component for visualizing a hierarchical schema structure. The component should display data in a tree like format, where each node represents a schema element, such as a table, field, or reference. Node Structure: Each node should have a label representing the name of the schema element (e.g., table name, field name). Nodes can optionally include an icon next to the label to indicate the type of schema element: A key icon for primary key fields. A connection or link icon for reference fields or relationships between schema elements. Nodes should be expandable or collapsible: Display a chevron (arrow) icon next to nodes that have children. Clicking on the chevron should toggle between expanded (downward facing chevron) and collapsed (right facing chevron) states. Hierarchy and Nesting: The component should support an arbitrary number of levels in the hierarchy. The root node represents the main schema entity (e.g., a database or a collection). Each node can have any number of child nodes, representing the nested elements within the schema (e.g., fields within a table or nested tables). Use indentation to visually represent the nesting of child nodes under their parent nodes. Dynamic Data Handling: The component should accept a dynamic data structure via props that defines the hierarchy of schema elements. It should automatically render the tree structure based on the data provided, including any nested child elements. Interactivity: Nodes should be clickable to expand or collapse their children. The component should maintain the expanded/collapsed state of each node. Also i want vertical lines to give a schema like feeling.