I am trying to bind a v-date-picker option to a v-text-field with the data formatted. I have a function I already use throughout my application called formateDate() and I am trying to apply this to the v-text-field value with the v-model of the datepicker as the input. When the v-menu loads and the initial value is loaded the v-text-field shows the formatted date but as soon as I select an option in the v-date-picker the value clears and nothing is shown. No errors are drawn either. Here is my code:

                      <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>

And my function I utilize is as follows:
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")
    }
}