Timeline graph not show graph item even though it had data

[viviRbi]

Describe the bug
PlanSchedule.tsx , as well as a few other components, is the parent of PlanQueryField.tsx (an input form). And TimeLine component is rendered inside PlanSchedule.tsx. , timelineTaskList transformed from the data retrieved from PlanQueryField.tsx (onPassingResult(tasks), see the codes below for more info)

The issue I have is I save the PlanQueryField.tsx' result inside a session storage, PlanSchedule.tsx and other components when mounted get the passing tasks array from onPassingResult(JSON.parse(sessionStorage.get("tasks")). All components was able to get the result information, including PlanSchedule.tsx. I was able to render the tasks in PlanSchedule.tsx also.

But somehow, Timeline graph does not show the graph. Only when I then zoom out then zoom in, the graph showed up. (The data for groups (Machines) did get populated, only the graph not show up unless I zoom it out then zoom in)

Note: before, when each time went to PlanSchedule.tsx, I have to submit query to get tasks info, it works. So for 1 time render it works, but to render the same tasks again it did not work (unless I zoom. And after that, if I pan to the left, it is normal Sep, Oct, Nov. Then when pan to the right, it got reverse Nov, Oct, Sep instead of Nov, Dec, Jan)

This is when I just click on the Plan Schedule tab to move to PlanSchedule component

This is after I click on Nov 7 and zoom out then zoom in

To Reproduce

PlanSchedule.tsx

interface TimelineTask extends TimelineItemBase<any> {
  id: number;
  group: string;
  title: string;
  start_time: Date;
  end_time: Date;
  rightTitle: string;
  itemProps: any;
}

interface PlanScheduleProps {
}

const PlanSchedule: FC<PlanScheduleProps> = () => {
  const [timelineTaskList, setTimelineTaskList] = useState<TimelineTask[]>([]);
  const [group, setGroup] = useState<any[]>([])
  
const handlePassedResponseResults = (results: any[]): void => {
    setResponseResults(results);
    if (results.length > 0) {
      const transformedTasks: TimelineTask[] = results.map((task: any) => ({
        id: task.id,
        title: `${task.mo}`,
        start_time: new Date(task.start_time),
        end_time: new Date(task.end_time_plus_change_over),
        group: task.machine?.machineName,
        rightTitle: "",
        itemProps: {
          'data-custom-attribute': 'Random content',
          onDoubleClick: () => {

            setSelectedTask(task);
            setModalIsOpen(true);
           },
          // className: 'primary-btn',
          style: {
            background: 'var(--chart)',
            height: '50px'
          }
        }
      }));
      setTimelineTaskList(transformedTasks);
    } else {
      alert("No Data.")
    }
  };
  const fetchMachines = async() => {
    try{
      const response = await fetch(`${BASE_URL}/machine/all`)
      if(!response.ok) {
        alert(`HTTP error! Status: ${response.status}`)
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json();
      console.log(data)
      const groups = data.map((machine:any) => (
        {
          id:machine.machine_name, 
          title: (machine.building + " - " + machine.machine_name + " (" + (machine.active==="y"?'Active':'Inactive') + ")")
        }
    ))
    setGroup(groups)
    } catch(error){
      alert('Failed to fetch:' + error)
    }
  }

PlanSchedule.tsx render

return (
  <div className='mb-5'>
    <CuttingPlanQueryField onPassedResponseResults={handlePassedResponseResults} />

{timelineTaskList && timelineTaskList.length>0 && <p>{JSON.stringify(timelineTaskList)}</p>} // test to see if timelineTaskList exist

    <strong className="mt-3">Timeline graph</strong>
    {timelineTaskList.length > 0 ? 
    (<div className="timeline-holder">
      <Timeline 
        lineHeight={60}
        groups={group}
        items={timelineTaskList}
        canChangeGroup={false}
        canMove={false}
        minZoom={60 * 60 * 1000} // Minimum zoom level (1 hour)
        maxZoom={90 * 86400 * 1000} // Maximum zoom level (90 days)
        itemHeightRatio={0.75}
        defaultTimeStart={new Date(timelineTaskList[0].start_time)}
        defaultTimeEnd={new Date(new Date(timelineTaskList[0].start_time).getTime() + (2 * 60 * 60 *1000)/2)} // 2 hours after start time
      />
      />

Library Version
"react-calendar-timeline": "^0.28.0",
"react": "^18.3.1", "typescript": "^4.9.5",

 All browsers ha the same issue.

Additional context
If there is no suggestion, can you point out why it like that? Maybe it is related to the way it rendered? If you can give me where it cause this issue in the library maybe I could try to see if I can do anything.