By clicking on the right or left arrow, change the month and the dates of this month with Reactjs

Question

I need that by clicking the arrows on both the right and the left, it changes the name of the month and consequently the days of those month.

Example: click on the right arrow, change from "January" to "February" and days show 28, not 31 as this default.

Code:

export function createDaysOfMonth(limit: number = 31): number[] { 
    let months: number[] = [];

    for (let i = 1; i <= limit; i++) {
        months = [...months, i]
    }

    return months; }

const allMonths = ['Janeiro', 'Fvereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']

function HConciliationFilter({...props}) {
    const { onChange } = props;
    const css = useStyles(useTheme());
    const months: number[] = createDaysOfMonth();

    const onSelect = (day) => setSelectedDay(day);

    const [selectedDay, setSelectedDay] = useState<number>();

   /*  useEffect(() => {
        onChange(selectedDay);
    }, [selectedDay]) */

    return (
        <>
            <Box className={css.iconArrow}>
                <IconButton>
                    <ArrowLeftIcon />
                </IconButton>
                  {allMonths}
                <IconButton>
                    <ArrowRightIcon />
                </IconButton>
            </Box>
        <Box className={css.allMonths}>
            {months.map((day) => (
                <Box 
                    key={`${day}`}
                    className={
                        clsx(css.day, { 
                            [css.selectedDay]: day == selectedDay
                        })
                    }
                    onClick={() => onSelect(day)}
                >
                    {`${day}`}
                </Box>
            ))}
        </Box>
    </>
    ) }