How can i use vuetify 3.3.4 date picker component in my project?

I am trying to use latest vuetify 3 (3.3.4 version - lab) date-picker component.
I created a date-input component in my project component folder.

/components/DateInput.vue

<template>
<div>
<v-menu
v-model="menu"
:close-on-content-click="false"
:nudge-right="40"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ props }">
<v-text-field
v-bind="props"
:value="dateFormatted"
variant="outlined"
append-inner-icon="mdi-calendar"
@change="onChange"
@input="updateDate"
></v-text-field>
</template>
<v-date-picker
:value="getDate"   
@change="onChange"
@input="updateDate"
></v-date-picker>
</v-menu>
</div>
</template>
<script>
export default {
props: {
/**
* Date on ISO format to be edited.
* @model
*/
value: {
type: String,
default() {
return ""
},
},
},
data() {
return {
menu: false,
};
},
computed: {
dateFormatted() {
return this.input ? new Date(this.input) : "";
},
getDate() {
/**
* Return ISO 8601
*/
let date = this.input ? new Date(this.input) : new Date();
let month = 1 + date.getMonth();
if (month < 10) {
month = `0${month}`;
}
let day = date.getDate();
if (day < 10) {
day = `0${day}`;
}
return `${date.getFullYear()}-${month}-${day}`;
},
},
methods: {
onChange(val) {
console.error(val)
},
updateDate(val) {
this.menu = false;
console.error(val)
},
},
};
</script>

/App.vue

<template>
<v-container>
<v-row>
<v-col cols="6">
<date-input></date-input>
</v-col>  
</v-row>
</v-container>
</template>
<script>
import DateInput from './components/DateInput.vue';
export default {
components: {
DateInput,
},
}
</script>

When i try to select a date i always get an error like below.

Where am i doing wrong ?
I deployed the project to codesanbox, here is the codesanbox link.

https://codesandbox.io/p/github/eguvenc/test/main

That's a bug in the VDatePicker component. It's already fixed, but unless you want to switch to the nightly build, I think you have to wait for the next release.

However, the problem can be avoided by passing in a correct :modelValue property (you seem to use a non-existent :value property). Note that :modelValue has to be an array containing Date objects. So try something like:

      <v-date-picker
        :modelValue="getDate"
        @update:modelValue="updateDate"
      ></v-date-picker>

(note that there is no @change event anymore, and @input is @update:modelValue in Vue 3).

and have getDate return a Date array:

getDate() {
const date = this.input ? new Date(this.input) : new Date()
return [date]
}