Search component with a dropdown using svelte and shadcn-svelte

Question

I'm trying to create a search component using Svelte and shadcn-svelte UI component library,

Where I'll have a dropdown visible below the search input, when the user type a text that does exist in the data array, otherwise the dropdown should be hidden.

<script lang="ts">
    import { Input } from '$lib/components/ui/input';
    import * as DropdownMenu from '$lib/components/ui/dropdown-menu';

    let searchValue = '';
    
    let filteredResults: string[] = [];
    let isDropdownOpen = false;

    const data = [
        'California',
        'North Carolina',
        'North Dakota',
        'South Carolina',
        'South Dakota',
        'Michigan',
        'Tennessee',
        'Nevada',
        'New Hampshire',
        'New Jersey'
    ];

    function handleInput() {
        filteredResults = data.filter((item) =>
            item.toLowerCase().includes(searchValue.toLowerCase())
        );

        isDropdownOpen = (filteredResults.length > 0 && searchValue !== '');
    }
    function handleItemSelection(item: string) {
        console.log(`${item} selected`);
    }
</script>

<Input bind:value={searchValue} on:input={handleInput} placeholder="Search..." />
<DropdownMenu.Root open={isDropdownOpen} disableFocusFirstItem={true}>
    <DropdownMenu.Trigger asChild let:builder>
        <Button builders={[builder]} class="h-0 m-0 p-0" variant="outline"></Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content>
        <DropdownMenu.Group>
            {#each filteredResults as item}
                <DropdownMenu.Item on:click={() => handleItemSelection(item)}>{item}</DropdownMenu.Item>
            {/each}
        </DropdownMenu.Group>
    </DropdownMenu.Content>
</DropdownMenu.Root>

My issue is once I start typing, the drop-down menu will show up but, the focus will transfer to the drop-down menu and that will prevent me from typing.