Как бы я отображал картинки как колоду карт, позволяющую пользователям нажимать следующие / предыдущие картинки?

Question

На данный момент я могу отображать изображение, которое пользователь успешно загружает в браузер, вот так:

if (redirectToStackAfterPhotoSubmit) {
    return (
        <Stack
            imagesOnStack={this.state.url || 'http://via.placeholder.com/400x300'}
            alt="Uploaded Images"
            height="300"
            Width="400"
        />
    );
}

Но на этот раз я хочу, чтобы у пользователя была возможность перейти к следующему или предыдущему изображениюс нажатием кнопки.Я знаю, что моя попытка состоит в том, чтобы составить список, я сделал это только для того, чтобы понять, с чем я работаю.

Непосредственно ниже моя попытка.Я чувствую, что мой map() может быть немного не в себе.Что я делаю не так и как я могу это исправить?

Если вам нужна дополнительная информация / код, пожалуйста, дайте мне знать

Вот Upload.js (не опубликовал все, потому что это большой файл)

this.state = {
       url: '',
       picture: [],
       selectedPictureIndex: 0
    };

 render() {
    const redirectToStackAfterPhotoSubmit = this.state.redirectToStackAfterPhotoSubmit;

    const { picture } = this.state;

    const picList = picture.map(pic => {
        return(
            <li key={pic.id}>{this.state.url[pic]}</li>
        );
    });

    if (redirectToStackAfterPhotoSubmit) {
        return (
            <Stack
                imagesOnStack={picList || 'http://via.placeholder.com/400x300'}
                alt="Uploaded Images"
                height="300"
                Width="400"
            />
        );
    }
}