How to use the @ui5/webcomponents-react-base/lib/Device.Device.system function in @ui5/webcomponents-react-base

(props: ActionSheetPropTypes, ref: RefObject) => {
    const { children, placement, openBy, style, slot } = props;

    const classes = useStyles();

    const actionSheetClasses = StyleClassHelper.of(classes.actionSheet);
    if (Device.system.tablet) {
      actionSheetClasses.put(classes.tablet);
    } else if (Device.system.phone) {
      actionSheetClasses.put(classes.phone);
    }

    const popoverRef: RefObject = useConsolidatedRef(ref);

    const renderActionSheetButton = (element) => {
      if (element && element.props) {
        return (
          <div>
            {cloneElement(element, {
              design: ButtonDesign.Transparent,
              onClick: onActionButtonClicked(element.props.onClick)
            })}
          </div>

(props: ActionSheetPropTypes, ref: RefObject) => {
    const { children, placement, openBy, style, slot } = props;

    const classes = useStyles();

    const actionSheetClasses = StyleClassHelper.of(classes.actionSheet);
    if (Device.system.tablet) {
      actionSheetClasses.put(classes.tablet);
    } else if (Device.system.phone) {
      actionSheetClasses.put(classes.phone);
    }

    const popoverRef: RefObject = useConsolidatedRef(ref);

    const renderActionSheetButton = (element) => {
      if (element && element.props) {
        return (
          <div>
            {cloneElement(element, {
              design: ButtonDesign.Transparent,
              onClick: onActionButtonClicked(element.props.onClick)
            })}
          </div>
        );
      }