Livewire 3 form component with Bootstrap modal

Hello, using Laravel 10, Livewire 3, Bootstrap 4

I am trying to open a form with Bootstrap modal and use Livewire Form component.

My problem is that the modal opens, and only after a second it binds the inputs. So in the select field that I have, I see the first option first, and after a second it changes to the actual model value.

Not sure how to fix that if possible.

Showing the relevant code:

My Livewire component code:

class OrderComponent extends Component
{
    use LivewireAlert, OrderTrait;

    public $new_orders_count;
    public $new_orders_title;
    public $orders_to_pack_count;
    public $orders_to_dispatch_count;
    public $dispatched_orders_count;
    public $awaiting_quote_count;
    public $orders;
    public $grouped_orders;
    //Edit order details
    public EditOrderForm $form;
    public $show_edit_form;
    public $order_id;
    public $shipping_method;
    public $comments;
    public Order $order;

public $selected_tab = 'admin.order.new-orders-component';
    protected $tabs = [
        'admin.order.new-orders-component',
        'admin.order.orders-to-pack-component'
    ];

public function editOrder($order_id)
    {
        $this->order_id = $order_id;
        $this->order = Order::find($order_id);
        $this->form->setOrder($this->order);
        $this->show_edit_form = true;
    }

The Livewire form component:

class EditOrderForm extends Form
{   
    use OrderTrait;

    public ?Order $order;
    public $shipping_method;
    public $shipping_cost;
    public $comments;
    
    public function setOrder(Order $order)
    {
        $this->order = $order; 
 
        $this->shipping_method = $order->shipping_method;
    }

Order modal blade:

<div x-data="{ open: @entangle('show_edit_form').defer }" @keydown.escape.window="open = false">
   
<div wire:ignore.self class="modal fade" id="editOrderModal" tabindex="-1" aria-labelledby="editOrderModalLabel"
    aria-hidden="true" x-show="open" x-on:close.stop="open = false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editOrderModalLabel">Edit Order Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="modal-body">
                <form wire:submit.prevent="updateOrder">                    
                    <div class="form-group">
                        <label>Shipping Method</label>
                        <select name="shipping_method" class="form-control" id="shippingSelect" wire:model="form.shipping_method">
                            <option value="{{ \App\Enums\ShippingMethodEnum::COURIER }}">{{ \App\Enums\ShippingMethodEnum::COURIER }}</option>
                            <option value="{{ \App\Enums\ShippingMethodEnum::COLLECT }}">{{ \App\Enums\ShippingMethodEnum::COLLECT }}</option>
                            <option value="{{ \App\Enums\ShippingMethodEnum::HIGHLAND_DELIVERY }}">{{ \App\Enums\ShippingMethodEnum::HIGHLAND_DELIVERY }}</option>
                            <option value="{{ \App\Enums\ShippingMethodEnum::REP_DELIVERY }}">{{ \App\Enums\ShippingMethodEnum::REP_DELIVERY }}</option>
                        </select>
                    </div>
                </form>
            </div>          
        </div>
    </div>
</div>
    
</div>

Order blade:

<div>

    @section('page-title', 'Orders')
    
    @section('breadcrumbs')
    <li class="breadcrumb-item active">Orders</li>
    @stop
    
    @include('livewire.admin.order.order-modal')

    <x-tabs>
        <x-slot:tab_list>            
            <x-tab-list-item :active="$selected_tab == 'admin.order.new-orders-component'" :name="'New Orders ('.$new_orders_count.')'" href="orders-tab" />
            <x-tab-list-item :active="$selected_tab == 'admin.order.orders-to-pack-component'" :name="'Orders to Pack ('.$orders_to_pack_count.')'" href="orders-tab" />           
            <x-tab-list-item :active="$selected_tab == 2" selectedTab="2" :name="'Orders to Dispatch ('.$orders_to_dispatch_count.')'" href="orders-tab" />
            @can('update order shipping quote')
            <x-tab-list-item :active="$selected_tab == 3" selectedTab="3" :name="'Awaiting Quote ('.$awaiting_quote_count .')'" href="orders-tab" />
            @endcan
            <x-tab-list-item :active="$selected_tab == 4" selectedTab="4" name="Dispatched" href="orders-tab" />            
        </x-slot:tab_list>
        
        <x-slot:tab_items>
            <div class="tab-pane fade active show" role="tabpanel" id='orders-tab'>
                <livewire:dynamic-component :is="$selected_tab" :key="$new_orders_count.$orders_to_pack_count.$orders_to_dispatch_count.$awaiting_quote_count" />
            </div>
        </x-slot:tab_items>
    </x-tabs>    
</div>

New orders blade, where the button that calls the modal is:

<div>   

    @forelse($orders as $order)
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Order Id: {{ $order->id }}</h4>
                <div class="text-right">
                    @can('edit orders')
                        <button type="button" wire:click="$parent.editOrder({{ $order->id }})" class="btn btn-default btn-sm" data-toggle="modal" data-target="#editOrderModal">Edit Details</button>
                    @endcan
                </div>
            </div>
            
            <div class="card-body">
                <x-display-order :order="$order" />
                    <livewire:admin.order.order-products-component :order="$order" :show_edit_btns=true :key="$orders->pluck('id')->join('-')" />                        
                                    
            </div>

        </div>
    @empty
        <p>Bummer, there are no new orders</p>
    @endforelse

    </div>