I'm trying to validate my file input (type image) but I got this error:

Uncaught (in promise) DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Template:

  <q-btn
          color="primary"
          outline
          label="Upload Avatar"
          @click="fileInputRef && fileInputRef.click()"
        />
        <input
          ref="fileInputRef"
          type="file"
          name="file"
          class="hidden"
          :value="avatar"
          @change="
            avatar = $event.target.files.length
              ? $event.target.files[0]
              : undefined
          "
        />

Script:

    const { value: avatar } = useField('avatar');
    const fileInputRef = ref<HTMLInputElement>();

Note: when I check Vue developer tools, avatar property set and I have selected file in my code but that error will show on console.