React Modal show/hide logic

Question

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;

Answer 1

Dashboard:

     const Dashboard = () => {
       const [showModal, setShowModal] = useState(false);

       return (
         {showModal && (
          <Modal showModal={showModal} closeModal={() => setShowModal(false)} />
         )}
       )
     }

Modal:

   
    const Modal = ({ showModal, closeModal }) => {
        const [checkboxCondition, setCheckboxCondition] = useState(false);

        const onChangeHandler = () => {
            setCheckboxCondition(!checkboxCondition);
        };
        const onClickHandler = () => {
            closeModal();
        };

        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>
        );
    };

Now, as mention by @RobinZigmond something in your Dashboard component should set showModal to true so that your Modal appears.