How to add branch lines to angular material table?

Question

I am working on a UI (using Angular 10), where I have to show hierarchical structure inside a mat table. The HTML code is using mat table to show the data, and all of the logic is written in flat mat tree (ts file).

Link: The Code I am working on (StackBlitz)

The UI needs the branch lines shown in this pic Branch Representation Picture

The HTML file code:

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef>
    <span [style.paddingLeft.px]="40"> Name </span>
  </th>
  <td mat-cell *matCellDef="let data">
    <button
      mat-icon-button
      [style.visibility]="!data.expandable ? 'hidden' : ''"
      [style.marginLeft.rem]="data.level * 2"
      (click)="treeControl.toggle(data)"
      id="toggler"
    >
      <mat-icon class="mat-icon-rtl-mirror">
        {{ treeControl.isExpanded(data) ? 'expand_more' : 'chevron_right' }}
      </mat-icon>
    </button>
    {{ data.name }}
  </td>
</ng-container>

<ng-container matColumnDef="partof">
  <th mat-header-cell *matHeaderCellDef>Part of</th>
  <td mat-cell *matCellDef="let data">
    <div [style.marginLeft.rem]="data.level * 2" class="w-100 node-values">
      {{ data.partOf }}
    </div>
  </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

ts file code:

import { Component, VERSION } from '@angular/core';
import { FlatTreeControl } from '@angular/cdk/tree';
import {
  MatTreeFlatDataSource,
  MatTreeFlattener,
} from '@angular/material/tree';


interface CarNode {
  name: string;
  partOf: string;
  children?: CarNode[];
}

const TREE_DATA: CarNode[] = [
  {
    name: 'USA',
    partOf: 'America',
    children: [
      {
        name: 'California',
        partOf: 'USA',
        children: [
          { name: 'Los Angeles', partOf: 'California' },
          { name: 'San Diego', partOf: 'California' },
        ],
      },
      {
        name: 'Georgia',
        partOf: 'USA',
        children: [{ name: 'Atlanta', partOf: 'Georgia' }],
      },
      {
        name: 'New York',
        partOf: 'USA',
        children: [
          {
            name: 'New York City',
            partOf: 'New York',
            children: [
              { name: 'Queens', partOf: 'New York City' },
              { name: 'Brooklyn', partOf: 'New York City' },
            ],
          },
          { name: 'Ithaca', partOf: 'New York' },
        ],
      },
    ],
  },
  {
    name: 'UK',
    partOf: 'Europe',
    children: [
      { name: 'England', partOf: 'UK' },
      { name: 'Scotland', partOf: 'UK' },
      { name: 'Wales', partOf: 'UK' },
      { name: 'Northern Ireland', partOf: 'UK' },
    ],
  },
];

/** Flat node with expandable and level information */
interface ExampleFlatNode {
  expandable: boolean;
  name: string;
  partOf: string;
  level: number;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  displayedColumns: string[] = ['name', 'partof'];
  private _transformer = (node: CarNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      partOf: node.partOf,
      level: level,
    };
  };

  treeControl = new FlatTreeControl<ExampleFlatNode>(
    (node) => node.level,
    (node) => node.expandable
  );

  treeFlattener = new MatTreeFlattener(
    this._transformer,
    (node) => node.level,
    (node) => node.expandable,
    (node) => node.children
  );

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  constructor() {
    this.dataSource.data = TREE_DATA;
  }

  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
}

css code

table {
  width: 100%;
  background-color: #fcf7f7;
  border-collapse: separate;
}

.mat-cell {
  border: none !important;
  padding-left: 0rem !important;
}

How to achieve branch lines in this particular mat table?

Note: Only mat table in selector is to be used, and only mat flat tree is to be used in ts file. I have seen lots of example of branch lines in mat nested tree but here only mat flat tree is required.

Reference Links: The Code I am working on (StackBlitz), The UI needs the branch lines shown in this pic Branch Representation Picture