How do I open my react-modal through a component? - reactjs

Question

I have a component that is a modal for login, but I'm not able to call it this is the code of the component:
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
const INITIAL_USER = {
email: '',
password: ''
}
const ModalLogin = () => {
const [user, setUser] = React.useState(INITIAL_USER);
const [disabled, setDisabled] = React.useState(true);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState('');
const [modalIsOpen, setIsOpen] = React.useState(false);
function openModal() {
setIsOpen(true);
}
function closeModal() {
setIsOpen(false);
}
React.useEffect((modal) => {
const isUser = Object.values(user).every(el => Boolean(el));
isUser ? setDisabled(false) : setDisabled(true)
}, [user]);
const handleChange = (e) => {
const { name, value } = e.target;
setUser(prevState => ({ ...prevState, [name]: value }));
}
const handleSubmit = async e => {
e.preventDefault();
try {
setLoading(true);
setError('');
const url = `${baseUrl}/api/login`;
const payload = { ...user };
const response = await axios.post(url, payload);
handleLogin(response.data);
} catch (error) {
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)'
}
};
return (
<Modal
isOpen={modalIsOpen}
style={customStyles}
onRequestClose={closeModal}
>
<div className="theme_login">
<div className="theme_login_box radius">
<header>
<h1>Fazer Login:</h1>
<p>Informe seu nome e e-mail para fazer login e acessar seus pedidos.</p>
</header>
<form method="POST" onSubmit={handleSubmit}>
<input className="radius" type="email" name="email" value={user.email} onChange={handleChange} placeholder="E-mail:" />
<input className="radius" type="password" name="password" value={user.password} onChange={handleChange} placeholder="Senha:" />
<button className="btn transition radius icon-success" type="submit" href="/" title="Minha conta">Fazer Login</button>
</form>
Esqueci minha senha
</div>
</div>
</Modal>
)
};
export default ModalLogin;
I want to call him through my StaticHeader.js:
import React from 'react';
import Link from "next/link";
import Router, { useRouter } from 'next/router';
import NProgress from 'nprogress';
import { handleLogout } from '../../utils/auth';
import ModalLogin from './ModalLogin';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
Router.onRouteChangeStart = () => NProgress.start();
Router.onRouteChangeComplete = () => NProgress.done();
Router.onRouteChangeError = () => NProgress.done();
const StaticHeader = ({ user }) => {
const router = useRouter();
const [menuActive, setMenuActive] = React.useState(false);
const [search, setSearch] = React.useState({ search: '' });
//console.log(user)
const isRoot = user && user.role == 'root';
const isAdmin = user && user.role == 'admin';
const isRootOrAdmin = isRoot || isAdmin;
const [modalIsOpen, setIsOpen] = React.useState(false);
function openModal() {
setIsOpen(true);
}
function closeModal() {
setIsOpen(false);
}
const isActive = (route) => {
return route == router.pathname;
}
const handleOnChange = (e) => {
const { name, value } = e.target;
setSearch(prevState => ({ ...prevState, [name]: value }))
}
const handleSearch = (e) => {
Router.push({
pathname: '/products',
query: { term: search.search }
})
}
const menuToggle = () => {
setMenuActive(!menuActive)
}
const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)'
}
};
return (
<header className="main_header">
<div className="container">
<div className="main_header_nav">
<div className="main_header_nav_logo">
<a href="" title="WdpShoes | Home">
<img alt="logo" title="logo menu" src="/css/themes/logo/wdpshoes_logo_white.png" />
</a>
</div>
<div className="main_header_nav_search">
<form action="" method="post" className="radius">
<input type="text" name="s" placeholder="Pesquisar na loja:" />
<button className="icon-search icon-notext transition"></button>
</form>
</div>
<div className="main_header_nav_menu">
<a className="icon-cart icon-notext transition main_header_nav_menu_cart" href="/cart"><span>3</span></a>
<div className="main_header_nav_menu_user">
<a href="#" title="#" className="icon-user main_header_nav_menu_user_a radius transition" onClick={openModal} >
{modalIsOpen && <ModalLogin/>}
Login</a>
<nav className="radius">
Meus Pedidos
Meus Pedeidos
Meus endereços
Sair
</nav>
</div>
</div>
</div>
<ul className="main_header_departments">
<li className="main_header_departments_li">
Departamento
<ul className="main_header_departments_li_ul">
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
</ul>
</li>
<li className="main_header_departments_li">
Departamento
<ul className="main_header_departments_li_ul">
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
</ul>
</li>
<li className="main_header_departments_li">
Departamento
<ul className="main_header_departments_li_ul">
<li className="main_header_deprtaments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
</ul>
</li>
<li className="main_header_departments_li">
Departamento
<ul className="main_header_departments_li_ul">
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
<li className="main_header_departments_li_ul_li">Categoria</li>
</ul>
</li>
</ul>
</div>
</header>
);
}
export default StaticHeader;
What do I need to do for this modal to appear in my header when clicking on login?
I believe it will be necessary to send the functions through the props I tried a few times without success please could someone help solve this problem?