How to use the @jsonforms/react.withJsonFormsLayoutProps function in @jsonforms/react

hasOwnState = () => {
    return this.props.ownState !== undefined ? this.props.ownState : true;
  };

  private handleChange = (_event: any, value: any) => {
    if (this.props.onChange) {
      this.props.onChange(value, this.state.activeCategory);
    }
    const hasOwnState = this.hasOwnState();
    if (hasOwnState) {
      this.setState({ activeCategory: value });
    }
  };
}

export default withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer);

/**
 * Default renderer for a label.
 */
export const MaterialLabelRenderer = ({ uischema, visible }: OwnPropsOfRenderer) => {
  const labelElement: LabelElement = uischema as LabelElement;
  return (
    
      
        {labelElement.text !== undefined && labelElement.text !== null && labelElement.text}
      
    
  );
};

export default withJsonFormsLayoutProps(MaterialLabelRenderer);

<fieldset hidden="{visible">
      {
        !isEmpty(group.label) ?
          <legend>
            {group.label}
          </legend> : ''
      }
      {renderChildren(group, schema, childClassNames, path)}
    </fieldset>
  );
};

export default withVanillaControlProps(withJsonFormsLayoutProps(GroupLayoutRenderer));

this.handleStep(idx)}>
                  {e.label}
                
              
            ))
          }
        
        <div>
          
        </div>
      
    );
  }
}

export default withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer);

{renderChildren(horizontalLayout, schema, childClassNames, path)}
    
  );
};

export default withVanillaControlProps(withJsonFormsLayoutProps(HorizontalLayoutRenderer));

export const MaterialHorizontalLayoutRenderer = ({ uischema, renderers, schema, path, enabled, visible }: LayoutProps) => {
  const layout = uischema as HorizontalLayout;
  const childProps: MaterialLayoutRendererProps = {
    elements: layout.elements,
    schema,
    path,
    enabled,
    direction: 'row',
    visible
  };

  return ;
};

export default withJsonFormsLayoutProps(MaterialHorizontalLayoutRenderer);

private findCategory(categorization: Categorization): Category {
    const category = categorization.elements[0];

    if (this.state && this.state.selectedCategory) {
      return this.state.selectedCategory;
    }

    if (isCategorization(category)) {
      return this.findCategory(category);
    }

    return category;
  }
}

export default withVanillaControlProps(withJsonFormsLayoutProps(CategorizationRenderer));

return (
    
  );
};

export default withJsonFormsLayoutProps(MaterializedGroupLayoutRenderer);

export const materialGroupTester: RankedTester = withIncreasedRank(
  1,
  groupTester
);

export const MaterialVerticalLayoutRenderer = ({ uischema, schema, path, enabled, visible, renderers }: LayoutProps) => {
  const verticalLayout = uischema as VerticalLayout;
  const childProps: MaterialLayoutRendererProps = {
    elements: verticalLayout.elements,
    schema,
    path,
    enabled,
    direction: 'column',
    visible
  };

  return ;
};

export default withJsonFormsLayoutProps(MaterialVerticalLayoutRenderer);

({ uischema, visible, getStyleAsClassName }) => {
    const labelElement: LabelElement = uischema as LabelElement;
    const classNames = getStyleAsClassName('label-control');
    const isHidden = !visible;

    return (
      <label hidden="{isHidden}">
        {labelElement.text !== undefined &amp;&amp; labelElement.text !== null &amp;&amp; labelElement.text}
      </label>
    );
  };

export default withVanillaControlProps(withJsonFormsLayoutProps(LabelRenderer));