Formik and Form.Check does not capture value - reactjs

Question

I'm utilising Formik and React-Bootstrap to construct a user registration form. For now, I'm just console.logging the values captured from the form but for some reason my form does not capture the values from <Form.Check> element.
I would really appreciate any help as I've been struggling for a few hours!
const Register = () => {
const formik = useFormik({
initialValues: {
firstname: '',
surname: '',
email: '',
password: '',
role: 'user',
secondaryinterest: [''],
},
validationSchema: Yup.object({
firstname: Yup.string()
.min(2, 'Your name is too short')
.max(100, 'Your name is too long')
.required('We require your name'),
surname: Yup.string()
.min(2, 'Your name is too short')
.max(100, 'Your name is too long')
.required('We require your name'),
email:Yup.string()
.required('Sorry the email is required')
.email('This is not a valid email'),
password:Yup.string()
.required('Sorry the password is required'),
secondaryinterest: Yup.array()
.min(1, "You need to select at least one"),
}),
onSubmit:(values) => {
console.log(values)
}
})
return(
<Form onSubmit={formik.handleSubmit}>
<Form.Group>
<Form.Label>Select the five most relevant for you</Form.Label>
{['Football', 'Golf', 'Rugby', 'Tennis'].map((secondaryinterest) => (
<div key={`${secondaryinterest}`} className="mb-3">
<Form.Check
type='checkbox'
name='secondaryinterest'
placeholder="secondaryinterest"
id={`${secondaryinterest}`}
label={`${secondaryinterest}`}
onChange={formik.handleChange}
{...formik.getFieldProps('secondaryinterest')}
/>
</div>
))}
</Form.Group>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridFirstname">
<Form.Label>First Name</Form.Label>
<Form.Control
type="text"
name="firstname"
variant="outlined"
{...formik.getFieldProps('firstname')}
/>
{formik.touched.firstname && formik.errors.firstname ? (
<div>{formik.errors.firstname}</div>
) : null}
</Form.Group>
<Form.Group as={Col} controlId="formGridSurname">
<Form.Label>Last Name</Form.Label>
<Form.Control
type="text"
name="surname"
variant="outlined"
{...formik.getFieldProps('surname')}
/>
{formik.touched.surname && formik.errors.surname ? (
<div>{formik.errors.surname}</div>
) : null}
</Form.Group>
</Row>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>E-mail</Form.Label>
<Form.Control
type="email"
name="email"
variant="outlined"
{...formik.getFieldProps('email')}
/>
{formik.touched.email && formik.errors.email ? (
<div>{formik.errors.email}</div>
) : null}
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Enter your password</Form.Label>
<Form.Control
type="password"
name="password"
variant="outlined"
{...formik.getFieldProps('password')}
/>
{formik.touched.password && formik.errors.password ? (
<div>{formik.errors.password}</div>
) : null}
</Form.Group>
</Row>
<Button variant="primary" type="submit">
Register
</Button>
</Form>
}
Console log output is:
{firstname: "Dave", surname: "Kula", email: "davekula#gmail.com", password: "ddhshja", role: "user", secondary interest: [],...}

Answer 1

This part actually doesn't do anything. What you want to do actually, when you set the checkmark, it should add it to the array of secondaryinterest. However you didn't give instructions and Formik cannot just guess it.
{['Football', 'Golf', 'Rugby', 'Tennis'].map((secondaryinterest) => (
<div key={`${secondaryinterest}`} className="mb-3">
<Form.Check
type='checkbox'
name='secondaryinterest'
placeholder="secondaryinterest"
id={`${secondaryinterest}`}
label={`${secondaryinterest}`}
onChange={formik.handleChange}
{...formik.getFieldProps('secondaryinterest')}
/>
</div>
))}
Easier change for you, I suggest, create new initial values for each checkbox. Make them separate.

Answer 2

I was able to fix it and thought to post the answer in case it helps someone else a a later stage
{['Football', 'Golf', 'Rugby', 'Tennis'].map((secondaryinterest) => (
<div key={`${secondaryinterest}`} className="mb-3">
<Form.Check
type='checkbox'
name='secondaryinterest'
value={`${secondaryinterest}`}
label={`${secondaryinterest}`}
onChange={formik.handleChange}
/>
</div>
))}
I stipulated the name and value fields. Also the {...formik.getFieldProps('secondaryinterest')} was redundant.