Vuetify 3 collapses `v-list-item when` `to` attribute is used

With to:

Without to:

Here's the code:

   <v-navigation-drawer v-model="drawer">
      <v-list>
        <v-list-item v-for="(item, i) in items" :key="i" :title="item.title" :to="item.value">
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

here's the items array

items: [
        { title: 'Tenets', value: 'tenets' },
        { title: 'Units', value: 'units' },
        { title: 'Charges', value: 'charges' },
        { title: 'Payments', value: 'payments' }
      ]
    }

Any thoughts or experience on what causes this?

Without :to, <v-list-item> renders a <div />. With a valid :to, it renders an <a />.

Most likely, you have some CSS which applies to div.v-list-item and does not apply to a.v-list-item.

Without a runnable minimal reproducible example nobody can help, as we have no way to determine which part of the code you are not sharing is responsible for the output difference in rendering.

We can only inspect code, not pictures.