Javascript – react-dropdown-date issue with day

I use react-dropdown-date component to select the date. It works well when the format is the following: year -> month -> day but when I want to change the format for exmaple: day -> month -> year then I got the issue. So, when I set the day and month the day value dissapears, clear out in the dropdown menu.

Code:

import ICustomField from '../../typings/ICostumField';
import React, {useEffect, useState} from 'react';
import {getInstanceError} from '../../utils/getInstanceError';
import {YearPicker, MonthPicker, DayPicker} from 'react-dropdown-date';
import { getUserDate } from '../../utils/utilsDate'; //getCorrectDate, 

const formatDate = (date) => {
  let d = new Date(date),
    day = '' + d.getDate(),
    month = '' + (d.getMonth() + 1),
    year = d.getFullYear();

  if (day.length < 2) day = '0' + day;
  if (month.length < 2) month = '0' + month;

  return [year, month, day].join('-');
}

const CustomField = ({register, errors, name, label, disabled, type = 'text', defaultValue = '', placeholder = '', styles = {}, setError, ...rest}: ICustomField) => {
  const [touch, setTouch] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [touchYear, setTouchYear] = useState(false);
  const [touchMonth, setTouchMonth] = useState(false);
  const [touchDay, setTouchDay] = useState(false);
  const [selectDate, setSelectDate] = useState<any>(null);
  const [year, setYear] = useState<any>();
  const [month, setMonth] = useState<any>();
  const [day, setDay] = useState<any>();
  const minDate = new Date();
  const maxDate = new Date();
  minDate.setFullYear(maxDate.getFullYear() - 100);
  maxDate.setFullYear(maxDate.getFullYear() + 3);

  const {
    getMessageError,
    getClassError
  } = getInstanceError(errors);

  const handelBlur = () => {
    setTouch(true);
  };

  useEffect(() => {
    if (year && month && day) {
      setSelectDate(new Date(year, month, day));
      setIsOpen(false);
    }
  }, [year, month, day]);

  const mes = getMessageError(name);
  if (disabled) return null;
  return (
    <div className={getClassError(name, touch)}>
      <label>{label}</label>
      {type !== 'date' && (
        <input
          name={name}
          ref={register}
          type={type}
          placeholder={placeholder}
          onBlur={handelBlur}
          defaultValue={defaultValue}
          {...rest}
        />
      )}
      {type === 'date' && (
        <>
          <input
            name={name}
            ref={register}
            value={selectDate ? getUserDate(selectDate) : ''}
            onClick={() => setIsOpen(true)}
            onBlur={handelBlur}
            placeholder={placeholder}
            readOnly={true}
          />
          {isOpen &&
            <div className='dateDropDown-container-modal'>
              <div className='dateDropDown-close' onClick={() => setIsOpen(false)}>x</div>
              <DayPicker
                defaultValue={'День'}
                year={year}
                month={month}
                endYearGiven
                required={true}
                value={day}
                onChange={(day) => {
                  setDay(day);
                  setTouchDay(true);
                }}
                id={'day'}
                name={'day'}
                classes={touchDay ? 'dateDropDown-touch' : 'dateDropDown'}
                optionClasses={'dateDropDown-option'}
              />
              <MonthPicker
                defaultValue={'Місяць'}
                numeric
                short
                caps
                endYearGiven
                year={year}
                required={true}
                value={month}
                onChange={(month) => {
                  setMonth(month);
                  setTouchMonth(true);
                }}
                id={'month'}
                name={'month'}
                classes={touchMonth ? 'dateDropDown-touch' : 'dateDropDown'}
                optionClasses={'dateDropDown-option'}
              />
              <YearPicker
                defaultValue={'Рік'}
                start={+formatDate(minDate).split('-')[0]}
                end={+formatDate(maxDate).split('-')[0]}
                reverse
                required={true}
                value={year}
                onChange={(year) => {
                  setYear(year);
                  setTouchYear(true);
                }}
                id={'year'}
                name={'year'}
                classes={touchYear ? 'dateDropDown-touch' : 'dateDropDown'}
                optionClasses={'dateDropDown-option'}
              />
            </div>
          }
        </>
      )}
      {mes && <p>{mes}</p>}
    </div>
  )
};

export default CustomField;

Screenshots:

Any ideas how to fix such issue? Thanks.