one-line React component for conditionally wrapping children

conditionalwrap.js

import React from 'react';

const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;

const Header = ({shouldLinkToHome}) => (
  <div>
    <ConditionalWrap
      condition={shouldLinkToHome}
      wrap={children => <a href="/">{children}</a>}
    >
      <img src="logo.png"/>
    </ConditionalWrap>
  </div>
)

I have an improvement suggestion for this:

import { FC, ReactNode, createElement } from 'react';

interface WrapProps {
	if?: boolean;
	with: typeof createElement.arguments[0];
	wrapperProps: typeof createElement.arguments[1];
	children: NonNullable<ReactNode>;
}

const Wrap: FC<WrapProps> = ({
	if: condition,
	with: wrapper,
	wrapperProps,
	children,
}) =>
	condition ? createElement(wrapper, wrapperProps, [children]) : <>children</>;

export default Wrap;

By using createElement we can use Wrap like so:

<Wrap if={condition} with="a" wrapperProps={{ 'data-testid': 'wrapper' }}>
    <p>Wrapped text</p>
</Wrap>

Instead of always passing a (children) => <jsx /> function.

FYI this function breaks the react/no-unstable-nested-components eslint rule.