Модальное закрытие сразу

Я пытаюсь добавить модальное окно на свою страницу, но оно остается открытым только на секунду, а затем снова закрывается.

Вот мой код:

Home.js

import './Home.css';
import React, {useState} from 'react';
import Modal from "./components/Modal";


function Home() {
    const [openModal, setOpenModal] = useState(false);
    return (

        <div>
            {console.info(openModal)}
            <div className = "App">
                <header className = "App-header">
                    <h1 className = "App-name">iScore</h1>
                </header>
            </div>

            <div className = "Auth-form-container">
                <form className = "Auth-form">
                    <div className = "Auth-form-content">
                        <h3 className = "Auth-form-title">Sign In</h3>
                        <div className = "form-group-both">
                            <div className = "form-group mt-3">
                                <label>Email address: </label>
                                <input
                                    type = "email"
                                    className = "form-control mt-1"
                                    placeholder = "Enter email"
                                />
                            </div>
                        </div>
                        <div className = "form-group-pass">
                            <div className = "form-group mt-3">
                                <label>Password: </label>
                                <input
                                    type = "password"
                                    className = "form-control mt-1"
                                    placeholder = "Enter password"
                                />
                            </div>
                        </div>
                        <div className = "popup">
                            <button className = "submit"
                            >
                                Submit
                            </button>
                        </div>
                        {openModal && <Modal setOpenModals = {setOpenModal}/>}
                        <p className = "forgot-password text-right mt-2">
                            Forgot <a href = "#">password?</a>
                        </p>
                        <p>
                            Need an account?
                        </p>
                        <button className = "sign-up" onClick = {() => {
                            setOpenModal(true);
                        }}>Register
                        </button>
                    </div>
                </form>
            </div>
        </div>

    );
}

export default Home;

Modal.js

import "./Modal.css";
import {useState} from "react";

function Modal({ setOpenModals }) {

    const handleChangeEvent = (event) => {
        console.info("Checked: ", event.target.checked)
        setAgreement(event.target.checked);
    }

    return(
        <div className = "modalBackground">
            <div className = "modalContainer">
            <article>
                <button className = "Close" onClick = {() => setOpenModals(false)}> &times; </button>
                    {/*<form>*/}
                        <div className = "Auth-form-content">
                            <h3 className = "Auth-form-title">Register</h3>
                            <div className = "form-group mt-3">
                                <label>Email address: </label>
                                <input
                                    type = "email"
                                    className = "form-control mt-1"
                                    placeholder = "Enter email"
                                />
                            </div>
                            <div className = "form-group mt-3">
                                <label>Email address: </label>
                                <input
                                    type = "name"
                                    className = "form-control mt-1"
                                    placeholder = "Enter first name"
                                />
                            </div>
                            <div className = "form-group mt-3">
                                <label>Password: </label>
                                <input
                                    type = "password"
                                    className = "form-control mt-1"
                                    placeholder = "Enter password"
                                />
                            </div>
                            <div className = "form-group mt-3">
                                <label>Confirm Password: </label>
                                <input
                                    type = "password"
                                    className = "form-control mt-1"
                                    placeholder = "Enter password again"
                                />
                            </div>
                            <div>
                                <input type = "checkbox" name = "terms" value = "yes" onChange = {handleChangeEvent}/>
                                    <label htmlFor = "terms"> I agree to the terms and conditions</label>
                            </div>
                        </div>
                    {/*</form>*/}
            </article>
            <footer>
                <button disabled = {!agreement} onClick = {() => {handleSubmit();setOpenModals(false)}}>Register</button>
                <button onClick = {() => setOpenModals(false)} >Close</button>
            </footer>
            </div>
        </div>
    )
}

export default Modal

Кажется, что как только я нажимаю Register, я вижу в консоли, что для openModal установлено значение True, но затем сразу же возвращается значение false.

Я немного не понимаю, что нужно изменить, чтобы попытаться заставить эту работу работать. С моей точки зрения, это должно быть сделано правильно.

Я что-то упустил здесь?