Button inside mat-expansion-panel doesn't recognize first click

I'm using a mat-expansion-panel which shows all versions of a product (wrapped in a table) If I click (first click) on the td-Element which is the actual latest version of a product, it routes to the right route

If I click on the <button(s)> I need to click twice to get routed.

Tried to replace the buttons with divs/spans whatever. Doesn't work.

Hope I described the problem well enough aaaand thanks for your answers!

<ng-container matColumnDef="title">
  <th  mat-header-cell class="bg-coldgray-100 " *matHeaderCellDef id="title" mat-sort-header><strong>Titel</strong></th>
  <td [routerLink]="[getUrlByItemType(item.type) + getLatestId(item.versions)]" mat-cell *matCellDef="let item let last = last" appLoadOnScroll [last] ="last" (visibleEvent)="loadProducts($event)">
    <mat-expansion-panel (click)="test()" hideToggle [expanded]="expandedRows[item.id]" >
      <mat-expansion-panel-header>
        {{item.title}}
      </mat-expansion-panel-header>
      <button [routerLink]="getUrlByItemType(item.type) + getKeyAndValueFromObjectAtFirstIndex(version).id" class="mt-4 cursor-pointer block" *ngFor="let version of getVersionsArray(item.versions)">
      {{item.title}}
      </button>
    </mat-expansion-panel>
  </td>
</ng-container>