Remove Dyte clock using DyteUIBuilder

App.tsx

import { useEffect, useState } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import { DyteUIBuilder, DyteMeeting } from '@dytesdk/react-ui-kit';

function App() {
	const [meeting, initMeeting] = useDyteClient({ resetOnLeave: true });
	const [uiConfig, setUiConfig] = useState<any>();
	const url = new URL(window.location.href);
	const queryToken = url.searchParams.get('authToken');

	if (!queryToken) {
		alert('Please add authToken to url query params');
	}

	useEffect(() => {
		const start = async () => {
			if (!queryToken) return;

			await initMeeting({
				authToken: queryToken,
				defaults: {
					video: false,
					audio: false,
				},
			}).then(() => {
				const builder = new DyteUIBuilder(uiConfig);
				const el = builder.find('div#header-right');
				el?.remove('dyte-clock');
				setUiConfig(builder.build());
			});
		};
		start();
	}, []);

	if (meeting) {
		return <DyteMeeting meeting={meeting} config={uiConfig} />;
	}

	return <div>Loading...</div>;
}

export default App;