Reactstrap is interfering with React Hooks - react-hooks

Question

So I am trying to create a simple stopwatch app using react hooks. I imported reactstrap in to help with the css. It took me the longest time to figure this out, but whenever I incremented the state inside my jumbotron tag, the component was not rendering the change. Finally I tried calling the state outside of the jumbotron tag, and it worked immediately. So somehow reactstrap or just bootstrap in general is interfering with hooks. Has anyone else seen this happen?
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;