Issue with index for loading initial slide when using map function

// When I use index={2} here, the slider shows as Active-dot the third slide, but renders content from the first slide.

  renderContent() {
      return (
       <Swiper loop={false} index={2}>
          {this.renderAlbums()}
        </Swiper>
      );
    }

Image:

If I use the same index={2}, without MAP, but with hard-code - It renders as Active-dot the third one, and renders the content from the third slide. Which is correct. When using this:

   renderContent() {
     <Swiper loop={false} index={2}>
        <View><Text>Page 1</Text></View>
        <View><Text>Page 2</Text></View>
        <View><Text>Page 3</Text></View>
      </Swiper>
      );
    }

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Swiper from 'react-native-swiper';

class AlbumList extends Component {
  state = { albums: ['Page 1', 'Page 2', 'Page 3', 'Page 4'] };

  renderAlbums() {
    return this.state.albums.map(album =>
      <View><Text>{album}</Text></View>
    );
  }

// When I use index={2} here, the slider shows as Active-dot the third slide, but renders content from the first slide.
  renderContent() {
      return (
       <Swiper loop={false} index={2}>
          {this.renderAlbums()}
        </Swiper>
      );
    }

/* If I use the same index={2}, without MAP, but with hard-code - It renders as Active-dot the third one, and renders the content from the third slide. Which is correct. When using this:
   renderContent() {
     <Swiper loop={false} index={2}>
        <View><Text>Page 1</Text></View>
        <View><Text>Page 2</Text></View>
        <View><Text>Page 3</Text></View>
      </Swiper>
      );
    }
    
  
*/
  render() {
    return (
        <View>
          {this.renderContent()}
        </View>
    );
  }
}

export default AlbumList;

Start by reproducing the difference between the mapped children from renderAlbums() and the hard-coded Swiper children in renderContent(). Inspect how Swiper handles the initial index when its children come from map; done means index={2} renders the third mapped slide and keeps the active dot aligned with it.