button onclick refresh page instead of set state to false - reactjs

Question

I am developing an ecommerce application and I am working on the login.
I want the login to be a pop up box such that when the user click on login button the dialog box will appear and when the user click on the x button the dialog box disappears.
Other things work well except the close(x) button.
When it is clicked it refreshes the page instead of setting setOpenLoginModal to false.
I created a reusable modal then imported it to LoginModal.js which is passed to App.js.
Modal.js
const Modal = ({open, children, handleSubmit}) => {
if(!open) return null
return ReactDom.createPortal(
<>
<form action="" onSubmit={handleSubmit}>
<div style={OVERLAY_STYLE}>
<div style={MODAL_STYLES}>
{children}
</div>
</div>
</form>
</>,
document.getElementById('portal')
)
}
export default Modal
LoginModal.js
import Modal from './Modal'
const LoginModal = ({openLoginModal, setOpenLoginModal}) => {
return (
<div>
<Modal open={openLoginModal} handleSubmit={handleSubmit}>
<div className="d-flex justify-content-center">
<div>
<h4 className="head">eTranzact eCommerce</h4>
<h6 className="sub-heading">Create an account to list your own product</h6>
</div>
<div>
<h2 style={{position: 'absolute', right: '2em'}}>
<button className="close" type="button" onClick={() => setOpenLoginModal(false)}>x</button>
</h2>
</div>
</div>
<hr />
</div>
)
}
export default LoginModal
App.js
import LoginModal from '../Components/LoginModal';
const App = () => {
const [openLoginModal, setOpenLoginModal] = useState(false)
return (
<div>
{
openLoginModal && (
<LoginModal openLoginModal={openLoginModal} setOpenRegisterModal={ () => setOpenRegisterModal(false) } />
)
}
<div className="right-navs">
<button onClick={() => setOpenLoginModal(true)} className="btn btn-primary">
LOGIN
</button>
</div>
</div>
)
}
export default App

Answer 1

This issue is probably with your form, I don't think you are preventing the default. Even though you are saying action="" it will still try and process it like a get action which would be causing it to refresh the page.
const Modal = ({ open, children, handleSubmit }) => {
if (!open) return null
const submit = (e) => {
e.preventDefault()
handleSubmit()
}
return ReactDom.createPortal(
<>
<form action="" onSubmit={submit}>
<div style={OVERLAY_STYLE}>
<div style={MODAL_STYLES}>{children}</div>
</div>
</form>
</>,
document.getElementById('portal')
)
}
export default Modal

Answer 2

I can see you're passing the wrong setState handler to the child component. You have to change setOpenRegisterModal to setOpenLoginModal in your App.js file