i have an a global Modal:

export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
    
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    const [config, setConfig] = React.useState<ModalConfig | null>(null);

    const openModal = React.useCallback((config: ModalConfig) => {
        setIsModalOpen(true);
        setConfig(config);
    }, []);

    const closeModal = React.useCallback(() => {
        setIsModalOpen(false);
        setConfig(null);
    }, []);

    const value = React.useMemo(() => ({ isModalOpen, setIsModalOpen, openModal, closeModal }), [closeModal, isModalOpen, openModal]);

    return (
        <ModalContext.Provider value={value}>
            {isModalOpen && config?.content && ReactDOM.createPortal(
                <Modal size={config.size} title={config.title} closeHandler={() => setIsModalOpen(false)}>
                    {config.content}
                </Modal>, document.querySelector("#modal-root")!)}
            {children}
        </ModalContext.Provider>
    );
};

and i have i simple button whos opening confirmation modal:

<ContextMenuItem
  onClick={() => openModal(confirmationConfig)}
  className="flex items-center justify-between gap-2 dark:text-primary-white text-primary-dark-200 rounded-md dark:hover:bg-primary-dark-200 hover:bg-primary-gray dark:focus:bg-primary-dark-200 focus:bg-primary-gray"
>
  Delete <Trash2 className="w-4 h-4" />
</ContextMenuItem>

this is confirmationConfig:

const confirmationConfig: ModalConfig = {
    content: (
        <Confirmation
            onCancel={closeModal}
            onConfirm={handleMessageDelete}
            controlsDisabled={isLoading}
            onConfirmText='Delete'
            text='Are you sure you want to delete this message?'
        />
    ),
    title: 'Delete message',
    size: 'fit'
};

after onConfirm i call async delete message handler:

const handleMessageDelete = React.useCallback(async () => {
    try {
        setIsLoading(true);

        await api.message.delete({ body: { conversationId, messageId: _id }, token: accessToken! });

        setConversation((prev) => ({
            ...prev,
            messages: prev.messages.filter((message) => message._id !== _id),
        }));
        closeModal();
        toast.success("Message deleted", { position: "top-center" });
    } catch (error) {
        console.error(error);
        toast.error("Cannot delete message", { position: "top-center" });
    } finally {
        setIsLoading(false);
    }
}, [conversationId, _id, accessToken, setConversation, closeModal]);

And everything works fine except one thing. My Confirmation component inside Modal didn’t update. So component just mount once and ignore any changes. I thinks this happens cuz Confirmation component inside object, but dunno how to play around this. I want to disable my confirm controls on loading. What can i do?