How do you handle multi checkboxes in a custom component?

[idelice]

I cannot wrap my head around how to use a custom component with multiple checkboxes - having the same name property.

This implementation doesn't work for me.

Styled Field using styled-components:

export const StyledCheckbox = styled(Field)`
  // css stuff
`

Custom component:

const CustomInputComponent = ({
   field, // { name, value, onChange, onBlur }
   form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
   ...props
 }: FieldProps) => {
 
 // How do I know if the checkbox has been 'checked'?
 
  return (
  <CheckboxWrapper htmlFor={field.name}>
      <StyledCheckbox id={field.name} type='checkbox' **_checked={???}_** {...field} {...props} />
      <StyledCheckboxSVGWrapper **_isChecked={???}_**>
        // ....
      </StyledCheckboxSVGWrapper>
    </CheckboxWrapper>
 )};

App.tsx:

<Field name='andre' component={CustomInputComponent} value='one' />
<Field name='andre' component={CustomInputComponent} value='two' />
<Field name='andre' component={CustomInputComponent} value='three' />

This is what the output should look like when all checkboxes is checked:

{
  andre: ['one', 'two', 'three']
}