Mat table expandable rows doesn't work with mat sort Angular 10

When i sort a column of my mat-table i can no longer extend my rows only about one in two still works. While everything works fine when no sorting is done. I came across this link : https://github.com/angular/components/issues/11990#issuecomment-421075196 but that doesn't solve anything at all

component.html :

            <td mat-cell class="expandable-row" *matCellDef="let element" [attr.colspan]="displayedColumns.length">
                <div *ngIf="element.codeTicket === expandedSymbol" class="container">
                    <div class="row">
                        <div class=" col-md-1"></div>
                        <div class=" col-md-10">
                            <mat-card >
                                <p style="white-space: pre-wrap;"><span class="badge badge-pill badge-light" id="badge">Description :</span>{{element.description}}</p>
                                <div>
                                    <mat-chip-list #chipList aria-label="Mots Clés">
                                        <span class="badge badge-pill badge-light" id="badge">Label :</span>
                                        <mat-chip *ngFor="let mot of element.motCles" matTooltip="{{mot.categorie.libelle}}"
                                                  [ngClass]="{'secondClass': mot.codeCategorie === 1,'firstClass': mot.codeCategorie === 2,'thirdClass': mot.codeCategorie === 3,'quatriemeClass': mot.codeCategorie === 4,'cinquiemeClass': mot.codeCategorie === 5,'sixiemeClass': mot.codeCategorie === 6,'spetiemeClass': mot.codeCategorie === 7 }">{{mot.libelle}}</mat-chip>
                                    </mat-chip-list>
                                </div>
                            </mat-card>
                        </div>
                    </div>
                </div>
            </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
            (click)="toggleExpandableSymbol(row.codeTicket)" [ngClass]="{'make-higlight': row.dateCloture !== null}"></tr>
        <tr mat-row
            *matRowDef="let row; columns: ['expandedDetail'];"
            [@detailExpand]="row.codeTicket === expandedSymbol ? 'expanded' : 'collapsed'">
        </tr>
    </table>
    <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>

component.ts :

@Component({
    ...,
    animations: [detailExpand]
})

expandedSymbol: number = null;

toggleExpandableSymbol(symbol: number): void {
        console.log(symbol)
        this.expandedSymbol = this.expandedSymbol === symbol
            ? null
            : symbol;
       

    }

detailExpand.animation.ts :

export const detailExpand = trigger('detailExpand',
    [
        state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),
        state('expanded', style({ height: '*' })),
        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ]);

already several hours that I am the above I am interested for any help or advice