I am working on a new Word add-in using the JS API. I'm trying to put together a tree with checkboxes in one of the panes, but the checkboxes are looking weird:

as you can see there are two sets of boxes, and when I check one of them there's a double check mark. I'm not sure why this is as I followed the instructions here: https://material.angular.io/components/tree/examples

This is what my html looks like:

<mat-tree [dataSource]="dataTree" [treeControl]="treeControl" multiTemplateDataRows> 
    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
        <button
          mat-icon-button
          matTreeNodeToggle
          [attr.aria-label]="'Toggle ' + node.item"
        >
          <mat-icon class="mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        <mat-checkbox
          [checked]="test(node)"
          [indeterminate]="test(node)"
          (change)="test(node)"
          >{{node.name}}</mat-checkbox
        >
      </mat-tree-node>
</mat-tree>

I have this reference to the material stylesheet in my index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

And lastly I have the following imports:

import { MatTreeModule } from "@angular/material/tree";
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';

Any idea why its rendering so weird? Also you will notice a grey area around the "chevron" icon. In the sample I found online it seems that the circle only appears when you click on the chevron icon to expand, but in practice it seems to always be there.

Is this a limitation of the Word API?