Digamos que quiero crear un modal y manejar el estado a través de la API de contexto de Reacts

 export const ModalUIProvider: FC = ({ children }) => { const [isOpen, setIsOpen] = useState(false); const openModal = useCallback(() => setIsOpen(true), [setIsOpen]); const closeModal = useCallback(() => setIsOpen(false), [setIsOpen]); const toggleModal = useCallback( () => setIsOpen(!isOpen), [isOpen, setIsOpen] ); const modalContext = useMemo(() => { return { isModalOpen: isOpen, openModal, closeModal, toggleModal, }; }, [isOpen, openModal, closeModal, toggleModal]); return ( <ModalContext.Provider value={modalContext}> {children} </ModalContext.Provider> ); }; export const useModal = () => { return useContext<IModalContext>(ModalContext); };

 <ModalUIProvider> <ParentModal /> </ModalUIProvider>

 const { isModalOpen, openModal, closeModal } = useModal();

Ahora, dentro de este modal, quiero tener un botón que, al hacer clic, abra otro modelo encima del actual.

¿Cómo puedo hacer esto, sin interferir con el contexto de envoltura?