Why does my screen go blank when I invoke a modal?

I created some buttons within a grid (which I wanted to determine the size dynamically), and now I'm trying to open dialogs/modals, but I don't know why It does not work. I have my REPL link to use, but I will also be sharing my files here.

REPL_FirstApp

main_app.svelte

<script>    import SwContainer from './swContainer.svelte';    import SwButtonIten from './swButtonIten.svelte';    import SwDialogIten from './swDialogIten.svelte';    let componentPositions = [        {             component: SwButtonIten,            props: { cstmLabel: 'Open Dialog 1', handleClick: openDialog1 },            rowPos: 0,            colPos: 0        },        {             component: SwButtonIten,            props: { cstmLabel: 'Open Dialog 2' },            rowPos: 0,            colPos: 1        }    ];    let dialog1IsOpen = false;    let dialog2IsOpen = false;    function openDialog1() {        dialog1IsOpen = true;    }    function openDialog2() {        dialog2IsOpen = true;    }</script><svelte:head><title>About</title><meta name="description" content="About this app" /><link        rel="stylesheet"        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"    /></svelte:head><SwContainer numRow={2} numCol={2} {componentPositions}></SwContainer><SwDialogIten bind:isOpen={dialog1IsOpen} title="Dialog_1" message="etc, etc, etc" /><SwDialogIten bind:isOpen={dialog2IsOpen} title="Diálog_2" message="etc, etc, etc" />

Another question I have is, what is the best way to invoke a component within another component through the parent class? In my case, I am passing the components that I want to be created through an array. But I don't know if this is the best approach for this!

swContainer.svelte

<script>    import { Col, Container, Row } from 'sveltestrap';    import SwButtonIten from './swButtonIten.svelte';    export let uniqueID = 0;    export let numRow = 0;    export let numCol = 0;    export let componentPositions;</script><Container>    {#each Array(numRow) as _, rowIndex}<Row>            {#each Array(numCol) as _, colIndex}<Col>                    {#each componentPositions.filter(pos => pos.rowPos === rowIndex && pos.colPos === colIndex) as item}<svelte:component this={item.component} {...item.props} />                    {/each}</Col>            {/each}</Row>    {/each}</Container>

swButtonIten.svelte

<script>    import { Button } from 'sveltestrap';    export let uniqueID = '';    export let cstmLabel = '';    export let rowPos = 0;    export let colPos = 0;    export let handleClick;    function onClick() {        handleClick();    }</script><Button on:click={onClick}>{cstmLabel}</Button>

swDialogIten.svelte

<script>    import {        Button,        Modal,        ModalBody,        ModalFooter,        ModalHeader    } from 'sveltestrap';    export let isOpen = false;    export let title = '';    export let message = '';</script><Modal bind:isOpen><ModalHeader>{title}</ModalHeader><ModalBody>{message}</ModalBody><ModalFooter><Button color="secondary" on:click={() => isOpen = false}>Close</Button></ModalFooter></Modal><style>    /* styles */</style>

It turns out that if I run the code this way, when I click the button, the screen just goes dark and I can't do anything else! I have to close the page and open it again