Aquí está mi componente de casilla de verificación:

 function CheckBoxesControl(props) { const { label, name, options, ...rest } = props; return ( <div className='checkbox-control'> <span className='checkbox-title'>{label}</span> <div className='check-elements'> <Field name={name}> {({ field, form }) => { return options.map((option) => { return ( <React.Fragment key={option.key}> <input type='checkbox' id={option.key} {...field} {...rest} value={option.value} checked={field.value.includes(option.value)} /> <label htmlFor={option.value}>{option.value}</label> </React.Fragment> ); }); }} </Field> </div> <ErrorMessage component={TextError} name={name} /> </div> ); } export default CheckBoxesControl;

Código para FormikControl:

 import React from 'react'; import CheckBoxesControl from './checkboxescontrol'; import RadioButtons from './radiobuttons'; function FormikControl(props) { const { control, ...rest } = props; switch (control) { case 'radio': return <RadioButtons {...rest} />; case 'checkbox': return <CheckBoxesControl {...rest} />; default: return null; } } export default FormikControl;

Y componente padre:

 <Formik initialValues={formValues || initialValues} validationSchema={validationSchema} validateOnMount onSubmit={onSubmit} enableReinitialize > {(formikProps) => { return ( <Form> <FormikControl control='checkbox' label='Some label' name='somearray' options={somearray} /> </Form> </Formik>

somearray: es una matriz que obtengo de firestore que se ve así: [{key:'', value:''}]

Soy un principiante, así que tengan paciencia conmigo:
Actualmente, todo lo que puedo obtener es option.value u option.key
Lo que quiero es que el valor de la casilla de verificación marcada envíe a formik para que se vea así:
[id: opción.id, nombre: opción.valor]

Es posible ?