Want to use firebaseui auth in a modal component that doesn't exist at startup; possible?

I’m trying to enable logging into my site with firebaseui. It requires a firebaseui_auth_container to render the login form to, but I don’t have that div at startup, since it’s in a modal popup. This is my code:

    constructor() {
    ...
    // Initialize the FirebaseUI Widget using Firebase.
        var ui = new firebaseui.auth.AuthUI(Firebase.auth());
        var uiConfig = {
          'signInSuccessUrl': 'url.com',
          'signInOptions': [
            // Leave the lines as is for the providers you want to offer your users.
            Firebase.auth.GoogleAuthProvider.PROVIDER_ID,
            Firebase.auth.FacebookAuthProvider.PROVIDER_ID,
            Firebase.auth.TwitterAuthProvider.PROVIDER_ID,
            Firebase.auth.GithubAuthProvider.PROVIDER_ID,
            //Firebase.auth.EmailAuthProvider.PROVIDER_ID
          ],
          'signInFlow': 'popup'
        };
        ui.start('#firebaseui-auth-container', uiConfig)
    }

    render() {
        <div className="my-logo"><button style={{backgroundColor: 'transparent', border: '0px', 
            font: "inherit", color: "#eee", cursor:"pointer"}}
                     onClick={this.openLogin.bind(this)}>Login</button><br/></div>
                     <Modal
                       aria-labelledby='modal-label'
                       style={modalStyle}
                       backdropStyle={backdropStyle}
                       show={this.state.showLoginModal}
                       onHide={this.closeLogin.bind(this)}
                     >
                       <div id="firebaseui-auth-container" style={dialogStyle()} />
                     </Modal>
    }

The div with the appropriate ID only exists after I click the ‘login’ button in my header. Right now when I click it I get an empty modal box. Is there a way to make firebaseui ‘wait’ for the div, or to have the div ‘exist’ at startup, so that firebaseui doesn’t complain? (Right now, obviously, it throws an error saying it can’t find the widget).

[BinovaGautam]

initialize ui in a different file and import it from there. 100% working…

[PAK90]

I ended up adding a ref property to the div where I wanted the logins. I then used componentDidUpdate (since the visibility of the div was based on states) and I checked for the ref property’s existence; if it wasn’t null, I could load the UI. Your answer got me started on the right path though, thanks 👍