Considere el siguiente botón:

 <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>

por lo que la variable de estado c se usa para verificar en qué paso del proceso de llenado del formulario se encuentra el usuario, ahora al hacer clic en el botón, si el estado de c === 1, entonces he definido una función para publicar los datos , y más tarde lo llamó. setC (1) se realiza para el paso anterior cuando c === 0, de todos modos, sé que el estado de C es 1 porque el botón muestra "¡Libro!", Pero no está ingresando a la función postData en absoluto.