Dayjs Locale with React

Question

So I'm trying to show locale of German in my React app with dayjs but is not working, here is my code, i tried to add locale('de') but that is not doing the job, so i don't know what to try next. I'm trying to learn how to do it, and I don't know if i need to import a locale or it does it take it from 'dayjs'

import React, { Fragment, useContext, useEffect, useState } from 'react';
import dayjs from 'dayjs';
import { getMonth } from '../../utils/calendar/dayjs';
import GlobalContext from '../../context/calendar/GlobalContext';
import styles from '../../styles/Calendar.module.scss';

function SmallCalendar() {
  const [currentMonthIdx, setCurrentMonthIdx] = useState(dayjs().month());
  const [currentMonth, setCurrentMonth] = useState(getMonth());

  useEffect(() => {
    setCurrentMonth(getMonth(currentMonthIdx));
  }, [currentMonthIdx]);

  const { monthIndex, setSmallCalendarMonth, setDaySelected, daySelected } =
    useContext(GlobalContext);

  useEffect(() => {
    setCurrentMonthIdx(monthIndex);
  }, [monthIndex]);


  function getDayClass(day) {
    const format = 'DD-MM-YY';
    const nowDay = dayjs().format(format);
    const currDay = day.format(format);
    const slcDay = daySelected && daySelected.format(format);

    if (nowDay === currDay) return styles.day_active;
    else if (currDay === slcDay) return styles.day_selected;
    else return '';
  }

  return (
    <div className={styles.minicalendar}>
      <header className={styles.calendar_header}>
        <p
          style={{ color: 'var(--color-active)' }}
          className='text-gray-500 font-bold'>
          {dayjs(new Date(dayjs().locale('de').year(), currentMonthIdx)).format(
            'DD MMMM YYYY'
          )}
        </p>
  
      </header>
      <div
        className={`grid grid-cols-7 grid-rows-6 ${styles.minicalendar_body}`}>
        {currentMonth[0].map((day, i) => (
          <span key={i} className='text-sm py-1 text-center'>
            {day.format('dd').charAt(0)}
          </span>
        ))}
        {currentMonth.map((row, i) => (
          <Fragment key={i}>
            {row.map((day, inx) => (
              <button
                key={inx}
                onClick={() => {
                  setSmallCalendarMonth(currentMonthIdx);
                  setDaySelected(day);
                }}
                className={`py-1 w-full ${getDayClass(day)}`}>
                <span className='text-sm'>{day.format('D')}</span>
              </button>
            ))}
          </Fragment>
        ))}
      </div>
    </div>
  );
}

export default SmallCalendar;