Bootstrap работает некорректно в React

У меня есть проект React, который я создал с помощью create-react-app. В своем проекте хочу использовать Bootstrap. После создания проекта создается файл с именем public / index.html. Я поместил туда загрузочные CDN.

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

У меня есть компонент под названием ProductListComponent. Здесь в части рендеринга я использовал панель. Он создает панель, но ведет себя не в соответствии со стандартом Bootstrap.

import React,{ Component } from 'react';

class ProductListComponent extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div className = "row">
                <div className = "col-lg-10 col-md-10">
                    <div className = "panel panel-primary">
                        <div className = "panel-header">
                            <h3>Products</h3>
                        </div>
                        <div className = "panel-body">

                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ProductListComponent;

Выход Так может ли кто-нибудь сказать мне, что я делаю не так?