react day picker with custom dropdown menu

Question

I tried to see this example and tried to implement <DayPicker/>'s logic into <DayPickerInput/>. It seems the library seemed to give a dayPickerProps attribute to customize the associated <DayPicker/> with the <DayPickerInput/>. But, the captionElement part was so hard to customize, basically I have this code:

const MyComponent = () => {

  const currentYear = new Date().getFullYear();
  const fromMonth = new Date(currentYear, 0);
  const toMonth = new Date(currentYear + 10, 11);
  const [month, setMonth] = useState<Date>(new Date(2018, 10));
  const [year, setYear] = useState<Date>(new Date(2018, 10));
  function YearMonthForm(props: any) {
    
    const { date, localeUtils } = props;
    
    const months = localeUtils.getMonths();

const years = [];

for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
  years.push(i);
}

const handleChange = function handleChange(e: any) {
  
  console.log('The handlechange has been triggered'); // <---- this statement isn't triggered
  const { yearHandle, monthHandle } = e.target.form;

  setMonth(new Date(yearHandle.value, monthHandle.value));
};

const style = {
  control: (base: any, state: any) => ({
    ...base,
    border: state.isFocused ? 0 : 0,
    // This line disable the blue border
    boxShadow: state.isFocused ? 0 : 0,
    '&:hover': {
      border: !state.isFocused ? '1px solid red' : '1px solid blue',
    },
  }),
};

return (
  <form className="DayPicker-Caption">
    <div style={{ width: '150px' }}>

      <Select
        name="month"
        id="month"
        onChange={handleChange}
        options={[
          {
            value: 'January',
            label: 'January',
          },
          {
            value: 'February',
            label: 'February',
          },
          {
            value: 'March',
            label: 'March',
          },
          {
            value: 'April',
            label: 'April',
          },
          {
            value: 'May',
            label: 'May',
          },
          {
            value: 'June',
            label: 'June',
          },
        ]}/>

    </div>
  </form>
);
  }

  function YearMonthFormInput(props1: PropsWithChildren<CaptionElementProps>) {
    return <YearMonthForm date={props1.date} localeUtils={props1.localeUtils} />;
  }
return (
    <DayPickerInput
              dayPickerProps={{
                canChangeMonth: false,
                captionElement: YearMonthFormInput,
                month,
              }}
            />);

}  

So, basically, the dropdown which forms is something like expected with all the values in there. But, the onChange doesn't execute and also new values aren't being set in the dropdown. How do I make this happen?