section.index in state from ReactFullpage's render parameter is not representing current section index

[shkyung]

Description

I want to call a specific component on the currently displayed slide.
so Im using state to determine which slide is currently being shown.
but the state.section.index coming in the afterSlideLoad event doesn't seem to represent the index of the current section

Link to isolated reproduction with no external CSS / JS

[Ideally in codesandbox.io, links to personal websites won't be reviewed unless isolated. Reported issues without a reproduction might get closed.]

Steps to reproduce it

1.here is part of the code

<ReactFullpage
            pluginWrapper={pluginWrapper}
            interlockedSlides={true}
            css3={false}
            navigation
            scrollOverflow={true}
            afterLoad={afterLoad}
            afterSlideLoad={afterSlideLoad}
            render={({state, fullpageApi}) => {
                console.error("------ FullPage Render!! : ", {state, fullpageApi})
                const {initialized, direction, lastEvent, section} = state
                const index = state?.destination?.index

                console.error("----state.destination.index ? ", index)
                console.error("section.index? ", section?.index)

                const isSectionLoaded = lastEvent === 'afterLoad'
                const isSlideLoaded = lastEvent === 'afterSlideLoad'
                const isLightMode = direction === 'left'
                const isShadowMode = direction === 'right'

                return (
                    <div id="fullpage-wrapper">
                        <div className="section active" id="section1">
                            <video id="myVideo" loop muted data-autoplay>
                                <source src="flowers.mp4" type="video/mp4"/>
                                <source src="flowers.webm" type="video/webm"/>
                            </video>
                            <div className="layer">
                                <h1>blah----</h1>
                            </div>
                        </div>
                        <div className="section" id="section2">
                            <div className="slide">
                                <h2>Feature1 - light</h2>
                                <h2 style={style}>menu1 - test gltf load and animation version4 </h2>
                                <button onClick={() => fullpageApi.moveSlideRight()}>go to Shadow side
                                </button>
                               
                                <div> {(index == 1 && isSectionLoaded) || (isSlideLoaded && isLightMode && section.index === 1)  ? <Character4 index={index}/> : null}</div>
                            </div>
                            <div className="slide dark">
                                <h2>Feature1 - dark</h2>
                                <button onClick={() => fullpageApi.moveSlideLeft()}>go to Light side
                                </button>
                                <div> {(index == 1 && isSectionLoaded) || (isSlideLoaded && isShadowMode && section.index === 1) ? () => { console.error("feature1 dark"); return null} : null}</div>
                            </div>
                        </div>

2. console log capture - when I switched slide on section2
   I thought section.index supposed to be index 1 which means section2
   

Versions

"@fullpage/react-fullpage": "^0.1.19", -> it uses fullpage v3.1
and I run on chrome browser

[alvarotrigo]

Can you please provide a codepen or codesanbox with the reproduction? Thanks.