Laravel Filament FileUpload is not rendering correctly

Question

so i have three tabs inside a blade file and inside each tab i have livewire component which implements HasForms or HasTable, first tab is always active.

in the third tab i have product details it has FileUpload Input field among other fields like images, name if i move to this tab FileUpload is showing weird behavior. it looks alright and PDF is visible, but not possible to open NOR download. but if i reload the page then everything is normal enter image description here

                    <nav class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200" aria-label="Tabs">

                        <a @click.prevent="tab = 'parts'; window.location.hash = 'parts'" href="#">
                            <span>Parts & Sub-Products</span>
                        </a>

                        <a @click.prevent="tab = 'units'; window.location.hash = 'units'" href="#">
                            <span>Fabricated Units</span>
                        </a>

                        <a @click.prevent="tab = 'product'; window.location.hash = 'product'" href="#">
                            <span>Product Editor</span>
                        </a>
                    </nav>
            <div x-show="tab === 'parts'" style="display:none;">
                @livewire('parts', ['product' => $product, 'materials' => $materials])
            </div>

            <!-- Units -->
            <div x-show="tab === 'units'" style="display:none;">
                <div class="mb-5">
                    <h2 class="font-semibold text-xl text-gray-800 leading-tight">Fabricated Units</h2>
                    <p>Here is list of Fabricated units</p>
                </div>
                @livewire('fabricated-unit', ['product' => $product])
            </div>

            <!-- Product editor -->
            <div x-show="tab === 'product'" style="display:none;">
                <div class="mb-5">
                    <h2 class="font-semibold text-xl text-gray-800 leading-tight">Product Editor</h2>
                    <p>You can edit or update your product here</p>
                </div>
                @livewire('product-editor', ['product' => $product])
            </div>

this is ProductEditor

class ProductEditor extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public Product $product;

    public function mount(Product $product): void
    {
        $this->product = $product;
        $this->form->fill($product->toArray());
    }
    public function render()
    {
        return view('livewire.product-editor');
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([

                        TextInput::make('name')->label('Product Name')->required()->string()->minLength(3)->maxLength(255),
                        TextInput::make('product_number')->label('Product Number')->required()->string()->minLength(3)->maxLength(255),
                        TextInput::make('gtin_number')->label('GTIN Number')->nullable()->string()->minLength(1)->maxLength(255),
                        Select::make('category_id')
                                ->label('Category')
                                ->options(Category::where('team_id', auth()->user()->currentTeam->id)->get()->pluck('name', 'id'))
                                ->searchable(),
                        FileUpload::make('images')->disk('product_photos')->nullable()->multiple()
                            ->image()->reorderable()->maxSize('5120'),
                        FileUpload::make('data_sheet_file')->label('Product Data Sheet')->disk('product_manuals')->openable()->downloadable()->previewable(false)  //Here is a problem
                            ->nullable()->acceptedFileTypes(['application/pdf']),
                        Textarea::make('description')->label('Description')->nullable()->string()->minLength(1)->maxLength(1024),

          ])
            ->statePath('data')
            ->model($this->product);
    }
}