Alert not working with React Hooks & Bootstrap

I'm building a project where people can nominate movies that are their favorites. I am also attempting to have an alert show up when a submit button is clicked to submit all nominations.

return (

        <React.Fragment>

            <div id="nomination-div">

                Your Nominations

                {generateNominationCards()}

                <Button
                    variant="primary" onClick={() => submitNominations()}>
                    Submit Nominations
                </Button>

            </div>

        </React.Fragment>
    );
    ```

Here is the code I have for my ```submitNominations()``` button.

function submitNominations(){

    return(
        <Alert variant="success">
        <Alert.Heading>Hey, nice to see you</Alert.Heading>
        <p>
            Aww yeah, you successfully read this important alert message. This example
            text is going to run a bit longer so that you can see how spacing within an
            alert works with this kind of content.
        </p>
        <hr />
        <p className="mb-0">
            Whenever you need to, be sure to use margin utilities to keep things nice
            and tidy.
        </p>
        </Alert>
    )
}

I'm using this link as my guide: https://react-bootstrap.github.io/components/alerts/

I have <Alerts> defined in a separate file with the rest of my react-bootstrap components like so 

    const Jumbotron = ReactBootstrap.Jumbotron;
    const Badge = ReactBootstrap.Badge;
    const Alert = ReactBootstrap.Alert;
    const Carousel = ReactBootstrap.Carousel;


Nothing is currently showing up or happening for me at all.

Whether or not something like an alert shows in React will generally be state-driven, so in this case you might have a showAlert boolean state value and set that to true when you want to show the alert. Then, just conditionally render the Alert content in your returned JSX. See below for an example of how this might work.

function MyComponent() {
    const [showAlert, setShowAlert] = useState(false);

    const submitNominations = () => {
        setShowAlert(true);
    }

    return (
        <React.Fragment>
            {showAlert && (
                <Alert variant="success">
                    <Alert.Heading>Hey, nice to see you</Alert.Heading>
                    <p>
                        Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
                    </p>
                    <hr />
                    <p className="mb-0">
                        Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
                    </p>
                </Alert>
            )}
            <div id="nomination-div">
                Your Nominations
                {generateNominationCards()}
                <Button
                    variant="primary" onClick={() => submitNominations()}>
                    Submit Nominations
                </Button>
            </div>
        </React.Fragment>
    );
}