How to use the grommet-icons.FormCheckmark function in grommet-icons

color: {
      light: 'neutral-3',
      dark: 'neutral-3'
    },
    gap: 'xsmall',
    hover: {
      border: {
        color: undefined
      }
    },
    icon: {
      size: '18px',
      extend: 'stroke: white;'
    },
    icons: {
      checked: _grommetIcons.FormCheckmark
    },
    size: '18px',
    extend: "\n      color: #9C9C9C;\n    "
  }
};

var ThemedCheckBox = function ThemedCheckBox(props) {
  var _useState = (0, _react.useState)(false),
      checked = _useState[0],
      setChecked = _useState[1];

  return _react["default"].createElement(_grommet.Grommet, {
    theme: (0, _utils.deepMerge)(_themes.grommet, customCheckBoxTheme)
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"

checkBox: {
    border: {
      color: {
        light: (0, _styledComponents.css)(['', ''], function (props) {
          return (0, _utils.colorForName)('gray', props.theme);
        })
      },
      radius: '2px'
    },
    hover: {
      border: {
        color: undefined
      }
    },
    icons: {
      checked: _grommetIcons.FormCheckmark
    },
    size: '18px',
    extend: function extend(props) {
      return '\n      input:checked + div {\n        border-color: ' + (0, _utils.colorForName)('brand', props.theme) + ';\n        background: ' + (0, _utils.colorForName)('brand', props.theme) + ';\n\n        > svg {\n          stroke: ' + (0, _utils.colorForName)('white', props.theme) + ';\n        }\n      }\n    ';
    }
  },
  drop: {
    maxHeight: '384px'
  },
  select: {
    icons: {
      down: _ArrowDown2.default
    },
    searchInput: _SearchInput2.default
  },
  textInput: {