Ant Checkbox.Group from an array with grid and complex layout

ant-checkbox-group.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Checkbox, Row, Col } from 'antd';

function onChange(checkedValues) {
  console.log('checked = ', checkedValues);
}

const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Cherry', value: 'Cherry' },
  { label: 'Melon', value: 'Melon' },
  { label: 'Grape', value: 'Grape' },
  { label: 'Orange', value: 'Orange' },
];

ReactDOM.render(
  <>
    <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
      <Row>
        {options.map((item, idx) => {
          return (
            <Col key={idx} span={6}>
              <Checkbox value={item.value}>{item.label}</Checkbox>
            </Col>
          );
        })}
      </Row>
    </Checkbox.Group>
  </>,
  document.getElementById('container')
);