How to use the @ui5/webcomponents-react/lib/withWebComponent.withWebComponent function in @ui5/webcomponents-react

import { Event } from '@ui5/webcomponents-react-base/lib/Event';
import UI5Token from '@ui5/webcomponents/dist/Token';
import React, { FC, ReactNode, ReactNodeArray } from 'react';
import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
import { WithWebComponentPropTypes } from '../../internal/withWebComponent';

export interface TokenPropTypes extends WithWebComponentPropTypes {
  selected?: boolean; // @generated
  readonly?: boolean; // @generated
  onDelete?: (event: Event) => void; // @generated
  onSelect?: (event: Event) => void; // @generated
  children?: ReactNode | ReactNodeArray; // @generated
}

const Token: FC = withWebComponent(UI5Token);

Token.displayName = 'Token';

export { Token };

import UI5GroupHeaderListItem from '@ui5/webcomponents/dist/GroupHeaderListItem';
import React, { FC } from 'react';
import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
import { WithWebComponentPropTypes } from '../../internal/withWebComponent';

export interface GroupHeaderListItemPropTypes extends WithWebComponentPropTypes {
  children?: string; // @generated
}

const GroupHeaderListItem: FC = withWebComponent(
  UI5GroupHeaderListItem
);

GroupHeaderListItem.displayName = 'GroupHeaderListItem';

export { GroupHeaderListItem };

import React, { FC } from 'react';
import { Event } from '@ui5/webcomponents-react-base/lib/Event';
import UI5Switch from '@ui5/webcomponents/dist/Switch';
import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
import { WithWebComponentPropTypes } from '../../internal/withWebComponent';

export interface SwitchPropTypes extends WithWebComponentPropTypes {
  checked?: boolean; // @generated
  disabled?: boolean; // @generated
  textOn?: string; // @generated
  textOff?: string; // @generated
  graphical?: boolean; // @generated
  onChange?: (event: Event) => void; // @generated
}

const Switch: FC = withWebComponent(UI5Switch);

Switch.displayName = 'Switch';

export { Switch };

import React, { FC } from 'react';
import UI5Option from '@ui5/webcomponents/dist/Option';
import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
import { WithWebComponentPropTypes } from '../../internal/withWebComponent';

export interface OptionPropTypes extends WithWebComponentPropTypes {
  selected?: boolean; // @generated
  icon?: string; // @generated
  value?: string; // @generated
}

const Option: FC = withWebComponent(UI5Option);

Option.displayName = 'Option';

Option.defaultProps = {
  icon: null // @generated
};

export { Option };

import { Event } from '@ui5/webcomponents-react-base/lib/Event';
import UI5Calendar from '@ui5/webcomponents/dist/Calendar';
import React, { FC } from 'react';
import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
import { WithWebComponentPropTypes } from '../../internal/withWebComponent';
import { CalendarType } from '@ui5/webcomponents-react/lib/CalendarType';

export interface CalendarPropTypes extends WithWebComponentPropTypes {
  timestamp?: number; // @generated
  primaryCalendarType?: CalendarType; // @generated
  selectedDates?: number[]; // @generated
  formatPattern?: string; // @generated
  onSelectedDatesChange?: (event: Event) => void; // @generated
}

const Calendar: FC = withWebComponent(UI5Calendar);

Calendar.displayName = 'Calendar';

export { Calendar };

showNotifications?: boolean; // @generated
  showProductSwitch?: boolean; // @generated
  showCoPilot?: boolean; // @generated
  onNotificationsClick?: (event: Event) => void; // @generated
  onProfileClick?: (event: Event) => void; // @generated
  onProductSwitchClick?: (event: Event) => void; // @generated
  onLogoClick?: (event: Event) => void; // @generated
  onCoPilotClick?: (event: Event) => void; // @generated
  onMenuItemClick?: (event: Event) => void; // @generated
  children?: ReactNode; // @generated
  menuItems?: ReactNode; // @generated
  searchField?: ReactNode; // @generated
  startButton?: ReactNode; // @generated
}

const ShellBar: FC = withWebComponent(UI5ShellBar);

ShellBar.displayName = 'ShellBar';

export { ShellBar };

import UI5Table from '@ui5/webcomponents/dist/Table';
import React, { FC, ReactNode } from 'react';
import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
import { WithWebComponentPropTypes } from '../../internal/withWebComponent';

export interface TablePropTypes extends WithWebComponentPropTypes {
  showNoData?: boolean; // @generated
  noDataText?: string; // @generated
  stickyColumnHeader?: boolean;
  children?: ReactNode | ReactNode[];
  columns?: ReactNode | ReactNode[];
}

const Table: FC = withWebComponent(UI5Table);

Table.displayName = 'Table';

export { Table };

import { Event } from '@ui5/webcomponents-react-base/lib/Event';
import UI5ShellBarItem from '@ui5/webcomponents-fiori/dist/ShellBarItem';
import React, { FC } from 'react';
import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
import { WithWebComponentPropTypes } from '../../internal/withWebComponent';

export interface ShellBarItemPropTypes extends WithWebComponentPropTypes {
  icon?: string; // @generated
  text?: string; // @generated
  onItemClick?: (event: Event) => void; // @generated
}

const ShellBarItem: FC = withWebComponent(UI5ShellBarItem);

ShellBarItem.displayName = 'ShellBarItem';

export { ShellBarItem };

import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
import UI5Button from '@ui5/webcomponents/dist/Button';
import React, { FC } from 'react';
import { WithWebComponentPropTypes } from '../../internal/withWebComponent';

export interface ButtonPropTypes extends WithWebComponentPropTypes {
  design?: ButtonDesign; // @generated
  disabled?: boolean; // @generated
  icon?: string; // @generated
  iconEnd?: boolean; // @generated
  submits?: boolean; // @generated
  onClick?: (event: Event) => void; // @generated
  children?: string; // @generated
}

const Button: FC = withWebComponent(UI5Button);

Button.displayName = 'Button';

Button.defaultProps = {
  design: ButtonDesign.Default // @generated
};

export { Button };

import UI5TabSeparator from '@ui5/webcomponents/dist/TabSeparator';
import React, { FC } from 'react';
import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
import { WithWebComponentPropTypes } from '../../internal/withWebComponent';

export interface TabSeparatorPropTypes extends WithWebComponentPropTypes {}

const TabSeparator: FC = withWebComponent(UI5TabSeparator);

TabSeparator.displayName = 'TabSeparator';

export { TabSeparator };