Reactjs – Reactsrtap runtime "Cannot read properties of null (reading 'useCallback')"

Whenever I add a button on my reactstrap app, it says it "Cannot read properties of null (reading ‘useCallback’)".

I just started a new project, and I decided to use reactstrap this time. For some reason, it won’t run a simple problem. I only have two file right now

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import ContextHeader from './ContextHeader.js';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ContextHeader />
  </React.StrictMode>
);


reportWebVitals();

and

import { Button } from 'reactstrap';
import React, { useCallback } from 'react';
import './ContextHeader.css';
import ContextBody from './contextBody/ContextBody';


function ContextHeader() {

const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);


  return (
    <div>
      <div className="ContextSelect">
        <header className="ContextHeader">
          <center>
            <div className="ContextHeaderText">
              Context Creator
            </div>
            
          </center>
        </header>
        <Button onClick={handleClick}>Click</Button>
      
        <ContextBody/>
      </div>
    </div>
  );
}

export default ContextHeader;

are the two files I’m running, and without the <Button onClick={handleClick}>Click</Button>, the project runs. Any ideas? This isn’t my first time using react, but my first time using reactstrap.