React Bootstrap Modal will not render with <Modal> Tag

Question

I have a modal that I want to pop up in the center of the screen, and dims out the rest of the page. I followed the documentation from React-Bootstrap (https://react-bootstrap.github.io/components/modal/) to create my modal as follows...

const NamingInfo = ({show, setModalVisible}) => {
    console.log("Hit inside NameInfo")
    return(
        <Modal centered show={show} onHide={setModalVisible(false)}>
            <Modal.Dialog className="info-modal" >

                <Modal.Header closeButton>
                    <Modal.Title>DSP Settings</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <p>Here you will be able to change the Name of the DSP as well as the Shortcode, or the abbreviated name. These settings will affect your drivers and admins as well. You will also be able to change your timezone, which will effect the dates and times displayed throughout the Tom App and Website.</p>
                </Modal.Body>

            </Modal.Dialog>
        </Modal>
    )
}

export default NamingInfo        

The Parent Component is as Follows...

import React, { useState, useEffect } from "react";
import { Modal, Button } from "react-bootstrap";
import '../../styles/information-button.css'
import NamingInfo from "../informationModals/NameInfo";
import PrefTableInfo from "../informationModals/PrefTable";


const InfoButton = ({type}) => {

    const [modalVisible, setModalVisible] = useState(false)

    const renderModal = (type) => { 
        if (type == "name"){
            return <NamingInfo show={modalVisible} setModalVisible={setModalVisible}/>
        }
        if (type == "prefTable"){
            return <PrefTableInfo show={modalVisible} setModalVisible={setModalVisible}/>
        } 
    }

    if (modalVisible) { console.log("visible... least it should be") }
    return(
        <div>
            <div >
                <Button variant='outline-info' onClick={()=> setModalVisible(!modalVisible)}>info</Button>
            </div>
            <div className="info-button-info-modal">
                {renderModal(type)}
            </div>
        </div>
    )
} 

export default InfoButton

I have console.logs to assure that show and setModalVisible are working properly, however when I run the code like this, nothing renders when it is supposed to. If I comment-out the lines with just <Modal > tags, the modal will render but it will not be centered, it will not dim out the background, and it only will close if I hit the button that opened it in the first place which is not what I want. Does anyone have any idea at all why gthe <Modal > line doesn't work? (Note it doesn't work even when I leave it as just <Modal> instead of <Modal centered show={show} onHide={setModalVisible(false))}>