创建一个新组件并将其添加到ReactJS的网页中

Question

在reactjs中，我已经创建了一个组件并将其添加到Main.js文件中，但是现在，我需要向其中添加一个组件，并且由于JSX的限制，每个JSX仅包含一个根元素，因此我无法添加还有一个组成部分。我不知道我在哪里出错。

 `~~~~index.js file`
 import React from "react";
 import ReactDOM from "react-dom";
 import Main from "./Main";

 ReactDOM.render(
 <Main/>, 
 document.getElementById("root")
 );


  -------------------------------------------------------
  Main.js file
  import React, { Component } from "react";
   import Header from './Header';
    // import Body from './Body';
   import './index.css';
  class Main extends Component {
   render() {
    return (
    <div className="Main">
    <Header image={require('./demo.jpg')}/>
    {/* <Body/> */}
    </div>

     );
      }
    }

    export default Main;

  -------------------------------------------------------
    Header.js file
    import React from 'react'
   import './Header.css';
      // import Body from './Body';
    export default (props) => {
    const style= {
    backgroundImage : "url(" + props.image + ")"
     }
     return (
     <div className="body" style={style}>
    <button className="btn" > Drawer </button>
    <h1 className="heading1">  Questions </h1>
    <button className="heading2"> Eye Button </button>
    <h2 className="heading3"> Hi.. Sandeep Gautam </h2>
    <h3 className="heading4"> Mind answering a few questions </h3>
      </div>
    )
   }`