React duplicating list items when adding multiple components?

Question

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?

Answer 1

This was a bug addressed in react-slideshow-image with version 3.4.7 as reported on the GitHub repo. There is also a workaround where you can use {[...mappeditems, SomeOtherComponent/>]} but it shouldn't be necessary now.