Q-select selected value and select dropdown in Vuejs3 is not displayed correctly - select

Question

I make an application in vuejs3 and quasar, here i am using q-select but selected option and select arrow is not welle displayed here the display
i have no specific CSS, here my component
<template>
<teleport v-if="show" to="#modals">
<div class="modal" tabindex="-1" role="dialog" style="overflow-y: scroll">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Changer le status de la commande N° {{ orderId }}</h5>
</div>
<form class="status-form" #submit.prevent="onSubmit">
<div class="modal-body">
<Comment :id_order="orderId" />
<!-- <select id="state" v-model="selected">
<option
v-for="state in orderStates"
:value="state.id"
:key="state.id"
>
{{ state.name }}
</option>
</select> -->
<q-select outlined v-model="state" name="state" :options="orderStates" label="state.name" option-value="id"
option-label="name" fill-input use-input/>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">
<slot name="loading" v-if="loadingState">Loading...</slot>
<slot name="loading" v-if="!loadingState"
>Changer le status</slot
>
</button>
<button
type="button"
class="btn btn-secondary"
#click="
$emit('update:show', !show),
$emit('update:orderDetails', []),
$emit('update:orderId', null),
$emit('update:selected', null)
"
>
Fermer
</button>
</div>
</form>
</div>
</div>
</div>
any idea ?