How to close one Expansion Panel when the other is opened(Angular Mat)?

I'm trying to close one expansion panel when the other is opened. I know that by default it's set to multi="false" and it works absolutely fine with multiple expansion panel used inside one accordion but I'm only using one panel and I couldn't find a way to make it work. I'm still a newbie.

Image on this link

HTML Code:

<mat-accordion>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <div
        class="col text-center"
        [ngClass]="{
          'text-green': transactionDTO.txn_type == 'CREDIT',
          'text-red': transactionDTO.txn_type == 'DEBIT',
          'text-cyan': transactionDTO.txn_type == 'WITHDRAWAL'
        }"
      >
        {{ transactionDTO.txn_type }}
      </div>
      <div class="col text-center" style="font-size: 20px;">
        {{ transactionDTO.created_date | date: "dd-MMM-yyyy" }}
      </div>
      <div class="text-center col-xl">
        {{ transactionDTO.txn_status }}
      </div>
      <div class="col text-center" style="font-size: 20px;">
        <span
          [ngClass]="{
            'text-green': transactionDTO.txn_type == 'CREDIT',
            'text-red': transactionDTO.txn_type == 'DEBIT',
            'text-cyan': transactionDTO.txn_type == 'WITHDRAWAL'
          }"
          ><ng-container
            *ngIf="
              transactionDTO.txn_type == 'WITHDRAWAL' ||
                transactionDTO.txn_type == 'DEBIT';
              else credit
            "
            >-</ng-container
          ><ng-template #credit>+</ng-template
          >{{ transactionDTO.txn_amount | currency: "USD":"":"1.2-2" }}</span
        >
      </div>
      <div class="col text-center" style="font-size: 20px;">
        {{ transactionDTO.final_amount | currency: "USD":"":"1.2-2" }}
      </div>
      <div
      class="col text-center downarrow"
      [ngClass]="{ arrow: showHistory }"
      (click)="fetchHistoryDetails()"
    >
      {{
        transactionDTO.payment_method == "Wire transfer"
          ? transactionDTO.txn_id
          : transactionDTO.payment_method
      }}
    </div>
        </mat-expansion-panel-header>
        <mat-panel-description>
        <div
          class="row detailsRow no-gutters justofy-content-around align-items-center"
          *ngIf="showHistory"
          marketplace-transaction-history-details
          [transactionType]="transactionDTO.transactionType"
          [userType]="'BUYER'"
          [currentStatusStep]="transactionDTO.currentStatus"
        ></div>
        </mat-panel-description>
      </mat-expansion-panel>
    </mat-accordion>

CSS:

.mat-expansion-panel-header{
    font-family: "Lato", Arial, Helvetica, sans-serif;
    color: #162e4d;
}
.mat-accordion .mat-expansion-panel:last-of-type{
    margin-bottom: .3rem;
    border: 1px solid #c0c8d4;
    box-shadow: none;
    border-radius: 0;
}
.detailsRow{
    width: -webkit-fill-available;
}

Typescript:

import { Component, Input, OnInit } from "@angular/core";
import { TransactionHistoryDTO } from "@shared/dto/transaction-history-dto";
@Component({
  selector: "[marketplace-transaction-history-item]",
  templateUrl: "./transaction-history-item.component.html",
  styleUrls: ["./transaction-history-item.component.scss"],
})
export class TransactionHistoryItemComponent implements OnInit {
  @Input() transactionDTO:TransactionHistoryDTO;
  showHistory = true;
  constructor() {}

  fetchHistoryDetails() {
    this.showHistory = !this.showHistory;
  }
  ngOnInit(): void {
    // console.log(this.transactionDTO);
  }
}