I am new to JavaScript and FullCalender.So any help would be appreciated.
I want to add a unique ID to FullCalender Month, Week & Day button.But as per my understanding FullCalendar library’s buttonText property expects a structure where the values are strings rather than objects, as specified in the ButtonTextCompoundInput interface. Is there anyway to add a unique ID to each button?

here’s the code:

function Calendar(){  
  let isValid                           = false  
  const { isLoading, error, data}       = useCalendar()
  const {status, data:timetableData}    = useTimetable() 
  const handleEventMount                = (info) => {EventMount(info)}  
  const { isOpen, onOpen, onClose }     = useDisclosure()
  const [event, setEvent]               = useState({title:'',description:{timetableType:'',activity:'',title:'',moduleName:'',type:'',room:'',staff:'',timetable:'',moduleCode:'',start:'',end:'',site:''}}); 
  if(isLoading || status === "loading") return (<h1>Loading...</h1>)
  if(error || status === "error")       return (<Box><Error/></Box>)
  isValid= status === "success" && timetableData != undefined && timetableData?.includes("BEGIN:VCALENDAR") ? true: false   
 
  return(
    <Box>
      
      <FullCalendar initialView = "timeGridFiveDaysWeek"
        buttonText        = {{today:"Today",month:"Month",timeGridFiveDaysWeek:"Week", day:"Day"}}
        height            = "auto"
        nowIndicator      = {true}
        headerToolbar     = {{left: "prev,next today",
                              center: "title",
                              right: "dayGridMonth,timeGridFiveDaysWeek,timeGridDay"
                            }}
        plugins           = {[interaction, dayGridPlugin, timeGridPlugin, iCalendarPlugin]}
        slotMinTime       = {"07:00:00"}
        slotMaxTime       = {"22:00:00"}
        locale            = {'en-gb'}
        firstDay          = {1}
        eventTimeFormat   = {{hour: '2-digit',minute: '2-digit',hour12: false}}
        views             = {{
                              timeGridFiveDaysWeek:{type: 'timeGridWeek',duration:{days: 7},dateAlignment:'week',slotEventOverlap:false},
                              dayGridMonth:{displayEventEnd:true, dayMaxEvents:6,moreLinkClick:"day"},
                              timeGridDay:{slotEventOverlap:false}
                            }}
        eventInteractive  = {true}
        eventClick        = {(eventData)=>{onOpen();setEvent(GetEventDetails(eventData))}}        
        eventSources      = {GetEventSources(data,isValid)}
        eventDidMount     = {handleEventMount}       
        eventDataTransform= {(eventData):any=>{TransformData(eventData)}}        
      />
    </Box>
  ) 
}

export default function CalendarFull(){
  return {
    id      : "timetable",
    label   : "Your timetable",
    content : <Calendar/>    
  }
}

ButtonTextCompoundInput Component:

    interface ButtonTextCompoundInput {
    prev?: string;
    next?: string;
    prevYear?: string;
    nextYear?: string;
    today?: string;
    month?: string;
    week?: string;
    day?: string;
    [viewOrCustomButton: string]: string | undefined;
}

Any suggestion/help would highly be appreciated.