'response-calendar-timeline' отображает данные неправильной даты при первой загрузке (холст не совпадает с заголовком даты)

Question

Я использую пакет в моем коде. Диапазон сроков - 10 дней.

Когда временная шкала загружена, на ней должны отображаться элементы за 10 дней с сегодняшнего дня. DateHeader всегда загружается правильно, но на холсте отображаются элементы за 10 дней до этого.

Вот несколько примеров. Группа 1 имеет элемент в диапазоне 07 27 ~ 07 29.

Однако на холсте значение элемента находится в диапазоне 08 06 ~. первая загрузка

После нажатия кнопки «Назад» или «Далее» на холсте отображается элемент правильно. после нажатия предыдущей кнопки

Но после нажатия кнопки prev10 или next10 (перед тем, как щелкнуть предыдущий или следующий), на холсте отображается неправильный элемент. нажмите кнопку Next10 после первой загрузки

Это мой код:

      
var keys = {
    groupIdKey: 'id',
    groupTitleKey: 'title',
    groupRightTitleKey: 'rightTitle',
    itemIdKey: 'id',
    itemTitleKey: 'title',
    itemDivTitleKey: 'title',
    itemGroupKey: 'group',
    itemTimeStartKey: 'start',
    itemTimeEndKey: 'end',
    groupLabelKey: 'title'
};

class CustomTimeline extends Component {
    constructor(props) {
        super(props);
        const groups = [];
        const items = [];       
        const visibleTimeStart = moment()
            .startOf('day')
            .valueOf();
        const visibleTimeEnd = moment()
            .startOf('day')
            .add(10, 'day')
            .valueOf();
        const zoom = visibleTimeEnd - visibleTimeStart;
        this.state = { groups, items, visibleTimeStart, visibleTimeEnd, zoom };
    };
    async componentDidMount() {
        const {groups, items} = await GanttData();
        this.setState(() => ({
            groups: groups,
            items: items
        }));
    } 
    onPrevClick = () => {       
        this.setState(state => ({
            visibleTimeStart: state.visibleTimeStart - state.zoom / 10,
            visibleTimeEnd: state.visibleTimeEnd - state.zoom / 10
        }));
    };
    onNextClick = () => {
        this.setState(state => ({
            visibleTimeStart: state.visibleTimeStart + state.zoom / 10,
            visibleTimeEnd: state.visibleTimeEnd + state.zoom / 10
        }));
    };
    onPrev10Click = () => {
        this.setState(state => ({
            visibleTimeStart: state.visibleTimeStart - state.zoom,
            visibleTimeEnd: state.visibleTimeEnd - state.zoom
        }));
    };
    onNext10Click = () => {
        this.setState(state => ({
            visibleTimeStart: state.visibleTimeStart + state.zoom,
            visibleTimeEnd: state.visibleTimeEnd + state.zoom
        }));
    };
    handleCanvasClick = (groupId, time) => {
        this.props.history.push('/Resv/' + groupId + '/' + time)
    }
    render() {
        const { classes } = this.props;
        const { groups, items, visibleTimeStart, visibleTimeEnd } = this.state;
        return (
            <div className={classes.root}>
                <Paper className={classes.buttonBar}>
                    <Button variant='outlined' onClick={this.onPrev10Click}>{'< Prev10'}</Button>
                    <Button variant='outlined' onClick={this.onPrevClick}>{'< Prev'}</Button>
                    <Button variant='outlined' onClick={this.onNextClick}>{'Next >'}</Button>
                    <Button variant='outlined' onClick={this.onNext10Click}>{'Next10 >'}</Button>
                </Paper>
                <Paper className={classes.paper}>
                    <Timeline
                        scrollRef={el => (this.scrollRef = el)}
                        groups={groups}
                        items={items}
                        keys={keys}
                        itemTouchSendsClick={false}
                        stackItems
                        itemHeightRatio={0.75}
                        showCursorLine
                        canMove={false}
                        canResize={false}
                        visibleTimeStart={visibleTimeStart}
                        visibleTimeEnd={visibleTimeEnd}
                        onCanvasClick={this.handleCanvasClick}
                    >
                        <TimelineHeaders >
                            <SidebarHeader />
                            <DateHeader labelFormat='MM DD' />
                        </TimelineHeaders>
                    </Timeline>
                </Paper>
            </div>
        );
    }
}
export default withRouter(withStyles(useStyles)(CustomTimeline))