Svelte perform action on a component from another component

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?