I am going to put an input as an input to filter the options at the beginning of the options.
But when I put the input inside the field, it is not rendered and displayed at all.

<script setup>
import * as yup from "yup";
import "~/plugins/validation";

const props = defineProps({
  id: Number,
  name: String,
  label: String,
  required: Boolean,
  options: Object,
  value: String,
  placeholder: String,
});
const state = ref(props.value);
const searchQuery = ref("");
const filteredOptions = ref(props.options);
const emits = defineEmits(["changeInput"]);
const onChange = (data) => {
   emits("changeInput", data, props.name);
};
watch(searchQuery, (newQuery) => {
  filteredOptions.value = props.options.filter((option) =>
    option.title.toLowerCase().includes(newQuery.toLowerCase())
  );
});
</script>
<template>
<div class="mb-3">
<label :for="props.id">{{ props.label }} </label>
<Field
v-slot="{ value }"
:name="props.name"
as="select"
@input="(event) => (state = event.target.value)"
@change="onChange(state)"
>
<input type="text" v-model="searchQuery" placeholder="search"  />
      <option v-for="option in filteredOptions":key="option" :value="option.value"
        :selected="value && value.includes(option)"
      >{{ option.title }}</option></Field><ErrorMessage as="small" class="fw-bold text-danger" :name="props.name" />
  </div>
</template>