React Bootstrap Flexbox не работает должным образом

Question

Я создаю галерею флекскарт, которая снабжается API в моем приложении. js. Прежде чем строить его с помощью React, я собрал его с JS. Чтобы выровнять элементы (обложки книг), я использовал гибкую рамку bootstrap («row justify-content-center»). Работает отлично. Все обложки книг выровнены в ряды, количество обложек зависит от размера окна.

Теперь мне удалось собрать все в React, но обложки не выровнены. Я перепробовал все, но не могу заставить его работать. Это мой код:

import React from 'react';
import '../index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import Row from 'react-bootstrap/Row';

const Data = ({books}) => {
    return (
        <div>{books.map((book) => (
                <Row className="justify-content-center">
                    <div className="flip-card">
                        <div className="flip-card-inner">
                            <div className="flip-card-front">
                                <img
                                    src={book.cover}
                                    alt="Avatar"
                                    style={{
                                    width: 300,
                                    height: 500
                                }}/>
                            </div>
                            <div className="flip-card-back">
                                <h2>{book.title}</h2>
                                <p>{book.description}</p>
                                <button type="button" data-fancybox="gallery" href={book.detail}>More Info</button>
                            </div>
                        </div>
                    </div>
                </Row>
            ))}</div>
    )
};