i am new to react can anyone help, I am trying to use accordion to display a registration page i built, the page has four different fields, one for uploading of pictures, the second for address, the third for general information and the fourth for pricing, now here is the challenge.... I want to use accordion to define each field so that the field doesnt just appear as a long form, but you would need to click the field for it to display.... I have gotten pretty much everything right, i got stuck in how to place my components inside the accordion body....Note, I am using a bootstrap template.... Here is the code.

<Accordion defaultActiveKey="0">
  <Accordion.Item eventKey="0">
    <Accordion.Header> Photo </Accordion.Header>
    <Accordion.Body>
      <PhotoUploader />
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item eventKey="1">
    <Accordion.Header>General information</Accordion.Header>
    <Accordion.Body>
      <GeneralInfo />
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item eventKey="2">
    <Accordion.Header>Address</Accordion.Header>
    <Accordion.Body>
      <AddLocation />
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item eventKey="3">
    <Accordion.Header> Pricing </Accordion.Header>
    <Accordion.Body>
      <AddPrice />
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

Where <PhotoUploader/> , <GeneralInfo/> , <AddLocation/> , <AddPrice/> are my field components. I know how i placed them in is wrong, please whats the correct method.