How do I nest multiple React contexts of the same type

Say I want to create a modal and handle the state through Reacts Context API

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();

Now, within this modal I want to have a button, that upon being clicked opens another model ontop of the current one.

How can I do this, without interfering with the wrapping context?