I created a svelte modal component based on this example https://svelte.dev/examples/modal

However, since I did not want the close button coming from the modal, I removed it. The code is a below

<script lang="ts">
    export let showModal: boolean; // boolean

    let dialog: HTMLDialogElement; // HTMLDialogElement

    $: if (dialog && showModal) dialog.showModal();
</script>

<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<dialog
    bind:this={dialog}
    on:close={() => (showModal = false)}
    on:click|self={() => dialog.close()}
    class="backdrop:bg-slate-500/30 backdrop:dark:bg-slate-200/10"
>
    <slot />
</dialog>

I am using this Modal in another component as below

<script lang="ts">
import Modal from '$lib/components/Modal.svelte';
let showModal = false;
</script>

<button on:click={() => (showModal = true)}> OPEN MODAL </button>

<Modal bind:showModal >

  <div>cmodal content blah blah blah </div>

  <button on:click={() => (showModal = false)}> CLOSE MODAL</button>

</Modal>

Modal opens without any issues whin i click the “OPEN MODAL” button but it does not close when I click “CLOSE MODAL” button! (it closes on clicking the backdrop as expected)

What I am doing wrong? How do close the modal from within the modal?