React You likely forgot to export your component from the file it’s defined in app.js when rendering functional component

I am trying to render the StockPopup function component in App.js, but I am getting this error:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a 

class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at StockPopup.js:10.
    at StockPopup

At StockPopup line 10 is this line:

<Alert.Heading>Warnings</Alert.Heading>

And I’m not sure if this is an error with this line or with importing/exporting. I got the code for the component from the React docs.

App.js

   import './App.css';
    import StockPopup from "./StockPopup";


function App() {
  return (
    <div className="App">
        <StockPopup />
    </div>
  );
}

export default App;

StockPopup.js

import {Alert, Button} from "reactstrap";
import {useState} from "react";

function StockPopup() {
    const [show, setShow] = useState(true);

    if (show) {
        return (
            <Alert variant="danger" onClose={() => setShow(false)} dismissible>
                <Alert.Heading>Warnings</Alert.Heading>
                <p>
                    Low level warnings.
                </p>
            </Alert>
        );
    }
    return <Button onClick={() => setShow(true)}>Dismiss Alert</Button>;
}
export default StockPopup;

Thanks for your help