Laravel reverb configureEcho multiple declaration in next.js projects

Can you help me to implement a configureEcho for next.js projects? I have an implementation in my component but using configureEcho and useEcho in the same component which is cause to multiple instance for configureEcho for different component. I can't create configureEcho function in layout.tsx because when using in component there is an error echo not configure.

This sample is working fine but i think if i should always call configureEcho in every component is kinda weird.

'use client';

import { useAuth } from '@/hooks/auth';
import {
	useDatabaseNotification,
	useUnreadDatabaseNotification,
} from '@/hooks/database-notification/use-database-notification-query';
import ProfileMenu from '@/layouts/profile-menu';
import SettingsButton from '@/layouts/settings-button';
import axios from '@/lib/axios';
import RingBellSolidIcon from '@core/components/icons/ring-bell-solid';
import { configureEcho, useEchoNotification } from '@laravel/echo-react';
import { Channel, ChannelAuthorizationCallback } from 'pusher-js';
import { ActionIcon, Badge } from 'rizzui';
import NotificationDropdown from './notification-dropdown';

export default function HeaderMenuRight() {
	configureEcho({
		broadcaster: 'reverb',
		key: process.env.NEXT_PUBLIC_REVERB_APP_KEY,
		wsHost: process.env.NEXT_PUBLIC_REVERB_HOST,
		wsPort: Number(process.env.NEXT_PUBLIC_REVERB_PORT) || 9000,
		wssPort: Number(process.env.NEXT_PUBLIC_REVERB_PORT) || 9000,
		forceTLS: (process.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
		enabledTransports:
			(process.env.VITE_REVERB_SCHEME ?? 'https') === 'https'
				? ['wss']
				: ['ws'],
		disableStats: true,
		authorizer: (channel: Channel) => {
			return {
				authorize: (
					socketId: string,
					callback: ChannelAuthorizationCallback
				) => {
					axios
						.post('/api/broadcasting/auth', {
							socket_id: socketId,
							channel_name: channel.name,
						})
						.then((response) => {
							callback(null, response.data);
						})
						.catch((error: Error) => {
							console.error('Auth error:', error);
							callback(error, null);
						});
				},
			};
		},
	});

	const { user, isLoading: isLoadingUser } = useAuth();

	const { data: unreadData, refetch: refetchUnreadData } =
		useUnreadDatabaseNotification(!isLoadingUser, Number(user?.id));

	const {
		data: notificationsData,
		refetch: refetchData,
		isLoading,
	} = useDatabaseNotification(!isLoadingUser, Number(user?.id));

	useEchoNotification('App.Models.User.' + user?.id, (notification: any) => {
		console.log('New notification received:', notification);
		refetchData();
		refetchUnreadData();
	});

	return (
		....
	);
}