Creating custom actions header - reactjs

Question

I have problem tracking updated state from fullcalendar in my custom actions header.
I have ref to fullcalendar in parent component that I'm passing as a prop to this child. Then I render calendar itself. OnClicks work but calApi.getApi().getDate() doesn't update value when It changes.
const Actions: FC<ActionsProps> = ({ calApi }) => {
const { t } = useTranslation();
const onToday = () => calApi.getApi().today();
const changeView = (changedView: CalendarView) => calApi.getApi().changeView(changedView);
const onPrev = () => calApi.getApi().prev();
const onNext = () => calApi.getApi().next();
return (
<Grid container spacing={3} alignItems="center" justifyContent="space-between">
<Grid item>
<Tooltip arrow placement="top" title={t('Previous Day').toString()}>
<IconButton color="primary" onClick={onPrev}>
<ArrowBackTwoToneIcon />
</IconButton>
</Tooltip>
<Tooltip arrow placement="top" title={t('Today').toString()}>
<IconButton
color="primary"
sx={{
mx: 1
}}
onClick={onToday}
>
<TodayTwoToneIcon />
</IconButton>
</Tooltip>
<Tooltip arrow placement="top" title={t('Next Day').toString()}>
<IconButton color="primary" onClick={onNext}>
<ArrowForwardTwoToneIcon />
</IconButton>
</Tooltip>
</Grid>
<Grid
item
sx={{
display: { xs: 'none', sm: 'inline-block' }
}}
>
<Typography variant="h3" color="text.primary">
{format(calApi.getApi().getDate(), 'MMMM yyyy')}
</Typography>
</Grid>
<Grid
item
sx={{
display: { xs: 'none', sm: 'inline-block' }
}}
>
{viewOptions.map((viewOption) => {
const Icon = viewOption.icon;
return (
<Tooltip key={viewOption.value} arrow placement="top" title={t(viewOption.label).toString()}>
<IconButton
color={
viewOption.value === calApi.getApi().getCurrentData().currentViewType
? 'primary'
: 'secondary'
}
onClick={() => changeView?.(viewOption.value)}
>
<Icon />
</IconButton>
</Tooltip>
);
})}
</Grid>
</Grid>
);
};