Reactjs - Material UI- reduc form framework - grouped checkbox required validation error fixing to have at least one checkbox required

I am working on a react project and have built a form framework which wraps material ui, around the redux form.

** sandbox https://codesandbox.io/s/condescending-banzai-re6l3

I am unsure how fix a bug - where if the grouped checkbox field is set as validate - to only have a required message appear under the group of checkboxes - then demand all checkboxes to be required.

Here is the current code base

//renderGroupedCheckboxes

import React from "react";
import { Field } from "redux-form";

import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import FormGroup from "@material-ui/core/FormGroup";
//import FormHelperText from '@material-ui/core/FormHelperText';

import renderCheckboxField from "./renderCheckboxField";

const renderGroupedCheckboxes = (fields) => (
  <FormControl component="fieldset" fullWidth={true}>
    <FormLabel component="legend">{fields.label}</FormLabel>
    <FormGroup row>
      {fields.names.map((item, j) => {
        return (
          <Field
            key={j}
            name={item}
            component={renderCheckboxField}
            label={fields.options[j].label}
            onChange={function (e, newVal) {
              fields.onHandle(e.target.name, newVal);
            }}
          />
        );
      })}
    </FormGroup>
  </FormControl>
);

export default renderGroupedCheckboxes;

the individual checkbox

    //renderCheckboxField
    
    import React from "react";
    import Checkbox from "@material-ui/core/Checkbox";
    import FormControl from "@material-ui/core/FormControl";
    import FormControlLabel from "@material-ui/core/FormControlLabel";
    import FormHelperText from "@material-ui/core/FormHelperText";
    
    const renderCheckboxField = ({
      input,
      rows,
      multiline,
      label,
      meta: { touched, error, warning }
    }) => (
      <FormControl component="fieldset">
        <FormControlLabel
          label={label}
          control={<Checkbox />}
          checked={input.value ? true : false}
          {...input}
        />
        <FormHelperText error={error && error.length > 0 ? true : false}>
          {(error && error.length > 0 ? error : null) ||
            (warning && warning.length > 0 ? warning : null)}
        </FormHelperText>
      </FormControl>
    );

export default renderCheckboxField;

from Reactjs - Material UI- reduc form framework - grouped checkbox required validation error fixing to have at least one checkbox required