Как закрыть модал в Reactjs?

Question

При нажатии кнопки я пытался открыть модель (и модальное открытие тоже), и в том же модале он содержал кнопку, а при нажатии кнопки я пытался открыть другую модель (и второе модальное открытие тоже), но когда второй Модал открывается, я хочу, чтобы первая модель была закрыта. это возможно?

Вот мое демо-версия песочницы https://codesandbox.io/embed/dreamy-herschel-cyetn?fontsize=14&hidenavigation=1&theme=dark

const Practice = () => {
    const [modalShow, setModalShow] = useState(false);
    const handleSubmit = event => {
        setModalShow(true);
    };
    return (
        <div>
            <Button onSubmit={handleSubmit} type="submit">
                Submit
            </Button>
            <Modals show={modalShow} onhide={() => setModalShow(false)} />
        </div>
    );
};

Вот моя модальная часть

const Modals = ({ show, onhide }) => {
    const [modalShowsec, setModalShowsec] = useState(false);

    const Validation = () => {
        setModalShowsec(true);
    };

    return (
        <div>
            <Modal show={show} onHide={onhide} size="sm" aria-labelledby="contained-modal-title-vcenter" centered>
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">HELLO</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>Hi</p>
                </Modal.Body>
            </Modal>
            <button onClick={Validation}> Validate </button>
            <Modal show={modalShowsec} onHide={() => setModalShowsec(false)}>
                <Modal.Header closeButton />
                <Modal.Body>
                    <p>Hi cool</p>
                </Modal.Body>
            </Modal>
        </div>
    );
};

Answer 1

Вызов onhide внутри Validation функции. Это скроет первый модал.

const Validation = () => { 
        setModalShowsec(true)
        onhide()
    }