How to use the react-desc.PropTypes.element function in react-desc

),
    selected: PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.arrayOf(PropTypes.number),
    ]).description(
      `Index of the currently selected option. When multiple, the set of
      options selected. NOTE: This is deprecated in favor of indicating
      the selected values via the 'value' property.`,
    ),
    size: PropTypes.oneOfType([
      PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
      PropTypes.string,
    ]).description('The size of the select.'),
    value: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.element, // deprecated, use valueLabel
      PropTypes.object,
      PropTypes.arrayOf(
        PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
      ),
    ]).description(`Currently selected value. This can be an array
      when multiple. Passing an element allows the caller to control how
      the value is rendered. Passing an element is deprecated. Instead,
      use the 'valueLabel' property.`),
    valueLabel: PropTypes.node.description(
      `Provides custom rendering of the value. If not provided, Select
      will render the value automatically.`,
    ),
    valueKey: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.func,
    ]).description(

PropTypes.bool,
      PropTypes.shape({
        mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
        pipe: PropTypes.func,
      }),
    ]).description('An array or a function that defines how the user input is going to be masked.'),
    guide: PropTypes.bool.description('When masked, a boolean that tells the component whether to be in guide or no guide mode.'),
    pipe: PropTypes.func.description('When masked, a function that will give you the opportunity to modify the conformed value before it is displayed on the screen.'),
    placeholderChar: PropTypes.string.description('When masked, represents the fillable spot in the mask.'),
    keepCharPositions: PropTypes.bool.description(
      `For masked. When true, adding or deleting characters will not affect the positions of existing characters.
      When false, adding characters causes existing characters to advance. And deleting characters causes existing characters to move back.`
    ),
    showMask: PropTypes.bool.description('When masked, displays the mask as a placeholder in place of the regular placeholder.'),
    dropContent: PropTypes.element.description('Content to put inside the Drop.'),
    dropIcon: PropTypes.element.description('Icon for drop content.'),
    widgets: PropTypes.arrayOf(PropTypes.shape({
      icon: PropTypes.element.isRequired,
    })).description('Additional widgets to be placed next to the input.'),
    onClose: PropTypes.func.description('Callback for when the drop is closed'),
  };

  return DocumentedElement;
};

export var doc = function doc(Text) {
  var DocumentedText = describe(Text).availableAt(getAvailableAtBadge('Text')).description('Arbitrary text.').usage("import { Text } from 'grommet';\n

onChange: PropTypes.func.description(
      'Function that will be called when the user removes a tag.'
    ),
    onClick: PropTypes.func.description(
      'Function that will be called when the user clicks on a tag.'
    ),
    direction: PropTypes.oneOf(['row', 'column']).description(
      'The orientation to layout the child tags in.'
    ).defaultValue('column'),
    placeholder: PropTypes.string.description(
      'Placeholder text to use when no value is provided.'
    ),
    value: PropTypes.oneOfType([
      PropTypes.string, PropTypes.element, PropTypes.object,
      PropTypes.arrayOf(PropTypes.oneOfType([
        PropTypes.string, PropTypes.element, PropTypes.object,
      ])),
    ]).description('List of tag items to display.'),
  };

  return DocumentedElement;
};

export default (function (Anchor) {
  var DocumentedAnchor = describe(Anchor).availableAt(getAvailableAtBadge('Anchor')).description('A text link. We have a separate component from the browser\nbase so we can style it. You can either set the icon and/or label properties\nor just use children.').usage("import { Anchor } from 'grommet';\n");

  DocumentedAnchor.propTypes = {
    a11yTitle: PropTypes.string.description('Custom title to be used by screen readers.'),
    href: PropTypes.string.description('Hyperlink reference to place in the anchor.'),
    icon: PropTypes.element.description('Icon element to place in the anchor.'),
    label: PropTypes.node.description('Label text to place in the anchor.'),
    onClick: PropTypes.func.description('Click handler. It can be used, for example, \n    to add analytics and track who clicked in the anchor.'),
    primary: PropTypes.bool.description('Whether this is a primary anchor.'),
    reverse: PropTypes.bool.description('Whether an icon and label should be reversed so that the icon is at the end of the anchor.')
  };

  return DocumentedAnchor;
});

