How to add an extra class on highlightedwhich is added by highlighted props vuejs3-datepicker

Question

I am using import Datepicker from 'vuejs3-datepicker'; and I am using highlighted props to highlight specific dates but I want to color highlighted dates with different color but 'vuejs3-datepicker' only adding highlighted class to the cell-day this how it is adding.

<span class="cell day highlighted">29</span>

I wanted to add different class names with the highlighted class for example

<span class="cell day highlighted yellow-color">27</span>
<span class="cell day highlighted blue-color">28</span>
<span class="cell day highlighted red-color">29</span>

so I can use class to manipulate the styles of cell-day of vue3js-datepicker

What i am trying right now

<template>
    <Datepicker name="mycolor" class="calen" id="col-id" :inline="isInline" :full-month-name="true"
                         :minimum-view="'day'" :maximum-view="'day'" 
                         :highlighted="highlighted"
                        />
</template>

import Datepicker from 'vuejs3-datepicker';

export default {
    data() {
       return {
         highlighted:{
                dates:[]
            }
       }
    },
    
   methods: {
       calculatesColorDates(){
            //some code where i am converting dates or manipulating data to pass on             highlighted props formate
    
            this.highlighted.dates.push(yellowDates)
            this.highlighted.dates.push(redDates)
            this.highlighted.dates.push(blueDates)
            console.log(this.highlighted, 'highlighted')
    }

}

If there is any other way to color the cellday on specifc dates on specific date that will be greatful and very helpful

Doc link to vuejs3-datepicker - https://www.npmjs.com/package/vuejs3-datepicker