Getting Warning in Select2 Component Jest Test

I’m working on a Vue application where I’ve implemented a custom autocomplete dropdown using the Select2 library. The component is functioning correctly in terms of its intended functionality, but I’m encountering a couple of warnings during development that I haven’t been able to resolve. I believe these may be related to how I’m defining props and the data function in my component.

select2.vue Component

<template>
  <div>
    <select class="form-control" :id="id" :name="name" :disabled="disabled" :required="required"></select>
  </div>
</template>

<script>
import $ from 'jquery';
import 'select2/dist/js/select2.full';
import 'select2/dist/css/select2.min.css'

export default {
  name: 'Select2',
  data() {
    return {
      select2: null
    };
  },
  emits: ['update:modelValue'],
  props: {
    modelValue: [String, Array], // previously was `value: String`
    id: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    settings: {
      type: Object,
      default: () => {}
    },
  },
  watch: {
    options: {
      handler(val) {
        this.setOption(val);
      },
      deep: true
    },
    modelValue: {
      handler(val) {
        this.setValue(val);
      },
      deep: true
    },
  },
  methods: {
    setOption(val = []) {
      this.select2.empty();
      this.select2.select2({
        placeholder: this.placeholder,
        ...this.settings,
        data: val
      });
      this.setValue(this.modelValue);
    },
    setValue(val) {
      if (val instanceof Array) {
        this.select2.val([...val]);
      } else {
        this.select2.val([val]);
      }
      this.select2.trigger('change');
    }
  },
  mounted() {
    this.select2 = $(this.$el)
      .find('select')
      .select2({
        placeholder: this.placeholder,
        ...this.settings,
        data: this.options
      })
      .on('select2:select select2:unselect', ev => {
        this.$emit('update:modelValue', this.select2.val());
        this.$emit('select', ev['params']['data']);
      });
    this.setValue(this.modelValue);
  },
  beforeUnmount() {
    this.select2.select2('destroy');
  }
};
</script>

Unit test for the component:

import { mount } from '@vue/test-utils';
import Select2 from './Select2.vue'; // Ensure correct path

describe('Select2 Component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(Select2, {
      props: {
        modelValue: '',
        options: [],
        id: 'test-select',
        name: 'testName'
      }
    });
  });

  it('renders the autocomplete component', () => {
    expect(wrapper.exists()).toBeTruthy();
    const subComp = wrapper.findComponent({ name: 'Select2' });
    expect(subComp.exists()).toBeTruthy();
  });
});

Warnings:
console. warn
[Vue warn]: Prop type [] for prop "modelValue" won't match anything. Did you mean to use type Array instead? at ‹Select2 modelValue="" onUpdate:modelValue=fn class="custom-font mb-1" ...
at <Card>
at <ApproveAllAsAssociate ref="VTU_COMPONENT" >
at <VTUROOT>

console. warn
[Vue warn]: data() should return an object.
at «Select2 modelValue="" onUpdate:modelValue=fn class="custom-font mb-1" ... › at ‹Card>
at «ApproveAllAsAssociate modelValue="" ref="VTU_COMPONENT] > at <VTUROOT>