customUseDateSelectHook.js

import { useDateSelect as defaultUseDateSelect } from "react-ymd-date-select"
import { useMemo } from "react"

const getMonthDays = (year, month) => {
  return new Date(year, month, 0).getDate()
}

export const useDateSelect = (...params) => {
  const dateSelect = defaultUseDateSelect(...params)
  const { yearValue, monthValue, dayOptions: defaultDayOptions, dayValue, onDayChange } = dateSelect

  const { dayOptions } = useMemo(() => {
    const monthDays = getMonthDays(yearValue, monthValue)
    if (dayValue > monthDays) {
      onDayChange("")
    }
    return {
      dayOptions: defaultDayOptions.filter((dayOption) => dayOption.value <= monthDays),
      monthDays,
    }
  }, [yearValue, monthValue])

  return {
    ...dateSelect,
    dayOptions,
  }
}