React Bootstrap Form.Check with Formik - reactjs

Question

How can I properly bind Form.Check to a boolean variable using yup and Formik?
React-Bootstrap 4.5 provides an example of using Formik + yup with form inputs. I was able to setup text inputs and selects, but encountered a problem with Form.Check element. I expect it to provide simple boolean value on change, but instead I'm getting an empty array [] or ["on"] when checkbox is checked.
The documentation also has this issue, in the example from the link above form displays this error message:
terms must be a boolean type, but the final value was: ["on"].
My code:
const schema = yup.object({
deactivated: yup.boolean(),
});
const initialValues = {
deactivated: false,
};
return (
<Formik
validationSchema={schema}
onSubmit={(
values
) => {
save(
values.deactivated,
);
}}
initialValues={initialValues}>
{({
handleSubmit,
handleChange,
values,
errors,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="deactivated">
<Form.Check
label="Deactivated"
type="checkbox"
value={values.deactivated}
onChange={handleChange}
isInvalid={!!errors.deactivated}
/>
</Form.Group>
<Button type="submit">Save</Button>
</Form>
)}
</Formik>
);

Answer 1

I was able to handle checkbox changes manually using setFieldValue method:
extract setFieldValue method from Formik
bind checkbox to checked property instead of value
use custom onChange handler: {e => setFieldValue('deactivated', e.target.checked)}
Code:
return (
<Formik
validationSchema={schema}
onSubmit={(
values
) => {
save(
values.deactivated,
);
}}
initialValues={initialValues}>
{({
handleSubmit,
handleChange,
values,
errors,
setFieldValue,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="deactivated">
<Form.Check
label="Deactivated"
type="checkbox"
checked={values.deactivated}
onChange={e => setFieldValue('deactivated', e.target.checked)}
isInvalid={!!errors.deactivated}
/>
</Form.Group>
<<Button type="submit">Save</Button>
</Form>
)}
</Formik>
);