react-visjs-timeline-2 display problem, cannot show the items correctly

Question

Tried the below code, but after render, the items displayed in incorrect time, and when zoom in or out the time display also incorrect, it is not the same as the time i set to it, and the zoom, it does not same as before zooming.?Why? Thanks, YOu can try it in https://codesandbox.io/s/t89oc?file=/src/App.js

import React, { useState, useRef, useEffect } from "react";
import Timeline from "react-vis-timeline-2";
const items = [
    {
        group: '1',
        start: new Date(2022, 0, 15),
        end: new Date(2022, 1, 2), // end is optional
        content: "Trajectory A",
        type: 'range'
    }
  ];

const groups = [
    {
        id: '1',
        content: '1',
        order: 1
    }
];

export default function TestTimeLine2() {

    const timelineRef = useRef(null);

    React.useEffect(() => {
        timelineRef.current.timeline.setGroups(groups);
        timelineRef.current.timeline.setItems(items);

    },[]);

    return (
      <div className="App">
        <Timeline
          ref={timelineRef}
        />
      </div>
    );
}