V-calendar multiple dates not working in vue3

Hi guys, may i know how this works?

https://vcalendar.io/examples/datepickers.html#multiple-dates

I have followed the sample code for the date button.

<template>
  <div class="bg-white p-2 w-full border rounded">
    <v-date-picker v-model="selected.date">
      <template #default="{ inputValue, togglePopover, hidePopover }">
        <div class="flex flex-wrap">
          <button
            v-for="(date, i) in dates"
            :key="date.date.getTime()"
            class="flex items-center bg-indigo-100 hover:bg-indigo-200 text-sm text-indigo-600 font-semibold h-8 px-2 m-1 rounded-lg border-2 border-transparent focus:border-indigo-600 focus:outline-none"
            @click.stop="dateSelected($event, date, togglePopover)"
            ref="button"
          >
            {{ date.date.toLocaleDateString() }}
            <svg
              class="w-4 h-4 text-gray-600 hover:text-indigo-600 ml-1 -mr-1"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
              @click.stop="removeDate(date, hidePopover)"
            >
              <path d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>
      </template>
    </v-date-picker>
    <button
      class="text-sm text-indigo-600 font-semibold hover:text-indigo-500 px-2 h-8 focus:outline-none"
      @click.stop="addDate"
    >
      + Add Date
    </button>
  </div>
</template>

export default {
  data() {
    return {
      dates: [
        {
          date: new Date(),
        },
      ],
      selected: {},
    };
  },
  methods: {
    addDate() {
      this.dates.push({
        date: new Date(),
      });
      this.$nextTick(() => {
        const btn = this.$refs.button[this.$refs.button.length - 1];
        btn.click();
      });
    },
    removeDate(date, hide) {
      this.dates = this.dates.filter((d) => d !== date);
      hide();
    },
    dateSelected(e, date, toggle) {
      this.selected = date;
      toggle({ ref: e.target });
    },
  },
};

After that, i am getting this error

app.js:431379 TypeError: Cannot read property 'inputValue' of undefined
    at app.js:171004
    at renderFnWithContext (app.js:128613)
    at normalizeChildren (app.js:134017)
    at _createVNode (app.js:133859)
    at createVNodeWithArgsTransform (app.js:133754)
    at Proxy.render (app.js:170997)
    at renderComponentRoot (app.js:128656)
    at componentEffect (app.js:132686)
    at reactiveEffect (app.js:126508)
    at effect (app.js:126483)

Anyone know what is the issue here?