[React]生年月日入力欄を作成

import React, { useRef, useState, useEffect } from "react";

export const SignUp = () => {

   const birthYearRef = useRef(null);
   const birthMonthRef = useRef(null);
   const birthDayRef = useRef(null);

   const [age, setAge] = useState(''); // birthYaer, Month, Dayをまとめたもの
   const [birthYear, setBirthYear] = useState(new Date().getFullYear());
   const [birthMonth, setBirthMonth] = useState(new Date().getMonth() + 1);
   const [birthDay, setBirthDay] = useState(new Date().getDay());

   const selectBirthYear = (e) => {
       setBirthYear(e.target.value);
       setAge(`${birthYear}_${birthMonth}_${birthDay}`);
   }
   const selectBirthMonth = (e) => {
       setBirthMonth(e.target.value);
       setAge(`${birthYear}_${birthMonth}_${birthDay}`);
   }
   const selectBirthDay = (e) => {
       setBirthDay(e.target.value);
       setAge(`${birthYear}_${birthMonth}_${birthDay}`);
   }
   // 生年月日入力欄生成
   const setYear = () => {
       // 年を生成
       for(let i = 1900; i <= new Date().getFullYear(); i++){
         let op = document.createElement('option');
         op.value = i;
         op.text = i;
         if (birthYearRef.current) birthYearRef.current.appendChild(op);                                      
       }
       birthYearRef.current.value = birthYear;
   }
   const setMonth = () => {
       // 月を生成
       for(let i = 1; i <= 12; i++){
           let op = document.createElement('option');
           op.value = i;
           op.text = i;
           if (birthMonthRef.current) birthMonthRef.current.appendChild(op);                                            
       }
       if (birthMonthRef.current) birthMonthRef.current.value = birthMonth;
   }
   const setDay = () => {
       //日を空にする
       let children;
       if (birthDayRef.current) children = birthDayRef.current.children;
       while (children.length) {
           children[0].remove();
       }
       // 日を生成
       if(birthYearRef.current && birthYearRef.current.value !== '' && birthMonthRef.current && birthMonthRef.value !== ''){
           const lastday = new Date(Number(birthYearRef.current.value), Number(birthMonthRef.current.value), 0).getDate();
           for (let i = 1; i <= lastday; i++) {
               let op = document.createElement('option');
               op.value = i;
               op.text = i;
               birthDayRef.current.appendChild(op);
                   
           }
           birthDayRef.current.value = birthDay;
       }
   }
   
   useEffect(() => {
       setYear();
       setMonth();
       setDay();
   }, []);
   
   useEffect(() => {
       setDay();
   }, [birthYear, birthMonth]);
   
   return (		
		<div className={classes.column}>

           <p className={classes.plate}>生年月日</p>
           <select ref={birthYearRef} value={birthYear} onChange={selectBirthYear} id="birth-year" name="year"></select>年
           <select ref={birthMonthRef} value={birthMonth} onChange={selectBirthMonth} id="birth-month" name="month"></select>月
           <select ref={birthDayRef} value={birthDay} onChange={selectBirthDay} id="birth-day" name="day"></select>日

       </div>
	);
}

このuseEffectによって年、月が変更された時に日付を計算し直す

useEffect(() => {
       setDay();
   }, [birthYear, birthMonth]);

[JavaScript]プルダウンで生年月日を入力するフォーム - Qiita

上の記事を参考にしました。