Invalid prop: custom validator check failed for prop "color" - using USelectMenu

[CarrotNL]

I am a, not very experienced Nuxt3 , hobby developer. Also very new to TypeScript.

I use a USelectMenu element, and I want to use a dynamic color for the outline of the button.

When I view in the browser the page looks fine, everything how I want it, but I get the following error in the browser console for every instance of the component.

[Vue warn]: Invalid prop: custom validator check failed for prop "color". ( runtime-core/dist/runtime-core.esm-bundler.js )

This is the code I use:

The component:

<USelectMenu  
v-model="row.transaction_type"
value-attribute="id"
option-attibute="label"
class="w-[160px] rounded-md"
selected-icon="i-heroicons-check-circle-20-solid"
:options="trans_types"
:icon="get_transType_icon( row.transaction_type )"
:color="get_transType_btn_color( row.transaction_type )"
:uiMenu="{ 
      option: { 
         base: 'h-8 relative',
         active: 'bg-mmmPrimary-100 rounded-none border-y border-mmmPrimary-300',
         selectedIcon: {
	   wrapper: 'absolute right-[5px]',
	   padding: '',
	   base: 'text-mmmPrimary-500/70 size-[15px]',
      },
   }
}">
{{ label here }}
</USelectMenu>

The function that returns the color:

<script lang=ts setup>

import type { SelectColor } from '#ui/types'

// Get the color for the button outline
   const get_transType_btn_color = ( transType_id: string ): SelectColor|undefined => {

      switch ( trans_types.find( o => o.id === transType_id)?.id ) {

         case 'IN': 
            return 'mmmAmountIn' as SelectColor
            break
            
         case 'OUT':
            return 'mmmAmountOut' as SelectColor
            break
         
         case 'LOAN_IN':
         case 'LOAN_OUT':
            return 'mmmAmountLoan' as SelectColor
            break

         case 'SAVE_IN':
         case 'SAVE_OUT':
            return 'mmmAmountSave' as SelectColor
            break
      }

   }
</script>

The documentation for USelectMenu says the color prop should be of type string, but when I return a string, vscode gives me the following error:

Type 'string | undefined' is not assignable to type 'SelectColor | undefined'.
  Type 'string' is not assignable to type 'SelectColor | undefined'.

Am I doing something wrong here, or is this a bug?

[CarrotNL]

I forgot to mention: I added the colors to tailwind, and I also safelisted the colors in 'nuxt.config.ts'. The colors do work on the page.