Adding shared SnackBar Component inside a Mat-Tab Component inside class wrapper using Angular Material

Question

I just need a help with an approach to fix this issue. I have a shared custom SnackBar component which i styled and i have a component which contains Mat-Tab component using Angular Material. I want the SnackBar Component to be opened inside Mat-Tab component class wrapper. The issue here that when the SnackBar is opened it is not relative to the class inside the Mat-Tab Component. So, please help me solve this issue i have been trying for a long time.

this is the Component which has the Mat-Tab component, there is two component which consists of the buttons which opens the Custom SnackBar Component and shown on the screen

<div class="govcy-mt-4">
    <h4 class="govcy-fst-normal govcy-fw-700">{{ "Barricades.SuspendCancelTitle" | translate }}</h4>
    <mat-tab-group dynamicHeight animationDuration="10ms" [selectedIndex]="selectedTabIndex">
        <mat-tab label="{{'Barricades.VehicleLicenseTitle' | translate}}">
            <ng-template matTabContent>
                <govcy-deactivate-vehicle></govcy-deactivate-vehicle>
            </ng-template>
        </mat-tab>
        <mat-tab label="{{'Barricades.DriverLicenseTitle' | translate }}">
            <ng-template matTabContent>
                <govcy-deactivate-driver></govcy-deactivate-driver>
            </ng-template>
        </mat-tab>
    </mat-tab-group>
</div>

this is the shared Custom SnackBar Component TS class

import { Component, Inject } from "@angular/core";
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';

    @Component({
        selector: 'app-custom-snack-bar',
        templateUrl: './custom-snack-bar.component.html',
        styleUrls: ['./custom-snack-bar.component.scss']
    })

    export class CustomSnackBarComponent {
        message: string;

        get isCancel(): boolean {
            return this.data?.isCancel;
        }

        constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {}
    }
    

and this is the HTML code

<div class="custom-snackbar">
    <mat-icon [color]="isCancel ? 'warn' : 'primary'">error_outline</mat-icon>
    <span>{{ data?.message }} </span>
</div>

Also, to add an extra thing, there are several component in which the SnackBar Component is injected and opened through several component when it their button is clicked like this component.

onSubmit(): void {
    this._snackBar.openFromComponent(CustomSnackBarComponent, {
      data: { message: 'Barricades.VehicleLicenseSuspensionMessage', isCancel: false },
      duration: 3000,
      verticalPosition: 'top',
      horizontalPosition: 'right',
      panelClass: ['custom-snackbar-container']
    });
}

Thank you!!