title: Create react component to conditionally wrapping children
body: <p>I would like to create a <code>ConditionalWrapper</code> component to being more declarative, in my app.</p>
  <p>My idea is to use it as following</p>
  <pre><code>&lt;ConditionalWrapper condition={whatever} element={&lt;a href=&quot;my-link&quot; /&gt;}&gt;
   ...other children
  &lt;/ConditionalWrapper&gt;
  </code></pre>
  <p>I got this so far, but obviously it is not working, and I really cannot see where I am wrong.</p>
  <pre><code>interface ConditionalWrapperProps {
    condition: boolean
    children?: React.ReactNode
    element: React.ReactElement
    defaultElement?: React.ReactElement
  }
  
  const ConditionalWrapper = ({
    condition,
    children,
    element,
    defaultElement
  }: ConditionalWrapperProps): JSX.Element =&gt; {
    const Element = (Wrapper): JSX.Element =&gt; &lt;Wrapper&gt;{children}&lt;/Wrapper&gt;
    return condition ? (
      &lt;Element Wrapper={element}&gt;{children}&lt;/Element&gt;
    ) : (
      &lt;Element Wrapper={defaultElement || Fragment}&gt;{children}&lt;/Element&gt;
    )
  }
  </code></pre>
  <p>The error I get at the moment is <code>Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object</code>.</p>
  <p>It's clear that my types and logic are wrong, but I also tried different variations without success. Any suggestions?</p>