Duplicated elements when using Motion component

[abohannon]

We're using Motion in an image slider and all slides are duplicated when changing slides. Here's a screenshot after interacting with the slider a few times. The slider starts with 5 slides wrapped in Motion components.

Here's the implementation:

{items.map(
          ({ image, content, style, defaultStyle, imageClass }, index) => (
            <Motion
              key={image}
              defaultStyle={getDefaultStyle(index)}
              style={style}
            >
              {style => {
                return (
                  <div
                    style={{
                      transform: `translateX(${style.x}vw)`,
                      height: slideHeight,
                      maxHeight: slideHeight,
                    }}
                    className={classNames(
                      'carouselSlide',
                      classes.carouselSlide,
                    )}
                  >
                    <img
                      alt={image}
                      src={image}
                      className={classNames(imageClass, classes.image)}
                    />
                  </div>
                )
              }}
            </Motion>
          ),
        )}

[nkbt]

console.log(items)

There is smth to do with how you change items. Motion does nothing to duplicate elements