Children.map with unwrapping/flattening Fragments in React

my-component.tsx

import React, { FC, Children, ReactNode } from 'react';
import { isFragment } from 'react-is';
import styled from 'styled-components';

const SomeContainer = styled.div`
  /* add some styling */
`;

const WrappedItem = styled.div`
  /* add some styling */
`;

export const MyComponent: FC = ({ children }) => {
  return (
    <SomeContainer>
      {Children.map(children, function recursive(child): ReactNode {
        if (isFragment(child)) {
          return Children.map(child.props.children, recursive);
        } else if (child) {
          return <WrappedItem>{child}</WrappedItem>;
        } else {
          return null;
        }
      })}
    </SomeContainer>
  );
};