Привязка средства выбора v-даты к v-текстовому полю с отформатированной датой

Я пытаюсь привязать опцию выбора v-даты к текстовому полю v с отформатированными данными. У меня есть функция, которую я уже использую в своем приложении, под названием formateDate(), и я пытаюсь применить ее к значению v-текстового поля с v-моделью средства выбора даты в качестве входных данных. Когда загружается v-меню и загружается исходное значение, в текстовом поле v отображается отформатированная дата, но как только я выбираю опцию в средстве выбора v-даты, значение очищается и ничего не отображается. Ошибок тоже не вырисовывается. Вот мой код:

<v-menu v-model = "ratingPeriodBeginMenu"
    :close-on-content-click = "false"
    transition = "scale-transition"
    offset-y
    max-width = "290px"
    min-width = "auto">
    
    <template v-slot:activator = "{ props }">
        <v-text-field
            v-bind = "props"
            label = "Rating Period Begin Date"
            :value = "formatDate(ratingPeriodBeginModel,'MM/DD/YYYY')?.toString()"
            prepend-inner-icon = "mdi-calendar"
            variant = "outlined"/>
    </template>
    
    <v-date-picker 
        v-model = "ratingPeriodBeginModel"
        color = "primary"
        no-title
        @input = "ratingPeriodBeginMenu = false">
    </v-date-picker>
    
</v-menu>

И моя функция, которую я использую, заключается в следующем:

export function formatDate(inputDate : Date | null, formatType : string) {
    if (inputDate == null) return null;
    
    if (formatType == 'MM/DD/YYYY'){
        const date = new Date(inputDate)
        return date.toLocaleDateString("en-US")
    }
}