Why the smui Snackbar does not work inside a loop of components?

Question

I cannot make the snackbar open when the snackbar is nested in loops of nested components.

For exemple, when I click on the button "Send email" in SendQuoteByEmail.svelte

SendQuoteByEmail.svelte

<script lang="ts">
    import type { Client, Order, ServerResponse } from '$lib/helper/types';
    import Button, { Label as LabelButton } from '@smui/button';
    import Snackbar, { Label } from '@smui/snackbar';
    import Textfield from '@smui/textfield';

    export let client: Client;
    export let order: Order;

    let snackbarWarning: Snackbar;
    let textSnackBar = 'Warning.';

    let disabled = false;

    const fullname = client.fullname;

    let message = `Dear ${fullname},\r\n\r\nPlease find attached the quote.\r\n\r\nBest regards,\r\n\r\nBoatSpares.`;

    async function sendEmail() {
        textSnackBar = `Email has been sent.`;
        snackbarWarning.open();
    }
</script>

<div>
    <Textfield
        input$name="message"
        style="min-height:200px; width: 100%; margin-bottom:12px;"
        helperLine$style="width: 100%;"
        textarea
        bind:value={message}
        label="Message in the email"
    />

    <Button type="submit" variant="raised" on:click={sendEmail} {disabled}>
        <LabelButton>Send email</LabelButton>
    </Button>
</div>

<Snackbar class="snackbar-warning" bind:this={snackbarWarning} labelText={textSnackBar}>
    <Label />
</Snackbar>

PanelOrder.svelte

<script lang="ts">
    import type { Client, Order } from '$lib/helper/types';
    import Accordion, { Content, Panel } from '@smui-extra/accordion';
    import { Label } from '@smui/button';
    import Snackbar from '@smui/snackbar';
    import SendQuote from './SendQuote.svelte';
    import SendQuoteByEmail from './SendQuoteByEmail.svelte';

    export let client: Client;
    export let order: Order;

    let snackbarWarning: Snackbar;
    let textSnackBar = 'Warning.';


    let open: boolean = false;
    console.log('bananas');
    console.log(order);
</script>

<Panel bind:open>
    <Content>
        <div class="mb-5">
            <Accordion>
                <Panel>
                    <Content>
                        <SendQuote {order} />
                        <SendQuoteByEmail {client} {order} />
                    </Content>
                </Panel>
            </Accordion>
        </div>
    </Content>
</Panel>

<Snackbar class="snackbar-warning" bind:this={snackbarWarning} labelText={textSnackBar}>
    <Label>This is a snackbar.</Label>
</Snackbar>

AccordionOrders.svelte

<script lang="ts">
    import type { Client } from '$lib/helper/types';
    import Accordion from '@smui-extra/accordion';
    import { Label } from '@smui/button';
    import Snackbar from '@smui/snackbar';
    import PanelOrder from './PanelOrder.svelte';

    export let client: Client;

    let orders = client.orders;

    let snackbarWarning: Snackbar;
    let textSnackBar = 'Warning.';

    let open: boolean = false;
    console.log(open);
</script>

<div class="accordion-container">
    <Accordion multiple>
        {#each orders as order}
            <PanelOrder {client} {order} />
        {/each}
    </Accordion>
</div>

<Snackbar class="snackbar-warning" bind:this={snackbarWarning} labelText={textSnackBar}>
    <Label>This is a snackbar.</Label>
</Snackbar>

PanelClients.svelte

<script lang="ts">
    import type { Client } from '$lib/helper/types';
    import AccordionOrders from './AccordionOrders.svelte';

    export let clients: Client[];
</script>

<div class="accordion-container">
    {#each clients as client}
        <div class="client-wrapper">
            <div class="client-detail-wrapper">
                <div class="mdc-typography--headline5">
                    {client.companyName}
                </div>
                <div>
                    {client.fullname}
                </div>
                <div>
                    {client.email}
                </div>
            </div>
            <AccordionOrders {client} />
        </div>
    {/each}
</div>

+page.svelte

<script lang="ts">
    import type { PageData } from '.svelte-kit/types/src/routes/$types';
    import Snackbar, { Label as LabelSnackbar } from '@smui/snackbar';
    import PanelClient from '$lib/admin/PanelClients.svelte';
    import type { Client } from '$lib/helper/types';
    import { shared } from '$lib/stores/global';

    export let data: PageData;
    const clients: Client[] = data.data;

    let snackbarWarning: Snackbar;
    let textSnackBar = 'Warning.';

    $shared.title = 'Pending';
    $shared.page.active = 'Request pending';

</script>

<div class="container">
    <PanelClient {clients} />
</div>

<Snackbar class="snackbar-warning" bind:this={snackbarWarning} labelText={textSnackBar}>
    <LabelSnackbar>This is a snackbar.</LabelSnackbar>
</Snackbar>