When there is inner child component - cannot scroll down

[Bariyard]

const contentData = [
  {section: '1'},
  {section: '2'},
  {section: '3'},
]

<SectionsContainer>
 {contentData.map((data, index ) => (
    <Section key='about-us'>
      <AboutUsComponent/>
    </Section>
))}
  <Section key='contact-us'>
    <ContactUsComponent/>
  </Section>
</SectionsContainer>

let options = {
      activeClass:          'active-fullpage', // the class that is appended to the sections links
      anchors:              ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
      arrowNavigation:      true, // use arrow keys
      className:            'SectionContainer', // the class name for the section container
      delay:                1000, // the scroll animation speed
      navigation:           true, // use dots navigatio
      scrollBar:            false, // use the browser default scrollbar
      sectionClassName:     'Section', // the section class name
      sectionPaddingTop:    '0', // the section top padding
      sectionPaddingBottom: '0', // the section bottom padding
      verticalAlign:        false // align the content of each section vertical
    };

When there is inner child component - cannot scroll down (Stuck in array of children)

Update! I had figure out what's going on now.

When we use map function to generate block of

The children data of react component were generate in Array of children.

react-fullpage stuck when it reach the last array index of children and cannot reach to the last Section

!!note I figured out work around to we deal with map function []

const contentData = [
  {section: '1'},
  {section: '2'},
  {section: '3'},
]

<SectionsContainer>
[ // <<This bracket expose your children ( and full-page can operate along your list of section )
 {contentData.map((data, index ) => (
    <Section key='about-us'>
      <AboutUsComponent/>
    </Section>
 ))}
]
 <Section key='contact-us'>
    <ContactUsComponent/>
  </Section>
</SectionsContainer>

please delete this thread if not useful

Thank you :D