KendoReact Chart panning issue for ChartSeriesItem with map function

Looking for a kendoReact PANNABLE column chart by generating <ChartSeriesItem> with map method. But panning is not working and instead it keep reducing column width to fit in browser. I tried below code.

Tried by setting 'pannable true' and 'zoomable true' but it works only when bind data without map.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'hammerjs';

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem
} from '@progress/kendo-react-charts';


const categories = [2002, 2003, 2004, 2002, 2003, 2004, 2005, 2006, 2007];
const series = [
  {
    name: "India",
    data: [3.907, 7.943, 7.848, 3.907, 7.943, 7.848, 3.907, 7.943, 7.848],
    category: 2002
  },
  {
    name: "Russian Federation",
    data: [4.743, 7.295, 7.175, 4.743, 7.295, 7.175, 4.743, 7.295, 7.175]
  },
  {
    name: "Germany",
    data: [0.21, 0.375, 1.161, 0.21, 0.375, 1.161, 0.21, 0.375, 1.161]
  },
  {
    name: "World",
    data: [1.988, 2.733, 3.994, 1.988, 2.733, 3.994, 1.988, 2.733, 3.994]
  }
];

const generateSeries = () => {
    const series = [];

    for (let idx = 0; idx < 10000; idx++) {
        series.push({
            value: Math.floor(Math.random() * 100) + 1,
            category: new Date(2000, 0, idx)
        });
    }

    return series;
};

class ChartContainer extends React.Component {
    render() {
        return (
            <Chart pannable={true} zoomable={true}>
            <ChartCategoryAxis>
              <ChartCategoryAxisItem categories={categories} />
            </ChartCategoryAxis>
            <ChartSeries>
              {series.map((item, idx) => (
                <ChartSeriesItem
                  key={idx}
                  type="column"
                  tooltip={{ visible: true }}
                  data={item.data}
                  name={item.name}
                />
              ))}
            </ChartSeries>
            </Chart>
        );
    }
}

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

stackblitz - https://stackblitz.com/edit/react-afgicw?file=app/main.jsx

By setting the max options of the category axis enabled the panning by default onload. otherwise it was keep shrinking the width of column to keep visible all.

<ChartCategoryAxisItem categories={categories} max={5} />