The below link is to a codesandbox for a project I am working on. The SideNav list items match the slides for navigation. The problem is that when I add an another different component (like other for example)to the return statement of slideshow.js, the list items are thrown off/incorrect/duplicated. I can't figure out why and am at the point of thinking its a react thing, or maybe a dependency I am using? console logging doesnt help me much so far.
ps: the list items are indexed by the "slide-title" class in AppContext.js.
https://codesandbox.io/s/test-r4ov3?file=/src/App.js
This Works Fine
<Fragment>
<Slide ref={slideRef} {...slideProperties} className="slide-container">
{SlideData.map((item, index) => (
<p key={index} className="slide-title">
{item.title}
</p>
))}
</Slide>
</Fragment>
This does not
<Fragment>
<Slide ref={slideRef} {...slideProperties} className="slide-container">
{SlideData.map((item, index) => (
<p key={index} className="slide-title">
{item.title}
</p>
))}
<div className="slide-title">Other</div><---ADDED
</Slide>
</Fragment>
BEFORE ADDING -LIST ITEMS MATCH
AFTER ADDING A COMPONENT- LIST ITEMS DUPLICATE?