I have form inputs that update their form state(X) with an onChange then i have a form onSubmit submit that has to do 2 things:

1. update a separate state(Y) using info from state(X)
2. run an actual function that would use state(Y)

const [ethValue, setEthValue] = React.useState({ethValue: 0});

const submit = (e) => {
    setEthValue(() => { return { ethValue: formData.value } })
    e.preventDefault();
    runContractFunction()
};

It is working, however in order for it to complete the task I have to press Submit button twice, due to asynchronous nature of set functions. In order for it to finish setting i decided to use re-rendering so it would finish setting the state, but neither of methods i tried, work.

Since I use functional components i cannot use forceUpdate() and i cannot put useEffect inside of my submit function because it would put the useEffect hook outside of the component function body.

I want to make it so you have to press Submit once and not twice for it to work. How do I solve this problem?

Thanks in advance for your time!