Невозможно получить флажок с избыточной формой, работающий в начальной загрузке

Question

Я пытаюсь использовать вход Bootstrap Checkbox в React Redux Form, я не могу увидеть значения в выводе.

У меня есть этот код, работающий нормально с семантическим интерфейсом*

TypeError: Cannot destructure property 'checked' of 'undefined' as it is undefined.
onChange

  125 |   <Form.Check 
  126 |     label={label}
  127 |     checked={input.value}
> 128 |     onChange={(e, { checked }) => input.onChange(checked)}
      | ^  129 |   />
  130 | </Form.Group>
  131 | 

вот как это выглядит в отрисованном виде

<Field
                    name="email_consent"
                    id="email_consent"
                    type="checkbox"
                    component={renderCheckbox}
                    label="I would like to receive email offers"
                />

Это то, что я в итоге сделал, не уверен, что это был лучший опыт

<div className="form-check">
                        <Field name="email_consent"
                        id="email_consent"
                        component="input"
                        className="form-check-input"
                        type="checkbox" 
                        label="I would like to receive email offers"/>
                        <label className="form-check-label" for="email_consent">Check me out</label>
                    </div>

Answer 1

Разве вы не должны заменить Form.Check на флажок?