title: Objects are not valid as a React child with React.memo
body: <p>I am receiving the following errors</p>
  <pre><code>Warning: memo: The first argument must be a component. Instead received: object
  
  Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead.
  </code></pre>
  <p>They happen when I change this component</p>
  <pre><code>const Tab = () =&gt; onLastTab 
      ? &lt;AccountTab data={data.account} /&gt;
      : &lt;InfoTab data={data.info} /&gt;
  </code></pre>
  <p>To be this component, the only difference is the use of React.memo</p>
  <pre><code>const Tab = () =&gt; onLastTab 
      ? React.memo(&lt;TabOne data={data.one} /&gt;)
      : React.memo(&lt;TabTwo data={data.two} /&gt;)
  </code></pre>
  <p>Those components wrapped in React.memo are definately just functional components that look like</p>
  <pre><code>const TabOne = ({data}) =&gt; (
      &lt;div&gt;
          &lt;div className='d-flex '&gt;
           ...
          &lt;/div&gt;
       &lt;/div&gt;
   )
  </code></pre>
  <hr />
  <p>Why would this be happening? What can I do to stop it?</p>