How to use the react-is.isFragment function in react-is

function prepareElement(element, context) {
  if (element === null || typeof element !== 'object') {
    return Promise.resolve([null, context]);
  }
  const {type, props} = element;
  if (isContextConsumer(element)) {
    return Promise.resolve([props.children(type._currentValue), context]);
  }
  if (isContextProvider(element)) {
    type._context._currentValue = props.value;
    return Promise.resolve([props.children, context]);
  }
  if (typeof type === 'string' || isFragment(element)) {
    return Promise.resolve([props.children, context]);
  }
  if (!isReactCompositeComponent(type)) {
    return Promise.resolve([type(props, context), context]);
  }
  const CompositeComponent = type;
  const instance = new CompositeComponent(props, context);
  instance.props = props;
  instance.context = context;
  return prepareComponentInstance(instance).then(prepareConfig => {
    // Stop traversing if the component is defer or boundary
    if (prepareConfig.defer || prepareConfig.boundary) {
      return Promise.resolve([null, context]);
    }
    return renderCompositeElementInstance(instance);
  });

{React.Children.map(children, child => {
        if (!React.isValidElement(child)) {
          return null;
        }

        if (process.env.NODE_ENV !== 'production') {
          if (isFragment(child)) {
            console.error(
              [
                "Material-UI: the ToggleButtonGroup component doesn't accept a Fragment as a child.",
                'Consider providing an array instead.',
              ].join('\n'),
            );
          }
        }

        const { selected: buttonSelected, value: buttonValue } = child.props;
        const selected =
          buttonSelected === undefined ? isValueSelected(buttonValue, value) : buttonSelected;

        return React.cloneElement(child, {
          className: clsx(
            classes.grouped,

React.Children.map(children, (child, index) => {
    if (!React.isValidElement(child)) {
      return;
    }

    if (process.env.NODE_ENV !== 'production') {
      if (isFragment(child)) {
        console.error(
          [
            "Material-UI: the Menu component doesn't accept a Fragment as a child.",
            'Consider providing an array instead.',
          ].join('\n'),
        );
      }
    }

    if (!child.props.disabled) {
      if (variant === 'selectedMenu' && child.props.selected) {
        activeItemIndex = index;
      } else if (activeItemIndex === -1) {
        activeItemIndex = index;
      }
    }

{React.Children.map(children, child => {
        if (!React.isValidElement(child)) {
          return null;
        }

        if (process.env.NODE_ENV !== 'production') {
          if (isFragment(child)) {
            console.error(
              [
                "Material-UI: the Step component doesn't accept a Fragment as a child.",
                'Consider providing an array instead.',
              ].join('\n'),
            );
          }
        }

        return React.cloneElement(child, {
          active,
          alternativeLabel,
          completed,
          disabled,
          last,
          icon: index + 1,

export const hidden = (item) => (
  ReactIs.isFragment(item)
    ? React.cloneElement(item, {
      ...item.props,
      children: {
        ...item.props.children,
        props: {
          ...item.props.children.props,
          style: item.props.children.props.style
            ? [item.props.children.props.style, hiddenStyle]
            : hiddenStyle
        }
      }
    })
    : React.cloneElement(item, {
      ...item.props,
      style: item.props.style ? [item.props.style, hiddenStyle] : hiddenStyle
    })

export const processChildren = <
  ComponentProps extends ComponentChildrenProps
>(
  props: ComponentProps,
): React.ReactNode => {
  if (
    props.children === undefined ||
    props.children === null ||
    typeof props.children !== 'function'
  ) {
    return props.children;
  }

  let children: React.ReactNode = props.children(props);

  if (ReactIs.isFragment(children) && children.props) {
    children = children.props.children;
  }

  return children;
};

const getSlices = (child, index) => {
  let slices = [];
  if (isFragment(child)) {
    React.Children.forEach(child.props.children, (slice, i) => {
      slices = [...slices, ...getSlices(slice, index + i)];
    });
  } else if (isElement(child)) {
    return [child];
  }
  return slices;
};