I am trying to create a popup for my react typescript application, so I'm using the react bootstrap modal component. However the modal/popup is being displayed below the button which triggers the popup, instead of displaying the link in a popup. Does anyone know why this is happening?

export default function LinkWrapper(props: {link: string}) {
    const [show, setShow] = React.useState(false)
    const handleClose = () => setShow(false)
    const handleShow = () => setShow(true)
    
    const url = new URL(props.link)
    return (
        <>
            <Button type="button" large onClick={handleShow}>
                Launch Link
            </Button>

            <Modal show={show} onHide={handleClose}>
                <Modal.Title>Link Popup</Modal.Title>
                <Modal.Body><iframe src={props.link} style={{width:'100%',height:'400px'}}/></Modal.Body>
                <Modal.Footer>
                    <Button type="button" large onClick={handleClose}>
                        close
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
};