Reactjs – Ant Design Chart blocks page scroll on mobile web

On react app I have a page containing 6-7 ant design plot charts, there is also other content on that page. Now the problem with antd chart is when trying to scroll with touch on mobile phone (Android). touch on the chart blocks the page scroll, like the page does not scroll when thumb on any of these charts. only showing the tooltip of the chart. How can I solve this issue? @ant-design/plots": "^2.1.13" that the version used. also tried different versions by upgrading or downgrading the version but the result is the same. Here is have added one example snippet.

import { DualAxes } from '@ant-design/plots';

export const EarningsPerShare = () => {
  const formattedData = [
    {
      value: 3.64,
      year: 2023,
      type: 'EPS',
    },
    {
      value: 1.85,
      year: 2022,
      type: 'EPS',
    },
    {
      value: 2.14,
      year: 2021,
      type: 'EPS',
    },
    {
      value: 2.14,
      year: 2021,
      type: 'EPS',
    },
    {
      value: 3.19,
      year: 2020,
      type: 'EPS',
    },
    {
      value: 3.19,
      year: 2020,
      type: 'EPS',
    },
    {
      value: 4,
      year: 2019,
      type: 'EPS',
    },
    {
      value: 4,
      year: 2019,
      type: 'EPS',
    },
    {
      value: 4.01,
      year: 2018,
      type: 'EPS',
    },
    {
      value: 3.22,
      year: 2017,
      type: 'EPS',
    },
  ];

  const config = {
    xField: 'year',
    legend: false,
    tooltip: {
      items: [
        {
          channel: 'y',
          name: 'EPS',
          valueFormatter: (d: any) => {
            return `${d}`;
          },
        },
      ],
    },
    scrollbar: {
      x: {
        style: {
          trackSize: 20,
          isRound: true,
        },
      },
      y: false,
    },
    children: [
      {
        data: formattedData,
        type: 'interval',
        yField: 'value',
        stack: true,
        colorField: 'type',
        style: { maxWidth: 20, minWidth: 20 },
        interaction: { elementHighlightByColor: { background: true } },
        scale: {
          color: {
            relations: [['EPS', '#5b9bd5']],
          },
        },
      },
    ],
  };

  if (!formattedData || formattedData?.length <= 0) {
    return <span></span>;
  }

  return (
    <div className="flex flex-col w-full px-3 mt-2">
      <div className="h-[300px]">
        <DualAxes {...config} />
      </div>
    </div>
  );
};