React modal is not showing in the center of the screen - css

Question

With the help of the community, I have been able to final have my modal pop-up working on my reat website.
The modal code is as below:
import React from "react";
import '../../assets/styles/GenericTheme.css'
import { Modal, Button } from "react-bootstrap";
class LoginRegisterModal extends React.Component {
constructor(props, context) {
super(props);
this.state = {show: false};
}
open = () => {
this.setState({show: true});
}
close = () => {
this.setState({show: false});
}
componentDidUpdate(prevProps) {
const { show } = this.props;
if (prevProps.show !== show) {
if (show) {
this.open(); // open if parent says to
} else {
this.close(); // close if parent says to
}
}
}
render() {
const styleModal = {
width:770,
height:480,
backgroundColor:"#ffffffff",
borderRadius:21.5,
boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
}
return (
<Modal show={this.state.show} style={styleModal} >
<Modal.Body>test</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.close}>
Close
</Button>
</Modal.Footer>
</Modal>
);
}
}
export default LoginRegisterModal;
The modal is called by the react-bootstrap Navs components:
const menuLoginRegister = <Nav.Link ref="LoginRegisterModal" eventKey={1} href="#" onClick={this.openLogin}>{TextContents.MenuLoginRegister}</Nav.Link>;
And I have added the modal in the return function like below:
return (
<div>
<Navbar className="village-header" width="100" expand="lg">
....
</Navbar>
<LoginRegisterModal show={this.state.showLogin}
onHide={() => this.setState({ showLogin: false })}/>
</div>
);
The only issues is that the modal keep being displayed on the top left corner and not centered in the screen.
I tried to use a center in the style but it still not move it to the center.
Any idea how to do it ?
Thanks