consider the following button:

<Button variant="outlined" id='nextcnfbtn' className='mx-auto' style={{ "width": c === 1 ? "30%" : "60%" }} disabled={isError}
                    onClick={(c) => {
                        if (c === 1) {
                            async function postData(url = `${host}/api/bookings/addbooking`, bookingData) {
                                console.log("posting data");
                                const response = await fetch(url, {
                                    method: 'POST', 
                                    mode: 'cors',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        "auth-token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNjIxN2NkOGEwZTI4ZTI3MDM4YmYxZmYwIn0sImlhdCI6MTY0NTcyNzExNH0.UrN2hTukNN5uZlT-AckpHANli6x0Gk3pC97NItKnxZs"
                                    },
                                    
                                    body: JSON.stringify(bookingData)
                                });
                                console.log(response.json());
                            }
                            postData();
                        }
                        setC(1);
                    }}
     >{c === 1 ? "Book!" : "Next"}</Button>

so the state variable c, is used to check which step in the form filling process the user is in, now on click of the button, if the state of c === 1, then I've defined a function to post the data, and later called it. setC(1) is done for the previous step when c ===0, anyways I know that the state of C is 1 because the Button shows "Book!", but its not entering the postData function at all .