a better atlernative for modals, the modal to show is provided to the function showModal.

src/contexts/ModalsManagerContext.tsx

@@ -8,6 +8,9 @@ export interface ImodalsManagerContext {
 	closeLoadingModal(): void;
 	showErrorModal(): void;
 	closeErrorModal(): void;
+
+	showModal(element: React.ReactElement): void;
+	closeModal(): void;
 }
 
 export const ModalsManagerContext = createContext<ImodalsManagerContext>({
@@ -15,6 +18,8 @@ export const ModalsManagerContext = createContext<ImodalsManagerContext>({
 	closeLoadingModal: () => {},
 	showErrorModal: () => {},
 	closeErrorModal: () => {},
+	showModal: () => {},
+	closeModal: () => {},
 });
 
 export const ModalsManagerProvider = ({ children }: { children: React.ReactNode }) => {
@@ -22,6 +27,8 @@ export const ModalsManagerProvider = ({ children }: { children: React.ReactNode
 	const [loadingModalVisible, setLoadingModalVisible] = useState(false);
 	const [errorModalVisible, setErrorModalVisible] = useState(false);
 
+	const [modalElement, setModalElement] = useState<React.ReactElement | null>(null);
+
 	const showLoadingModal = () => {
 		setShowBackdrop(true);
 		setLoadingModalVisible(true);
@@ -42,6 +49,16 @@ export const ModalsManagerProvider = ({ children }: { children: React.ReactNode
 		setErrorModalVisible(false);
 	};
 
+	const showModal = (element: React.ReactElement) => {
+		setModalElement(element);
+		setShowBackdrop(true);
+	};
+
+	const closeModal = () => {
+		setModalElement(null);
+		setShowBackdrop(false);
+	};
+
 	return (
 		<ModalsManagerContext.Provider
 			value={{
@@ -49,10 +66,13 @@ export const ModalsManagerProvider = ({ children }: { children: React.ReactNode
 				closeLoadingModal,
 				showErrorModal,
 				closeErrorModal,
+				showModal,
+				closeModal,
 			}}
 		>
 			{children}
 			{showBackdrop && <OverlayBackdrop />}
+			{modalElement && modalElement}
 
 			{loadingModalVisible && <LoadingModal />}
 			{errorModalVisible && <ErrorModal />}
@@ -60,7 +80,7 @@ export const ModalsManagerProvider = ({ children }: { children: React.ReactNode
 	);
 };
 
-export const useOverlayContext = () => {
+export const useModalsManagerContext = () => {
 	return useContext(ModalsManagerContext);
 };