useField with select element, invalid prop (vue 3 typescript)

[otatar]

I have a very generic (basic) select component:

<template>
  <div class="relative mx-2">
    <label v-if="label" class="form-label">{{ label }}</label>
    <select
      class="field"
      v-bind="{
        ...$attrs,
        onChange: ($event) => {
          $emit('update:modelValue', updateModelValue($event))
        }
      }"
      :value="modelValue"
    >
      <option
        v-for="option in options"
        :value="option"
        :key="option"
        :selected="option === modelValue"
      >{{ option }}</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps<{
  label: string
  modelValue: string | number
  options: Array<string> | Array<number>
}>()

const updateModelValue = (event: Event) =>
  (event.target as HTMLInputElement).value
</script>

When using useField function from vee-validate 4.5.7 like this:

<template>
<base-select
          label="Test"
         :options="testOptopns"
         v-model="test" />
</template>
<script setup lang='ts'>
...imports and other stuff
const { value: test} = useField<string>('test')

I get Vue warn (validation doesn't work):

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String | Number, got Undefined  
  at <BaseSelect ...

However when I use just Vue3 ref, there is no warn:

const test = ref('')

Is something wrong with my implementation of BaseSelect, or this is useField thing?
E.g. when I supply initial value, there is no Vue warn....

[logaretm]

I believe this is a Vue thing because vee-validate has no such warnings on the value type nor it does any kind of runtime type checking.

Feel free to re-create this in a sandbox and I can point out what is causing it. But usually, that warning would go away with a default value assigned to the prop.