\n );\n }\n\n return (\n \n false : DayComponentProps.onDaySelect\n }\n className={classNames({\n [classes.disabledDate]: shouldDisableDate,\n [classes.enabledDate]: !shouldDisableDate,\n })}\n />\n \n );\n };\n\n /**\n * Workaround for keyboard navigation not firing onMonthChange for StaticDatePicker\n * Remove this if MUI-X fixes this:\n * https://github.com/mui/mui-x/issues/6953\n */\n const [hasRendered, setHasRendered] = useState(false);\n useEffect(() => {\n // Need to make sure the calendar has rendered before adding MutationObserver\n setHasRendered(true);\n\n // Need a reference to the observer to disconnect it\n let observer: MutationObserver | undefined;\n\n if (hasRendered) {\n const monthHeaderChanged = (e: MutationRecord[]) => {\n // Only detect the new month being added, not the old month being removed\n if (e.length && e[0].addedNodes?.length) {\n const newDateString = (e[0].addedNodes[0] as HTMLElement).innerText;\n const formattedDate = (\n parseDate(newDateString, \"MMMM yyyy\") as Date\n ).toString();\n handleMonthChange(formattedDate);\n }\n };\n\n observer = new MutationObserver(monthHeaderChanged);\n const element = document?.querySelector(\n \".MuiPickersCalendarHeader-labelContainer .MuiPickersFadeTransitionGroup-root\"\n ) as HTMLElement;\n if (element) {\n observer.observe(element, {\n childList: true,\n // subtree: true,\n // characterData: true,\n });\n }\n }\n\n return () => {\n observer?.disconnect();\n };\n }, [handleMonthChange, hasRendered]);\n\n return (\n