Table filter dropdown closes when custom filter (flatpickr) is active

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
        x-ignore
        ax-load
        x-load-css="[
            @js(\Filament\Support\Facades\FilamentAsset::getStyleHref('flatpickr-stylesheet')),
            @js(\Filament\Support\Facades\FilamentAsset::getStyleHref('flatpickr-theme-stylesheet')),
        ]"
        x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('flatpickr-script'))]"
        x-init="
            const fp = flatpickr($refs.picker, {
                mode: 'range',
                showMonths: 2,
                dateFormat: 'Y-m-d',
                onChange: (selectedDates, dateStr, instance) => {

                    // update backend value if the range is complete
                    if (selectedDates.length == 1) {
                        instance.element.value = null;
                    }
                }
            });
        "
    >

        <x-filament::input.wrapper
            wire:ignore
            suffix-icon="heroicon-m-calendar-days"
        >
            <x-filament::input
                id="{{$getId()}}"
                type="text"
                x-ref="picker"
                x-model="state"
                placeholder="Select date range"
            />
        </x-filament::input.wrapper>

    </div>
</x-dynamic-component>