How to write a test that one of the steps is to click on vue-select option ?

[KobyDamari]

iI have the following component:
Component

<template>
  <span>
    <VSelect
      class="vena-select"
      :class="selectComputedClass"
      :options="props.options"
      :label="props.label"
      :searchable="false"
      :clearable="false"
      :model-value="value"
      @option:selected="setSelectedValue"
    />
    <ArrowUpIcon
      v-if="sortType"
      class="vena-select__sort-by"
      :size="10"
      data-testid="sort-by-icon"
      :class="computedClass"
      @click="sort"
    />
  </span>
</template>

<script setup lang="ts">
  import { SortType } from 'vue3-easy-data-table';
  import ArrowUpIcon from 'vue-material-design-icons/ArrowUp.vue';
  import { computed } from 'vue';

  import { VenaSelectOptionGeneric } from './types';

  interface VenaSelectOptionAll extends VenaSelectOptionGeneric<null> {
    title: 'All';
    key: null;
  }

  export type VenaSelectOption<T = string | number> =
    | VenaSelectOptionGeneric<T>
    | VenaSelectOptionAll;

  const emit = defineEmits(['change', 'sort']);
  type VenaSelectProps = {
    options: VenaSelectOption[];
    defaultOption?: VenaSelectOption;
    label: string;
    sortType?: SortType;
    value?: string | number | null;
    border?: boolean;
    labelPrefix?: string;
  };

  const props = defineProps<VenaSelectProps>();
  const computedClass = computed(() => ({
    'vena-select__sort-by--desc': props.sortType === 'desc',
  }));

  const selectComputedClass = computed(() => ({
    'vena-select--border': props.border,
  }));

  const setSelectedValue = (option: Record<string, string>) => {
    emit('change', option);
  };

  const sort = () => {
    const newSortType = props.sortType === 'desc' ? 'asc' : 'desc';
    emit('sort', newSortType);
  };

  const value = computed(() => {
    const selectedOption =
      props.options.find(
        (option: VenaSelectOption) => option.key === props.value
      )?.title ||
      props.defaultOption?.title ||
      'All';
    return props.labelPrefix
      ? `${props.labelPrefix}${selectedOption}`
      : selectedOption;
  });
</script>

<style lang="scss">
  @import './index.scss';
</style>

Test

      const { html } = render(VenaSelect, {
        global: {
          components: {
            VSelect: VueSelect,
          },
        },
        props: {
          label: 'title',
          options: [
            { key: 'name', title: 'Capability' },
            { key: 'effectiveness', title: 'Effectiveness' },
          ],
          sortType: 'asc',
        },
      });
      await flushPromises();
      await nextTick()
      expect(html()).toMatchSnapshot();
    });

** Snapshot**

<span><div dir="auto" class="v-select vs--single vs--unsearchable vena-select"><div id="vs1__combobox" class="vs__dropdown-toggle" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-label="Search for option"><div class="vs__selected-options"><span class="vs__selected">All<!----></span><input class="vs__search" readonly="" aria-autocomplete="list" aria-labelledby="vs1__combobox" aria-controls="vs1__listbox" type="search" autocomplete="off"></div>
<div class="vs__actions"><button type="button" class="vs__clear" title="Clear Selected" aria-label="Clear Selected" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
      <path d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"></path>
    </svg></button><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation" class="vs__open-indicator">
    <path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"></path>
  </svg>
  <div class="vs__spinner" style="display: none;">Loading...</div>
</div>
</div>
<transition-stub name="vs__fade" appear="false" persisted="false" css="true">
  <ul id="vs1__listbox" role="listbox" style="display: none; visibility: hidden;"></ul>
</transition-stub>
</div><span class="vena-select__sort-by material-design-icon arrow-up-icon vena-select__sort-by" data-testid="sort-by-icon" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="10" height="10" viewBox="0 0 24 24"><path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"><!--v-if--></path></svg></span></span>"

but the snapshot not renders the options, and I want to test value being emitted or in other use case I want to click the option to see interaction on the page.
can you please assist ?
I'm using @testing-library/vue and vitest