I am using vMaska to mask text in input in a Vue 3 project.
I should pass mask and maskToken props separately (constraint company).
I try to combine this two props in a maskOptions.

<template>
  <input :id="name" v-model="maskedValue"
    :inputmode="inputType === 'number' ? 'numeric' : undefined" 
    :name="name"
    :type="inputType === 'number' ? 'text' : inputType" 
    v-maska="maskOptions" 
    @maska="onMaska"
 />

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { vMaska } from 'maska/vue'
import { MaskaDetail } from 'maska'
import type { MaskInputOptions, MaskTokens } from "maska"

interface Props {
  inputType?: string
  label?: string | null
  name: string
  bindedObject?: { masked: string; unmasked: string; completed: boolean } | null
  mask: string
  maskToken?: object
}

const props = withDefaults(defineProps<Props>(), {
  inputType: 'text',
  bindedObject: null
})

defineModel<string | null>({ required: true })
const emits = defineEmits(['click-infobutton'])

const maskedValue = ref('')

const maskOptions = reactive<MaskInputOptions>({
  mask: props.mask,
  tokens: props.maskToken, //ERROR IN THIS LINE
})

const onMaska = (event: CustomEvent<MaskaDetail>) => {
  maskedValue.value = event.detail.masked
  if (props.bindedObject) {
    props.bindedObject.masked = event.detail.masked
    props.bindedObject.unmasked = event.detail.unmasked
    props.bindedObject.completed = event.detail.completed
  }
}

defineExpose({ maskedValue })
</script>

In this line tokens: props.maskToken , I get this error “Type ‘object | undefined’ is not assignable to type ‘MaskTokens | undefined’.ts-plugin(2322)
maska.d.ts(53, 5): The expected type comes from property ‘tokens’ which is declared here on type ‘MaskInputOptions'”
I want to add that this story of storybook is working correctly even with the error.

export const WithMaskTokens: Story = {
  name: 'With custom mask and tokens',
  args: {
    mask: 'AAAA/00',
    maskToken: {
      A: { pattern: /[A-Z]/ },
      0: { pattern: /[01]/ }
    },
    label: 'Example with custom tokens'
  },
  render: (args) => ({
    components: { MaskedTextbox },
    setup() {
      const value = ref('')
      const bindedObject = reactive({ masked: '', unmasked: '', completed: false })
      return { args, value, bindedObject }
    },
    template: `
    <MaskedTextbox 
      v-model="value"    
      :bindedObject="bindedObject"  
      :mask="args.mask"
      :maskToken="args.maskToken"
      :label="args.label" 
      name="example"
      placeholder="AZER/10"
      description="Doit contenir 4 lettres majuscules et un chiffre composé de 0 et 1"
    />
    <p>Masked: {{ bindedObject.masked }}</p>
    <p>Unmasked: {{ bindedObject.unmasked }}</p>
    <p>Completed: {{ bindedObject.completed }}</p>
  `
  }),
  decorators: [withCodeSnippet],
  parameters: {
    txtAlign: 'left',
    code: `
    const mask = 'AAAA/00',
    const maskToken = {
      A: { pattern: /[A-Z]/ },
      0: { pattern: /[01]/ }
    }
    const bindedObject = reactive({ masked: '', unmasked: '', completed: false })
    <MaskedTextbox 
      v-model="value"    
      :bindedObject="bindedObject"  
      :mask="mask"
      :maskToken="maskToken"
      label="Example" 
      name="example"
    />
    `
  }
}

How can I correct the type of tokens?