Join Not Displaying Selected Items - Using Svelte

What this code does: If no flavours are selected, "Please select at least one flavour" & "You ordered and undefined is displayed". Then if a flavour is selected, nothing is displayed.

What I'm trying to do: If no flavours are selected, "Please select at least one flavour" is displayed. Then only if something is selected, I want to display "You ordered (then list whatever they ordered)" ie: You ordered Mint choc chip, cookies and cream".

I'm confused because I thought that ${flavours.slice(0, -1).join(', ')}; & You ordered {join(flavours)} would list the flavours selected. This is the code that I'm playing around with. (credit: Svelte example from Svelte website)

 <script>
        let scoops = 1;
        let flavours = ['Mint choc chip'];

        let menu = [
            'Cookies and cream',
            'Mint choc chip',
            'Raspberry ripple'
        ];

        function join(flavours) {
            if (flavours.length === 1) return flavours[0];
            return `${flavours.slice(0, -1).join(', ')};
        }
    </script>

    <h2>Flavours</h2>

    {#each menu as flavour}
        <label>
            <input type=checkbox bind:group={flavours} value={flavour}>
            {flavour}
        </label>
    {/each}

    {#if flavours.length === 0}
        <p>Please select at least one flavour</p>
        <p>
            You ordered {join(flavours)}
        </p>
    {/if}