Reactstrap мешает React Hooks

Question

Итак, я пытаюсь создать простое приложение для секундомера, используя реакционные хуки. Я импортировал реакционную ленту, чтобы помочь с css. Мне потребовалось больше времени, чтобы понять это, но всякий раз, когда я увеличивал состояние внутри тега jumbotron, компонент не отображал изменение. Наконец я попытался вызвать состояние за пределами тега jumbotron, и это сработало немедленно. Так что как-то реагирует или просто bootstrap вообще мешает с крючками. Кто-нибудь еще видел, чтобы это случилось?

import React, {useState, useEffect} from "react";
import './stopwatch.css';
import { Jumbotron } from "reactstrap";

function Stopwatch() {

    /*utilizing useState to set the state with React Hooks*/
    const [mSecs, setMSecs] = useState(0);
    const [secs, setSecs] = useState(0);
    const [mins, setMins] = useState(0);

    /*function to start the timer*/
    function startTimer() {
        console.log("Start Timer Button clicked!");
        //setInterval(() => (setMSecs(mSecs + 1), console.log(mSecs)), 1000);
        setMSecs(mSecs + 1);
        console.log(mSecs);
    }

    /*function to stop the timer*/
    const stopTimer = () => {
        console.log('Stop Button clicked!');
        clearInterval();
    }

    /*function to reset the timer*/
    function resetTimer(e){
        console.log('Reset Button clicked!');
        setMSecs(mSecs + 1);
        console.log(mSecs);
    }

    return(
        <header className='container'>
            <div className='row justify-content-md-center'>
                <div className='col-md-6 col-xs-12'>
                    <Jumbotron>
                        <div className='fontgradient'>Fullmetal Alchemist Stopwatch</div>
                    </Jumbotron>
                    <div className='jumbotron'>
                        {/*This is the original state call. For some reason, it will not render the state change here.*/}
                        <p className='fontgradient'>
                            {mSecs}
                        </p>
                    </div>
                    {/*Here's where I am calling the state outside the jumbotron tag. It works here.*/}
                    <p>{mSecs}</p>
                    {/*when the Start button is clicked, it will run the startTimer function*/}
                    <button className='btn btn-primary' onClick={startTimer}>Start</button>
                    {/*when the Stop button is clicked, it will run the stopTimer function*/}
                    <button className='btn btn-danger' onClick={stopTimer}>Stop</button>
                    {/*when the Reset button is clicked, it will run the resetTimer function*/}
                    <button className='btn btn-warning' onClick={resetTimer}>Reset</button>
                </div>
            </div>
        </header>
    )
}


export default Stopwatch;