Duplicate entries in X axis when Zooming Out on Mui Line Charts

Trying to use the MUI Line Charts and when implementing it make it responsive BUT, for some reason i dont know, when zooming out it duplicates the X axis entries it has, in this case i have the months of the year and when doing this i get 3 of each month and even some empty spaces. NORMAL:IMAGE WITHOUT ZOOM ZOOMED OUT: IMAGE WITH LESS THAN 100% ZOOM

"use client";
import { LineChart } from '@mui/x-charts/LineChart';
import styles from "./HistoryGraph.module.css";
import { Skeleton } from '@mui/material';
import { useEffect, useState } from 'react';

export default function HistoryGraph() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  // Fetch data from the API endpoint
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('http://localhost:8000/api/v1/invoices/getInvoicesStats?company_id=1&year=2024');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        setData([
          10000,
          30420,
          222222,
          99999,
          742192,
          120341,
          321353,
          1000000,
          12343,
          556542,
          23424,
          223034
        ]);
        console.error("Failed to fetch data", error);
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  // Prepare data for the chart
  const months = [
    new Date(2024, 0, 1),
    new Date(2024, 1, 1),
    new Date(2024, 2, 1),
    new Date(2024, 3, 1),
    new Date(2024, 4, 1),
    new Date(2024, 5, 1),
    new Date(2024, 6, 1),
    new Date(2024, 7, 1),
    new Date(2024, 8, 1),
    new Date(2024, 9, 1),
    new Date(2024, 10, 1),
    new Date(2024, 11, 1),
  ];

  const seriesData = [
    {
      id: 'Monthly Total',
      //label: 'Monthly Total',
      data: data,
      showMark: false,
      color: '#0163fa' // Example color for the total
    }
  ];

  const monthDict = {
    0: "Jan",
    1: "Feb",
    2: "Mar",
    3: "Apr",
    4: "May",
    5: "Jun",
    6: "Jul",
    7: "Aug",
    8: "Sep",
    9: "Oct",
    10: "Nov",
    11: "Dec",
  };

  return (
    <div className={styles.container}>
      {loading ? (
        <>
          <Skeleton variant="text" width={100} height={30} sx={{ margin: 2 }} />
          <Skeleton variant="rectangular" height="22rem" className={styles.chartSkeleton} />
        </>
      ) : (
        <>
          <h2>Reclaims Analytics</h2>
          <LineChart
            xAxis={[
              {
                id: 'Months',
                data: months,
                scaleType: 'time',
                valueFormatter: (date) => monthDict[date.getMonth()],
              },
            ]}
            series={seriesData}
            className={styles.chart}
            grid={{ vertical: true }}
            tooltip={{ show: true }}
            margin={{ top: 70, right: 70,  left: 70 }}
          />
        </>
      )}
    </div>
  );
}

I have checked out some options like using the ResponsiveContainer for the line chart like stated here but could not get it to render, also tried limiting the ticks of the chart which i read limits the amount of X axis numbers, but still nothing

Dependency List:

  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/material": "^5.16.0",
    "@mui/x-charts": "^7.11.0",
    "@mui/x-date-pickers": "^7.9.0",
    "@phosphor-icons/react": "^2.1.6",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-toast": "^1.2.1",
    "@table-library/react-table-library": "^4.1.7",
    "chart.js": "^4.4.3",
    "clsx": "^2.1.1",
    "dayjs": "^1.11.11",
    "next": "14.2.4",
    "next-auth": "^5.0.0-beta.20",
    "react": "^18",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18",
    "react-drag-drop-files": "^2.3.10"
  },

SOLVED!

The issue that i was having was that it seems like the scaleType that i had selected which 'time' seemd the right choice was not. After switching it to 'point' it solved my issue.

scaleType: 'time' -> scaleType: 'point'

There are more types in the MUI documentation, so if it still not working try out more of them. https://mui.com/x/api/charts/spark-line-chart/