In Reactjs how can I do custom message for checkbox

register.js

       <Form.Check type="checkbox">
                        <Form.Check.Label className={"text-muted"}>
                            <Form.Check.Input type="checkbox"
                                              required
                                              onInput={(e) => {
                                                  e.target.setCustomValidity('');
                                              }}
                                              onInvalid={(e) => {
                                                  e.target.setCustomValidity('Please agree to the terms and conditions!');
                                              }}
                                              ref={(input) => {
                                                  this.checkbox = input
                                              }}
                            />
                            <Form.Text>this is a text</Form.Text>
                        </Form.Check.Label>
                    </Form.Check>

                    <Button variant="primary shadow-none mb-2" type="button" onClick={() => {
                        Register(this.id, this.email, this.password, this.checkbox);
                    }}>
                       register
                    </Button>
                </Form>

mapDispatchToPrpos

const mapDispatchToProps = (dispatch) => {
return {
    Register(id, email, password, checkbox) {
        console.log(checkbox.checked)
        dispatch(actionCreators.Register(id.value, email.value, password.value, checkbox.checked));
    }
  }
};

actionCreators.js

export const Register = (id, email, password,checkbox) => {

return (dispatch) => {
    const config = {
        method: 'post',
        url: 'http://localhost/cup/u_info.php',
        data: {
            id: id,
            email: email,
            password: password
        }
    };
    axios.request(config).then((res) => {
        const result = res.config.data;
        if (result) {
            dispatch(register());
            alert('success')
        } else {
            alert('failed')
        }
    }).catch((error) => {
        console.log(error);
    })
}

};

problem: I want to show my custom message when the user doesn't click the checkbox.

I have already written the custom message code in the register.js, but it didn't work for me

Also you can look these execute screenshots.

First, alert('success')

Second, console.log(checkbox.checked)

I want to show my custom message when the user didn't click the checkbox and do not change another page automatically like "success"

On the contrary, I don't want to show my customer message when the user clicked the checkbox and change page automatically