right: PropTypes.oneOf(['left', 'right']),
      left: PropTypes.oneOf(['left', 'right'])
    }).description('How to align the drop.').defaultValue({
      top: 'top',
      left: 'left'
    }),
    dropTarget: PropTypes.object.description('Target where the options drop will be aligned to. This should be\n      a React reference. Typically, this is not required as the drop will be\n      aligned to the Select itself by default.'),
    focusIndicator: PropTypes.bool.description('Whether when \'plain\' it should receive a focus outline.'),
    messages: PropTypes.shape({
      multiple: PropTypes.string
    }).description('Custom messages.'),
    multiple: PropTypes.bool.description('Whether to allow multiple options to be selected.'),
    onChange: PropTypes.func.description('Function that will be called when the user selects an option.'),
    onClose: PropTypes.func.description('Function that will be called when the Select drop closes.'),
    onSearch: PropTypes.func.description('Function that will be called when the user types in the search input.\n      If this property is not provided, no search field will be rendered.'),
    options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.object])).description('Options can be either a string or an object. If an object is used, use\n      children callback in order to render anything based on the current item.').isRequired,
    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description('Placeholder text to use when no value is provided.'),
    plain: PropTypes.bool.description('Whether this is a plain Select input with no border or padding.'),
    searchPlaceholder: PropTypes.string.description('Placeholder text to use in the search box when the search input is empty.'),
    selected: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description('Index of the currently selected option. When multiple, the set of\n      options selected. This property is required when multiple.'),
    size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']).description('The size of the select.'),
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.object, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))]).description('Currently selected value. This can be an array\n      when multiple. Passing an element allows the caller to control how\n      the value is rendered.')
  };

  return DocumentedSelect;
});

.availableAt(getAvailableAtGitHub({ url: 'https://github.com/atanasster/grommet-nextjs' }))
    .description(
      `A passord field with show/hide password toggle.
      All properties of DropInput apply
      `
    ).usage(`
      $ npm install grommet-controls \n 
      import { PasswordInput } from 'grommet-controls'; \n
      
    `);

  DocumentedElement.propTypes = {
    a11yViewPassword: PropTypes.string.description('Custom view password title to be used by screen readers.'),
    a11yHidePassword: PropTypes.string.description('Custom view password title to be used by screen readers.'),
    viewIcon: PropTypes.element.description('Icon to view the password.'),
    hideIcon: PropTypes.element.description('Icon to hide the password.'),
  };

  return DocumentedElement;
};

footer: { background: 'light-1' },
      pagination: { pad: { top: 'medium' } },
      expander: { CloseIcon: , OpenIcon:  },
    }}
...
  
\`\`\`       
    `),
    columns: PropTypes.arrayOf(PropTypes.shape({
      Cell: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]).description('Used to render a standard cell, defaults to the accessed value.'),
      Header: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]).description('Used to render the header of a column or column group.'),
      Footer: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Aggregated: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Pivot: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,

schema(Anchor, {
  description: `A text link. We have a separate component from the browser
  base so we can style it. You can either set the icon and/or label properties
  or just use children.`,
  usage: `import Anchor from 'grommet/components/Anchor';
  `,
  props: {
    a11yTitle: [PropTypes.string, 'Accessibility title.'],
    align: [PropTypes.oneOf(['start', 'center', 'end']), 'Text alignment.'],
    animateIcon: [PropTypes.bool, 'Whether to animate the icon on hover.', {
      defaultProp: true
    }],
    disabled: [PropTypes.bool, 'Whether to disable the anchor.'],
    href: [PropTypes.string, 'Hyperlink reference to place in the anchor. If'
      + ' `path` prop is provided, `href` prop will be ignored.'],
    icon: [PropTypes.element, 'Icon element to place in the anchor.'],
    id: [PropTypes.string, 'Anchor identifier.'],
    label: [PropTypes.node, 'Label text to place in the anchor.'],
    method: [PropTypes.oneOf(['push', 'replace']),
      'Valid only when used with path. Indicates whether the browser history' +
      ' should be appended to or replaced.', {
        defaultProp: 'push'
      }
    ],
    onClick: [PropTypes.func, 'Click handler.'],
    path: [
      PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
      'React-router path to navigate to when clicked.' +
      ' Use path={{ path: '/', index: true }} if you want the Anchor to be' +
      ' active only when the index route is current.'
    ],
    primary: [PropTypes.bool, 'Whether this is a primary anchor.'],

status: PropTypes.oneOf(['ok', 'info', 'warning', 'error', 'unknown', 'disabled']).description('Status color.'),
    size: PropTypes.oneOf(['small', 'medium', 'large'])
      .description('The font size of the notification message.'),

    state: PropTypes.string.description('State label.'),
    strong: PropTypes.bool.description('Heading bold state.'),
    message: PropTypes.string.description(
      'Message to be displayed.',
    ).isRequired,
    icon: PropTypes.oneOfType([
      PropTypes.bool,
      PropTypes.element,
    ]).description('Notification icon.'),
    closer: PropTypes.oneOfType([
      PropTypes.bool,
      PropTypes.element,
    ]).description('Closer icon.'),
    onClose: PropTypes.func.description(
      'Function that will be called when the user closes the notification.'
    ),
    percentComplete: PropTypes.number.description('Percent complete Meter for task notifications.'),
    timestamp: PropTypes.object.description('timestamp for the notification (Date).'),
    locale: PropTypes.string.description('The locale to use for timestamp, if provided.'),
    reverse: PropTypes.bool.description('If true, reverse the order of the Notification elements.'),
  };
  return DocumentedElement;
};