Create hierarchy of custom table data (parent-child) relation using Content tree in UI Builder

[PoojaPatil]

We have created a custom Zone table in ServiceNow that contains hierarchical data.
Each Zone record has a Parent field that references the same Zone table (self-referencing relationship), forming a parent-child hierarchy.

Example structure:

Zone
├─ Green Zone
│ └─ Child Green Zone
│ └─ Grandchild Green Zone
├─ Red Zone
└─ Blue Zone

We want to display this hierarchical Zone data in a tree format within a UI Builder (Now Experience) page to improve readability and navigation.
Current Status:
1. A UI Builder Experience has been created
2. A Page has been created inside the experience
3. A Tree component has been added. (content tree)

However, we are facing challenges in:
Configuring the data source correctly
Binding table data to the Tree component
Converting flat table records into a hierarchical tree structure
Ensuring parent-child relationships render properly
Could you please give us a step-by-step configuration to achieve this?

The version we are using is Vancouver