Delayed post parameters when submitting via onChange in reactjs

I'm trying to send a parameter to the api to give me an exact json response, but when i'm trying to submit my form via select onChange={onAddSubmit}, it is still passing the default value 146846 but I already changed my select to 146847 so i'm getting the invalid response.

Home.js

import React, { useEffect, useState } from "react";
import Api from "../Api";

import AppContainer from "../tmp/AppContainer";
import HomeContainer from "./HomeContainer";

const Home = () => {
    const [posts, setPosts] = useState();
    const [loading, setLoading] = useState(false);
    const [allValues, setAllValues] = useState({
        contractId: "146846",
        planId: "1028",
        dateStart: "2021-01-30",
        dateEnd: "2021-01-31",
        numberOfAdults: 1,
        numberOfChildren: 0,
        planOption: "Individual",
        unit: "day",
    });
    const changeHandler = (e) => {
        setAllValues({ ...allValues, [e.target.name]: e.target.value });
    };

    const onAddSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        try {
            await Api.getCurlPost({
                ...allValues,
            }).then((response) => {
                const result = response.data;
                setPosts(result.data);
            });
        } catch {
            alert("Failed to add post!");
        } finally {
            setLoading(false);
        }
    };
    useEffect(() => {
        onAddSubmit;
    }, []);

    return (
        <AppContainer>
            <HomeContainer
                onAddSubmit={onAddSubmit}
                changeHandler={changeHandler}
                loading={loading}
                posts={posts}
            />
        </AppContainer>
    );
};

export default Home;

Here is my HomeContainer.js that contains my html and bootstrap design

import React, { Component } from "react";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlane } from "@fortawesome/free-solid-svg-icons";
import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";

class HomeContainer extends Component {
    render() {
        const { onAddSubmit, changeHandler, loading, posts } = this.props;
        return (
            <div>
                <div className="row mb-auto">
                    <div className="col-md-6 p-2">
                        <img
                            width="100%"
                            src="../resources/img/starr/7437.jpg"
                        />
                        <div className="mt-3 shadow-sm p-3 mb-5 bg-white rounded">
                            <h3 className="text-center">
                                <FontAwesomeIcon
                                    icon={faPlane}
                                    rotation={0}
                                    style={{ marginRight: 5 }}
                                />
                                Travel Details
                            </h3>
                            <form onChange={onAddSubmit}>
                                <div className="form-group">
                                    <select
                                        className="form-control"
                                        name="contractId"
                                        onChange={changeHandler}
                                    >
                                        <option value="146846">
                                            TravelLead Domestic Travel Insurance
                                        </option>
                                        <option value="146847">
                                            TravelLead International Travel
                                            Insurance
                                        </option>
                                    </select>
                                </div>
                                <div className="form-group">
                                    <select
                                        className="form-control"
                                        name="planId"
                                        onChange={changeHandler}
                                    >
                                        <option value="1028">
                                            Economy (Single Trip)
                                        </option>
                                        <option value="1029">
                                            Elite (Single Trip)
                                        </option>
                                    </select>
                                </div>
                            </form>    
                       </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default HomeContainer;