Disable Calendar Antd from automatically updating the date when the month or year is changed

I'm using Calendar andt and facing the problem, when I'm in the current month, if I choose to change the month, Calendar automatically updates the date of the old month to the date of the new month.

Example: I am in 2022-07-20 then I select August then Calendar will update itself to 2022-08-20

This also fires onChange and onSelect events, I just want the onChange and onSelect events to be fired when the user clicks on the date in the calendar, how can I prevent it from updating itself?

Code here :

const customHeaderCalendar = ({ value, type, onChange, onTypeChange }) => {
        let yearNow = parseInt(moment().format('YYYY'));
        const year = value.year();
        const month = value.month();
        const options = [];

        for (let i = year - 10; i < year + 10; i += 1) {
            if (i >= yearNow){
                options.push(
                    <Select.Option key={i} value={i} className="year-item">
                        {i}
                    </Select.Option>,
                );
            }
        }

        const start = year == yearNow ? parseInt(moment().format('M')) - 1 :  0;
        const end = 12;
        const monthOptions = [];
        const current = value.clone();
        const localeData = value.localeData();
        const months = [];

        for (let i = 0; i < 12; i++) {
            current.month(i);
            months.push(localeData.monthsShort(current));
        }

        for (let i = start; i < end; i++) {
            monthOptions.push(
                <Select.Option key={i} value={i} className="month-item">
                    {months[i]}
                </Select.Option>,
            );
        }



        return (
            <div
                style={{
                    padding: 8,
                    display: 'flex',
                    justifyContent: 'space-between'
                }}
            >
                <span style={{fontSize: '16px'}}>Select date</span>
                <Row gutter={8}>
                    <Col>
                        <Select
                            size={'small'}
                            dropdownMatchSelectWidth={false}
                            className="my-year-select"
                            value={year}
                            onChange={(newYear) => {
                                const now = value.clone().year(newYear);
                                onChange(now);
                            }}
                        >
                            {options}
                        </Select>
                    </Col>
                    <Col>
                        <Select
                            size="small"
                            dropdownMatchSelectWidth={false}
                            value={month}
                            onChange={(newMonth) => {
                                const now = value.clone().month(newMonth);
                                onChange(now);
                            }}
                        >
                            {monthOptions}
                        </Select>
                    </Col>
                </Row>
            </div>
        );
    }

 <Calendar 
headerRender={customHeaderCalendar} 
defaultValue={valueDefaultDatePicker} 
disabledDate={disabledDate}
onSelect={onChangeDepartureDay} 
fullscreen={false} 
onChange={() => console.log('onchange')}
                                             />

Thanks