vuetify v-select not loading data from array

in VPlay I added this code:

<template>
    <v-app>
        <v-container>
            <v-select
                v-model="selectedState"
                :items="states"
                item-value="value"
                item-text="text"
                label="State"
                outlined
            ></v-select>
        </v-container>
    </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const selectedState = ref('')
  const states = ref([
    { value: '1', text: 'VIC' },
    { value: '2', text: 'ACT' },
  ])
</script>

The select drop down has the two objects and not the value/text pairs as expected.

I also get a warning: Invalid prop: type check failed for prop "title". Expected String | Number | Boolean, got Object

I am a novice with Vuetify. What am I missing here? What am i doing wrong?

My intent is to get data from supabase via Pinia and create a select element in a form.

You are close but instead of

 item-text="text"

you actually need

item-title="text"

also item-value="value" is not necessary. v-select automatically gets value and title. So if your object had title instead of text for example it would work out of the box.

v-select docs