React - history.push not working after data fetch - node.js

Question

I have some code coming back from my database and i want to redirect in the .then - when and if there is a res , but when i put the history.push in the .then- it doesn't render anything of inside the .then
here is some code:
import React, { useState } from 'react'
import { connect } from "react-redux";
import { CreateAccount as createAccountService } from '../services/user'
import { actions } from '../store/actions';
import { Redirect, withRouter } from "react-router-dom";
import { useHistory } from 'react-router-dom';
const mapStateToProps = (state) => {
return { ...state, user: state.userReducer.user || [] }
}
const mapDispatchToProps = (dispatch) => ({
setUser: (loggedUser) => dispatch(actions.setUser(loggedUser))
})
const CreateAccount = withRouter(function CreateAccount(props) {
const history = useHistory();
const [nameI, setName] = useState('');
const [emailI, setEmail] = useState('');
const [passwordI, setPassword] = useState('');
function createAccountHandler() {
createAccountService({ name: nameI, email: emailI, password: passwordI })
.then(res => {
alert(res.name) //brings the res.name but when the history.push is here it doens't show the alert
history.push('/posts') // <= the problem!
})
.catch((err) => {
alert('err in createAccount' + err)
})
}
return (<>
<div className="wrapper fadeInDown">
<div id="formContent">
<form>
<input type="text" id="name" class="fadeIn first" name="name" placeholder="name" onChange={e => setName(e.target.value)} />
<input type="text" id="email" class="fadeIn second" name="email" placeholder="email" onChange={e => setEmail(e.target.value)} />
<input type="text" id="password" class="fadeIn third" name="createAccount" placeholder="password" onChange={e => setPassword(e.target.value)} />
<input onClick={createAccountHandler} type="submit" class="fadeIn fourth" value="Create Account" />
</form>
</div>
</div>
</>)
}
)
export default connect(
mapStateToProps,
mapDispatchToProps
)(CreateAccount);

Answer 1

You Should try the following:
<form onSubmit={createAccountHandler}>
<input type="text" id="name" class="fadeIn first" name="name" placeholder="name" onChange={e => setName(e.target.value)} />
<input type="text" id="email" class="fadeIn second" name="email" placeholder="email" onChange={e => setEmail(e.target.value)} />
<input type="text" id="password" class="fadeIn third" name="createAccount" placeholder="password" onChange={e => setPassword(e.target.value)} />
<input type="submit" class="fadeIn fourth" value="Create Account" />
</form>
const createAccountHandler = (e) => {
e. preventDefault();
createAccountService({ name: nameI, email: emailI, password: passwordI })
.then(res => {
alert(res.name) //brings the res.name but when the history.push is here it doens't show the alert
history.push('/posts') // <= the problem!
})
.catch((err) => {
alert('err in createAccount' + err)
});
}