Can any one help me. when I click the icon inside in the avatar I want to select file.But I getting the error. Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'input'). Could Anyone Help me...

<v-row v-for="(item, index) in list" :key="index" no-gutters>
  <v-col cols="12" sm="12" lg="12" xl="12">
    <v-card class="mt-2 rounded-xl" hover>
      <v-card-title v-if="index === 0" @mouseover="mouseOver = true" @mouseleave=" mouseOver = false">
        <v-row class="ml-1 mt-1">
          <div style="position: relative; top: 0; right: 0; width: 70px">
          <v-avatar size="60" color='primary'>
           </v-avatar>
          <v-menu offset-y v-if="mouseOver">
            <template v-slot:activator="{ on, attrs }">
              <v-icon class="pb-5" aria-hidden="true" @click="fileSelect()" color="grey lighten-5" size="20" v-bind="attrs" v-on="on" style="position: absolute; bottom:0; right: 29px;"> mdi-camera </v-icon>
               </template>
          </v-menu>
          </div>
          <div class="ml-1">{{item.text}}</div>
            <v-file-input style="display: none" ref="file" accept="image/*" v-model="systemAndTenantConfig.systemconfiguration.logo" @change="uploadProfile()"></v-file-input>
        </v-row>
    </<v-card-title>
   </v-card>
 </v-col>
 </v-row>
<script>
export default{
  data(){
    return{
    }
}
methods:{
 fileSelect () {
      this.$refs.file.$refs.input.click()
    }
}
</script>