React conditional wrapper that add an enclosing element based on a boolean condition

ConditionalWrapper.tsx

import * as React from 'react';

interface Props {
    condition: boolean;
    wrapper: Function;
    children: React.ReactNode;
}

export const ConditionalWrapper: React.FC<Props> = ({ condition, wrapper, children }) => {
    return condition ? wrapper(children) : children;
};
  
// Usage
// <ConditionalWrapper
//   condition={width < 600}
//   wrapper={(children: React.ReactNode) => (
//     <SomeWrapper>
//         {children}
//     </SomeWrapper>
//   )}
// >
//   <h1>Content that should be conditionally wrapper</h1>
// </ConditionalWrapper>