we've got a rather annoying problem with react. We're trying to shuffle an array except for one element on page load.

    const withoutSort = variants.filter((variant, index) => {
      if (variant.sorting >= 10) {
        return false;
      }
      return variant;
    });

    const sorted = shuffleArray(
      variants.filter((variant, index) => {
        if (variant.sorting >= 10) {
          return variant;
        }
        return false;
      })
    );

    sortedVariants = sorted.concat(withoutSort);

              {sortedVariants.map((variant, i) => (
                <Tile
                  {...variant}
                  key={variant.title + i}
                  className={tileClasses + ' ' + tileStyle[currentSidebarState]}
                  letter={variant.tileTitle}
                  colorCode={variant.colorCode}
                  textHighlightColor={variant.textHighlightColor}
                />
              ))}

Everything works fine, except for the images in the tile, they seem to land randomly on any tile not the correct one. And this only happens in production after the build.