diff --git a/apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx b/apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx
index 104fd5427070..31a4d07a294f 100644
--- a/apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx
+++ b/apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx
@@ -3,7 +3,6 @@ import { useSetModal, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useEffect } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 
-import { useCallCloseRoom } from '../../../contexts/CallContext';
 import Tags from '../../Omnichannel/Tags';
 
 type WrapUpCallPayload = {
@@ -11,9 +10,12 @@ type WrapUpCallPayload = {
 	tags?: string[];
 };
 
-export const WrapUpCallModal = (): ReactElement => {
+type WrapUpCallModalProps = {
+	closeRoom: (data?: { comment?: string; tags?: string[] }) => void;
+};
+
+export const WrapUpCallModal = ({ closeRoom }: WrapUpCallModalProps): ReactElement => {
 	const setModal = useSetModal();
-	const closeRoom = useCallCloseRoom();
 
 	const closeModal = (): void => setModal(null);
 	const t = useTranslation();
diff --git a/apps/meteor/client/providers/CallProvider/CallProvider.tsx b/apps/meteor/client/providers/CallProvider/CallProvider.tsx
index fc6c9120b807..ba1e359e4acd 100644
--- a/apps/meteor/client/providers/CallProvider/CallProvider.tsx
+++ b/apps/meteor/client/providers/CallProvider/CallProvider.tsx
@@ -12,7 +12,7 @@ import {
 	isVoipEventCallAbandoned,
 } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useRoute, useUser, useSetting, useEndpoint, useStream } from '@rocket.chat/ui-contexts';
+import { useRoute, useUser, useSetting, useEndpoint, useStream, useSetModal } from '@rocket.chat/ui-contexts';
 import { Random } from 'meteor/random';
 import React, { useMemo, FC, useRef, useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -21,8 +21,7 @@ import { OutgoingByeRequest } from 'sip.js/lib/core';
 import { CustomSounds } from '../../../app/custom-sounds/client';
 import { getUserPreference } from '../../../app/utils/client';
 import { WrapUpCallModal } from '../../components/voip/modal/WrapUpCallModal';
-import { CallContext, CallContextValue } from '../../contexts/CallContext';
-import { imperativeModal } from '../../lib/imperativeModal';
+import { CallContext, CallContextValue, useCallCloseRoom } from '../../contexts/CallContext';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
 import { QueueAggregator } from '../../lib/voip/QueueAggregator';
 import { useVoipClient } from './hooks/useVoipClient';
@@ -45,6 +44,7 @@ export const CallProvider: FC = ({ children }) => {
 	const voipEnabled = useSetting('VoIP_Enabled');
 	const subscribeToNotifyUser = useStream('notify-user');
 	const dispatchEvent = useEndpoint('POST', '/v1/voip/events');
+	const setModal = useSetModal();
 
 	const result = useVoipClient();
 	const user = useUser();
@@ -56,8 +56,8 @@ export const CallProvider: FC = ({ children }) => {
 	const [queueName, setQueueName] = useState('');
 
 	const openWrapUpModal = useCallback((): void => {
-		imperativeModal.open({ component: WrapUpCallModal });
-	}, []);
+		setModal(() => <WrapUpCallModal closeRoom={useCallCloseRoom} />);
+	}, [setModal]);
 
 	const [queueAggregator, setQueueAggregator] = useState<QueueAggregator>();
 
diff --git a/apps/meteor/client/providers/MeteorProvider.tsx b/apps/meteor/client/providers/MeteorProvider.tsx
index 8504a59b8b15..ef0e5885cf7c 100644
--- a/apps/meteor/client/providers/MeteorProvider.tsx
+++ b/apps/meteor/client/providers/MeteorProvider.tsx
@@ -32,13 +32,13 @@ const MeteorProvider: FC = ({ children }) => (
 											<CustomSoundProvider>
 												<UserProvider>
 													<AuthorizationProvider>
-														<CallProvider>
-															<OmnichannelProvider>
-																<ModalProvider>
+														<ModalProvider>
+															<CallProvider>
+																<OmnichannelProvider>
 																	<AttachmentProvider>{children}</AttachmentProvider>
-																</ModalProvider>
-															</OmnichannelProvider>
-														</CallProvider>
+																</OmnichannelProvider>
+															</CallProvider>
+														</ModalProvider>
 													</AuthorizationProvider>
 												</UserProvider>
 											</CustomSoundProvider>