How do you use the ionic checkbox in a redux form array in react?

Question

I am trying to incorporate a checkbox for whether or not the item is complete for the field in the array. I am kinda lost but this is what the component is looking like right now:

export const ReduxFormStartWorkoutCheckBox: React.FC = (field: any) => {
  console.log(field);
  return (
    <IonCheckbox
      {...field.input}
      value={true}
      checked={
        field.input.value === "true" || field.input.value === true
          ? true
          : false
      }
      name={field.input.name}
      color="primary"
    />
  );
};

and this is how its used:

<Field
  name={`${set}.completed`}
  component={ReduxFormStartWorkoutCheckBox}
  type="checkbox"
/>

but its not working. This is just turning on the check box after i check a different box and then it doesn't turn off so i am definitely way off. Any tips would be helpful.

Answer 1

For anyone who is struggling, I found the correct way: This is what the redux form checkbox looks like

export const ReduxFormCheckBox: React.FC = (field: any) => (
  <IonButton
    size="small"
    color={field.input.checked ? "success" : "danger"}
    fill="clear"
    onClick={() => field.input.onChange(!field.input.value)}
  >
    <IonIcon
      icon={field.input.checked ? checkmarkCircle : checkmarkCircleOutline}
      slot="icon-only"
    />
  </IonButton>
);

and this is how its being called:

<Field
 name={`${set}.completed`}
 component={ReduxFormCheckBox}
 type="checkbox"
/>