How to use the @data-driven-forms/react-form-renderer.layoutComponents.BUTTON_GROUP function in @data-driven-forms/react-form-renderer

const buttonGroupStyle = {
  display: 'flex',
  justifyContent: 'space-around',
};

const ButtonGroup = ({ children, ...props }) => (
  <div style="{">
    { children }
  </div>
);

const layoutComponent = {
  [layoutComponents.FORM_WRAPPER]: FormWrapper,
  [layoutComponents.BUTTON]: Button,
  [layoutComponents.BUTTON_GROUP]: ButtonGroup,
  [layoutComponents.TITLE]: Title,
  [layoutComponents.DESCRIPTION]: Description,
};

const LayoutMapper = () =&gt; {
  const schema = {
    fields: [],
    title: 'Empty form with layout mapper',
    description: 'If you want to see the source code, please expand the code example.',
  };
  return (

const Description = ({ children }) => 
  
;

Description.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
};

const layoutMapper = {
  [layoutComponents.FORM_WRAPPER]: Form,
  [layoutComponents.BUTTON]: ButtonLayout,
  [layoutComponents.BUTTON_GROUP]: ButtonGroupLayout,
  [layoutComponents.TITLE]: Title,
  [layoutComponents.DESCRIPTION]: Description,
};

export default layoutMapper;

import React from 'react';
import { layoutComponents } from '@data-driven-forms/react-form-renderer';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const layoutMapper = {
  [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) =&gt; <form>{ children }</form>,
  [layoutComponents.BUTTON]: ({ label, variant, children, ...props }) =&gt; <button color="{">{ label || children }</button>,
  [layoutComponents.BUTTON_GROUP]: ({ children }) =&gt; (
    <div style="{{">
      { children }
    </div>),
  [layoutComponents.TITLE]: ({ children }) =&gt; 
    
      { children }
    
  ,
  [layoutComponents.DESCRIPTION]: ({ children }) =&gt; 
    
      { children }
    
  ,
};

export default layoutMapper;

backgroundColor: variant === 'primary' ? 'RebeccaPurple' : '#888',
  padding: '8px 16px',
  borderRadius: 4,
  cursor: 'pointer',
  border: 'none',
  marginRight: 4,
});

const Button = ({ children, label, variant, ...props }) =&gt; <button style="{">{ label }</button>;

const layoutComponent = {
  [layoutComponents.FORM_WRAPPER]: FormWrapper,
  [layoutComponents.BUTTON]: Button,
  [layoutComponents.COL]: Fragment,
  [layoutComponents.FORM_GROUP]: Fragment,
  [layoutComponents.BUTTON_GROUP]: Fragment,
  [layoutComponents.ICON]: Fragment,
  [layoutComponents.ARRAY_FIELD_WRAPPER]: Fragment,
  [layoutComponents.HELP_BLOCK]: Fragment,
  [layoutComponents.TITLE]: Title,
  [layoutComponents.DESCRIPTION]: Description,
};

const TextField = ({ formOptions, customProp, label, input, isRequired, meta: { error, touched }, FieldProvider, dataType, ...props }) =&gt; (
  <div>
    <label>{ label }</label>
    <input id="{">
    { touched &amp;&amp; error &amp;&amp; <p>{ error }</p> }
    { customProp &amp;&amp; <p>This is a custom prop and has nothing to do with form schema</p> }
  </div>
);

display: 'flex',
  justifyContent: 'space-around',
};

const ButtonGroup = ({ children, ...props }) => (
  <div style="{">
    { children }
  </div>
);

const layoutComponent = {
  [layoutComponents.FORM_WRAPPER]: FormWrapper,
  [layoutComponents.BUTTON]: Button,
  [layoutComponents.COL]: Fragment,
  [layoutComponents.FORM_GROUP]: Fragment,
  [layoutComponents.BUTTON_GROUP]: ButtonGroup,
  [layoutComponents.ICON]: Fragment,
  [layoutComponents.ARRAY_FIELD_WRAPPER]: Fragment,
  [layoutComponents.HELP_BLOCK]: Fragment,
  [layoutComponents.TITLE]: Title,
  [layoutComponents.DESCRIPTION]: Description,
};

const LayoutMapper = () =&gt; {
  const schema = {
    fields: [],
    title: 'Empty form with layout mapper',
    description: 'If you want to see the source code, please expand the code example.',
  };
  return (

const TitleWrapper = ({ children }) =&gt; <h3>{ children }</h3>;

TitleWrapper.propTypes = {
  children: PropTypes.oneOfType([ PropTypes.node, PropTypes.arrayOf(PropTypes.node) ]).isRequired,
};

const DescriptionWrapper = ({ children }) =&gt; <p>{ children }</p>;

DescriptionWrapper.propTypes = {
  children: PropTypes.oneOfType([ PropTypes.node, PropTypes.arrayOf(PropTypes.node) ]).isRequired,
};

const layoutMapper = {
  [layoutComponents.FORM_WRAPPER]: FormWapper,
  [layoutComponents.BUTTON]: FormButton,
  [layoutComponents.BUTTON_GROUP]: ButtonGroupWrapper,
  [layoutComponents.TITLE]: TitleWrapper,
  [layoutComponents.DESCRIPTION]: DescriptionWrapper,
};

export default layoutMapper;

const getButtonStyle = variant => ({
  color: 'White',
  backgroundColor: variant === 'primary' ? 'RebeccaPurple' : '#888',
  padding: '8px 16px',
  borderRadius: 4,
  cursor: 'pointer',
  border: 'none',
  marginRight: 4,
});

const Button = ({ children, label, variant, ...props }) =&gt; <button style="{">{ label }</button>;

const layoutComponent = {
  [layoutComponents.FORM_WRAPPER]: FormWrapper,
  [layoutComponents.BUTTON]: Button,
  [layoutComponents.BUTTON_GROUP]: ({ key, children }) =&gt; { children },
  [layoutComponents.TITLE]: Title,
  [layoutComponents.DESCRIPTION]: Description,
};

const TextField = ({ formOptions, customProp, label, input, isRequired, meta: { error, touched }, FieldProvider, FieldArrayProvider, dataType, ...props }) =&gt; (
  <div>
    <label>{ label }</label>
    <input id="{">
    { touched &amp;&amp; error &amp;&amp; <p>{ error }</p> }
    { customProp &amp;&amp; <p>This is a custom prop and has nothing to do with form schema</p> }
  </div>
);

const CustomComponent = ({ FieldProvider, ...rest }) =&gt; (
  
    { ({ input, meta, ...props }) =&gt;  }

const getButtonStyle = variant => ({
  color: 'White',
  backgroundColor: getBackgroundColor(variant),
  padding: '8px 16px',
  borderRadius: 4,
  cursor: 'pointer',
  border: 'none',
  marginRight: 4,
});

const Button = ({ children, label, variant, ...props }) =&gt; <button style="{">{ label }</button>;

const layoutComponent = {
  [layoutComponents.FORM_WRAPPER]: FormWrapper,
  [layoutComponents.BUTTON]: Button,
  [layoutComponents.BUTTON_GROUP]: ({ key, children }) =&gt; { children },
  [layoutComponents.TITLE]: Fragment,
  [layoutComponents.DESCRIPTION]: Fragment,
};

const TextField = ({ formOptions, label, input, isRequired, meta: { error, touched }, FieldProvider, dataType, FieldArrayProvider, ...props }) =&gt; (
  <div>
    <label>{ label }</label>
    <br>
    <input id="{">
    { touched &amp;&amp; error &amp;&amp; <p>{ error }</p> }
    <br>
  </div>
);

const ArrayItem = ({
  fields,