Untitled

import {useState, useEffect} from 'react'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { DateTime } from "luxon";
import {Box} from '@mui/material';

export const MyComponent = () => {

const [selectedDate, setSelectedDate] = useState<DateTime | null>(null);

const maxDate = DateTime.local().plus({ days: 1000 }); 

useEffect(() => {    
    if(!selectedDate) {
        console.log('no selected date')
        return;
    }
  
    console.log('useEffect[selectedDate]', selectedDate.toISO()) //this prints useEffect[selectedDate] 2026-07-09T14:47:48.114+03:00 after changing the year 
}, [selectedDate])

const handleSelectDate = (date: DateTime | null) => {    
    setSelectedDate(date);    
}

return (        
    <Box>        
        <LocalizationProvider dateAdapter={AdapterLuxon}>
            <DateCalendar      
                value={selectedDate}
                onChange={handleSelectDate}
                maxDate={maxDate}   
            />                            
        </LocalizationProvider>
    </Box>
  )
}