What am I developing?

I'm creating a tab component to horizontally scroll through and select a date in a month.
The MUI library is being used for this purpose.

Issue

Currently, the site is not displaying the dates before 14th Sun. (See image below)
The first tab should show the 1st day of the month, but instead, it displays 14th Sun.

Tab Component Code

import { useContext, useState } from 'react';
import * as React from 'react';
import { styled } from '@mui/system';
import Tabs from '@mui/base/Tabs';
import TabsList from '@mui/base/TabsList';
import TabPanel from '@mui/base/TabPanel';
import { buttonClasses } from '@mui/base/Button';
import Tab, { tabClasses } from '@mui/base/Tab';
import { Box, Typography } from '@mui/material';
import getDatesInMonth from '@/utils/getDatesInMonth';
import { dateContext } from '@/pages/mob';

export default function DayScrollView() {
  const [activeDate, setActiveDate] = useContext(dateContext)
  const [dates, setDates] = useState(getDatesInMonth(activeDate))
  return (
    <Box sx={
      {
        overflowX: 'scroll',
        scrollbarWidth: 'none',
        '-ms-overflow-style': 'none',
        '&::-webkit-scrollbar': {
          display: 'none',
        },
      }
    }>
      <Tabs defaultValue={0}>
        <StyledTabsList>
          {dates.map((date, index) => {
            console.log(date)
            return (
              <StyledTab key={index} value={index} onClick={() => setActiveDate(date)}>
                <Typography variant='subtitle1'>{date.toLocaleString('default', { weekday: 'short' })}</Typography>
                <Typography variant='h5'>{date.getDate()}</Typography>
              </StyledTab>
            )
          })}
        </StyledTabsList>
      </Tabs>
      <Box mr={10} sx={{ width: 20 }} />
    </Box>
  );
}

const StyledTab = styled(Tab)`
.... some css styles
`;

const StyledTabPanel = styled(TabPanel)(
  ({ theme }) => `
  width: 100%;
  ... more styles
  `,
);

const StyledTabsList = styled(TabsList)(
  ({ theme }) => `
  padding-right: 1rem;
  ...more styles
`,
);

getDatesInMonth() Function

function getDatesInMonth(date) {
    const year = date.getFullYear();
    const month = date.getMonth();
    const numDays = new Date(year, month + 1, 0).getDate();
    const dates = [];
    for (let i = 1; i <= numDays; i++) {
        dates.push(new Date(year, month, i));
    }
    return dates;
}

If you require further information, please leave a comment.
If you know someone who can assist, please upvote and share the question.

Answers(1)

Accepted Answer

The component is a horizontally scrollable tab component for selecting dates in a month, using the MUI library. The problem is that the dates before the 14th Sunday are not showing on the site and the first tab should be the 1st day of the month, but instead, it is the 14th Sunday. The component code includes a function called getDatesInMonth() which returns an array of dates for the month provided as the input argument. If more information is needed, please write in the comments.