MUI Modal (Dialog) access contents while closed

So I'm creating an app with Material-ui and firebase authentication and I wanted to include firebaseui's authentication in a MUI Dialog.

To add the authentication component, firebase ui needs to have access to an element with the "firebaseui-auth-container" id which in my case is in the contents of the Dialog component. However while closed, the contents of the dialog aren't rendered so firebase cannot attach the ui component of the auth.

Is there a way to attach the authentication UI inside the Dialog? Perhaps have the components of the dialog rendered but hidden?

current code:

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import 'firebaseui/dist/firebaseui.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createTheme, ThemeProvider } from '@mui/material';
import { StyledEngineProvider } from '@mui/material/styles';

import { auth as firebaseUIAuth } from 'firebaseui';
import { initializeApp } from 'firebase/app';
import { getAuth, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';
import { getAnalytics } from 'firebase/analytics';


const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

const auth = getAuth();
const ui = new firebaseUIAuth.AuthUI(auth);

var uiConfig = {
  ...
};

ui.start('#firebaseui-auth-container', uiConfig);

const theme = createTheme({ ... })

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </StyledEngineProvider>
  </React.StrictMode>
);

reportWebVitals();

/* App.js */

import React from 'react';
import Dialog from '@mui/material/Dialog';
import IconButton from '@mui/material/IconButton';
import PersonIcon from '@mui/icons-material/Person';


function App() {

  const [dialogOpen, toggleDialog] = React.useState(false);

  return (
    <div className="App" id="App">
      <div className='App-home'>
        <IconButton
          aria-label="profile"
          className='App-button_profile'
          onClick={() => toggleDialog(true)}
        >
          <PersonIcon className="big-icon" />
        </IconButton>
        <Dialog open={dialogOpen} onClose={() => toggleDialog(false)}>
          <div id="firebaseui-auth-container"></div>
        </Dialog>
      </div>
    </div>
  );
}

export default App;

Many thanks