const CalendarUI2 =  () => {
    const calendars = [{ id: 'cal1', name: 'Personal'}];
    const calendarRef = useRef();
    const [tasks, setTasks] = useState([]);
    
    const onloaded = () => {
      const calendarInstance = calendarRef.current.getInstance();
      calendarInstance.setOptions({
        timezone: {
          zones: [
            {
              timezoneName: 'etc/UTC',
              displayLabel: 'UTC',
              tooltip: 'UTC Time',
            },
            {
              timezoneName: 'Asia/Seoul',
              displayLabel: 'Seoul',
              tooltip: 'Seoul Time',
            },
          ],
        }
      });
      
      let taskArr = [];
      for (let index = 1; index < 10; index++) {
        taskArr.push({
          id: index,
          calendarId: 'cal1',
          title: index,
          category: 'time',
          start: new TZDate('2024-10-0'+(index )+'T00:00:00'),
          end: new TZDate('2024-10-0'+(index )+'T01:00:00'),
          customStyle : {
            color : "white"
          }
        });
        
      }
      setTasks(taskArr);

    }
    
      useEffect(() => {
        onloaded();
        
      }, [])

    return <Box p={10} maxH="800px">
      <VStack spacing={4} align='stretch'>
        <Calendar
          view={'month'}
          usageStatistics={false}
          calendars={calendars}
          events={tasks}
          ref={calendarRef}
          useDetailPopup={false}
          useFormPopup={false}
        />
      </VStack>
    </Box>
}




## Expected Behavior
The above code is causing an error, possibly due to the timezone configuration. Is there a solution to fix this?

![image](https://github.com/user-attachments/assets/07283f1d-87a4-47b8-9efa-6cf53ff918fb)