I have a modal that pops up on a dashboard if a condition is true and renders a checkbox. I can't seem to toggle to Modal off on the onClick function. Here is an example of the code.

Dashboard

const conditionalAgreement = false;
<Modal showModal={showModal} conditionalAgreement={conditionalAgreement} />

Modal

const Modal = ({ conditionalAgreement }) => {

    const [showModal, setShowModal] = useState(false);    
    const [checkboxCondition, setCheckboxCondition = useState(false);

    useEffect(() => {
        if (conditionalAgreement) {
            setShowModal(true);
        }
    }, [conditionalAgreement]);

    const OnChangeHandler = () => {
        setCheckboxCondition(!setCheckboxCondition);
    };

    const OnClickHandler = () => {
        setShowModal(false);
    };

    return (
            <div className={css.modal}>
                <div className={css.checkbox}>
                     <CheckboxComponent
                        value={checkboxCondition}
                        onChange={OnChangeHandler}
                        description={tick this box"}
                    />
                </div>
                <div className={css.buttonContainer}>
                    <ButtonComponent
                        onClick={OnClickHandler}
                      >
                        Save
                    </ButtonComponent>
                </div>
            </div>
    );
};

export default Modal;