How can I send the response from the antd datepicker to backend only after I select the submit button?

Question

I got a response from the antd datepicker and I am able to send the response to the backend perfectly, but the problem here is as soon as the date is selected the response is sent to the backend. I need a submit before that only after clicking the submit button I want to send the request to backend.

How do I make the request sent to backend only after by clicking the submit button with ReactJS?

<div className='col-12 mt-4'>
    <div className='row'>
        <div className='col-8'>
            <div className="profile-card-title">Add a session{' '}:{''} <span style={{ fontWeight: '400' }}>
                <DatePicker
                    onChange={this.onChangeextra}
                    disabledDate={this.disabledDate}
                    />
                    </span>
            </div>
        </div>
        <div className='col-4'>
        <Button className="Add-now-btn mr-3"
        onClick={}> ---> i want the onChangeextra function to happen only after i slect the submit button.
        Submit
        </Button>
        </div>
    </div>
</div>

onchange callls the onReschdulechange function

onChangeextra= (
        value,
        dateString
    ) => {
        let type = "reschdule class"
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        this.onReschduleClasses(value, type); ---> Request is sent to the backend.
    };

Answer 1

I got the answer for this from chatgpt finally add state in the class function

state = {
selectedDate:null
}

then use this state to store the date value

<div className='col-12 mt-4'>
    <div className='row'>
        <div className='col-8'>
            <div className="profile-card-title">Add a session{' '}:{''} <span style={{ fontWeight: '400' }}>
                <DatePicker
                    onChange={date => this.setState({ selectedDate: date })}
                    disabledDate={this.disabledDate}
                    />
                    </span>
            </div>
        </div>
        <div className='col-4'>
        <Button className="Add-now-btn mr-3"
        onClick=onClick={this.onSubmitExtra}>
        Submit
        </Button>
        </div>
    </div>
</div>

on clicking the submit button we will send the response to the backend now

onSubmitExtra = () => {
        const selecteddate  = this.state.selectedDate;
        let submit = selecteddate
        let type = "extra class"
        console.log('submit check=====',submit)
        this.onReschduleClasses(submit, type);

    }