hello-theme/modules/admin-home/assets/js/hello-elementor-settings.js

import { createRoot } from 'react-dom/client';
import Container from '@elementor/ui/Container';
import Box from '@elementor/ui/Box';
import { ThemeProvider } from '@elementor/ui/styles';
import { SettingsPage } from './components/settings/settings-page';
import { SettingsProvider } from './components/settings/settings-provider';

const App = () => {
	return (
		<SettingsProvider>
			<ThemeProvider colorScheme="auto">
				<Box sx={ { pr: 1 } }>
					<Container
						disableGutters={ true }
						maxWidth="lg"
						sx={ { display: 'flex', flexDirection: 'row', justifyContent: 'center', pt: { xs: 2, md: 6 }, pb: 2 } }
					>
						<SettingsPage />
					</Container>
				</Box>
			</ThemeProvider>
		</SettingsProvider>
	);
};

document.addEventListener( 'DOMContentLoaded', () => {
	const container = document.getElementById( 'ehe-admin-settings' );

	if ( container ) {
		const root = createRoot( container );
		root.render( <App /> );
	}
} );