How to fix update Modal not showing this.state.value - reactjs

Question

I am trying to create a modal that handles updates, but it's not showing {this. state. value}
state={
name: '',
businessName: '',
show: false,
}
showModal(e) {
if (e) {
this.setState({ show: true });
}
}
showEditModal(e) {
const { user } = this.props.auth;
const email=user.email
axios.get(`/api/v1/auth/userdetails/${email}`)
.then(
(res) => {
console.log(res.data) // res.data actually has data from API
let user = res.data
this.setState ({
id:user.id,
name:user.name,
businessName:user.businessName,
})
this.setState({
show: true,
});
console.log(this.state.name) // i get undefined
},
(err) => {
alert('An error occured! Try refreshing the page.', err);
}
);
}
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
onSubmit = (e) => {
e.preventDefault();
const {
_id,
name,
businessName,
} = this.state;
const userDetail = {
_id,
name,
businessName,
};
console.log(userDetail);
axios.post(`/api/v1/auth/update/${_id}`, userDetail).then(
(res) => {
Swal.fire({
title: 'Profile ',
text: 'Update successful!',
icon: 'success',
confirmButtonText: 'Ok'
})
},
(err) => {
alert('An error occured! Try submitting the form again.', err);
}
);
};
hideModal = () => {
this.setState({
show: false,
name:'',
businessName:'',
});
};
ModalForm=()=>{
return <div style={{ backgroundColor: 'white' }}>
<Modal
{...this.props}
show={this.state.show}
onHide={this.hideModal}
dialogClassName='custom-modal'
>
<Modal.Header closeButton>
<Modal.Title
id='contained-modal-title-lg '
className='text-center'
>
Update Profile
</Modal.Title>
</Modal.Header>
<Modal.Body className='modal-contentx'>
<Form horizontal onSubmit={this.onSubmit}>
<FormGroup controlId='formHorizontalEmail'>
<Col smOffset={4} sm={6}>
<FormControl
type='Text'
backgroundColor='grey'
placeholder='name'
name='name'
value={this.state.name}
onChange={this.onChange}
/>
</Col>
</FormGroup>
<FormGroup controlId='formHorizontalPassword'>
<Col smOffset={4} sm={6}>
<FormControl
type='text'
placeholder=''
name='businessName'
value={this.state.businessName}
onChange={this.onChange}
/>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={5} sm={6}>
<Button type='submit' bsStyle='primary'>
Add
</Button>
</Col>
</FormGroup>
</Form>
</Modal.Body>
</Modal>
</div>
<ButtonGroup>
<Button className="btn-fill" color="primary" type="submit">
Save
</Button>
<Button className="btn-fill" onClick={(e) => this.showEditModal(e)}>
Update
</Button>
</ButtonGroup>
}
render(){
return (
<div>
// Add form is placed here
</div>
<div>
// modal form is placed here
{this.ModalForm()}
</div>
)
}
the modal comes up onClick, but fails to show any value. When i do console.log(this.state.name) for instance i get undefined?!
I need the Modal to be populated with the value from the state. The response object from the console contains the data that i am using to update the state through setState().
i guess something is off though, but cant figure it out