title: How to pass a react component as a variable, to child component?
body: <p>When I have defined a component in a variable, and I am trying to pass it to a component as a children prop, <code>Objects are not valid as a React child</code> error is shown.</p>
  
  <p>What is a correct way to do this?</p>
  
  <pre><code>function AnotherComponent(){
    return "Another";
  }
  
  function ChildComponent(props) {
    const { children, value, index, ...other } = props;
  
    console.log(children);
    return (
      &lt;Typography
        component="div"
        role="tabpanel"
        hidden={value !== index}
        id={`full-width-tabpanel-${index}`}
        aria-labelledby={`full-width-tab-${index}`}
        {...other}
      &gt;
        &lt;Box p={3}&gt;{children}&lt;/Box&gt;
      &lt;/Typography&gt;
    );
  }
  
  function MainComponent(){
    const tabItems = [
      { "component": AnotherComponent}
    ];
  
    const [value, setValue] = React.useState(0);
  
    return (
      &lt;&gt;
        {tabItems.map((tabItem,index) =&gt; (
          &lt;ChildComponent value={value} index={tabItem.index}&gt;
            {tabItem.component}
          &lt;/ChildComponent&gt;
        ))}
      &lt;/&gt;
    )
  }
  </code></pre>