Encountering issues when using ReactNodes in proxies

[cbst99]

I'm currently making the switch in my mid-scale project from React's useContext to a simple centrally managed store library. Currently, Valtio has my preference because updating deeply nested objects using the immutable pattern is too much work. Hence, I need to either use immer or something like Valtio.

My issue is that I seemingly can't get it to work. Consider the following:

export type Modal = {
    id: string;
    name: string;
    content: ReactNode;
};

type ProxyType = {
    list: Modal[];
    
    open: (name: string, content: ReactNode, id?: string) => string;
    close: (id: string) => void;
}
export const modalProxy = proxy<ProxyType>({
    list: [],

    open(name: string, content: ReactNode, id?: string) {
        if (!id)
            id = crypto.randomUUID();
        if (document.activeElement instanceof HTMLElement)
            document.activeElement.blur();

        modalProxy.list.push({
            id,
            name,
            content
        });

        return id;
    },
    close(id: string) {
        document.querySelector(".r-modal-container")?.classList.remove("r-modal-container--open");
        
        setTimeout(() => modalProxy.list = modalProxy.list.filter(modal => modal.id !== id), 350);
    }
});

This system is not perfect but it allows whoever consumes my library/framework to open modals by getting a snapshot of the proxy and calling "open". My issue arises when I try to display it like this:

export const ModalContainer = () => {
    const {list, close} = useSnapshot(modalProxy);
    
    return list.map((modal, index) => {
        return (
            <ModalWindow key={modal.id} id={modal.id} name={modal.name} index={index} close={close}>
                {modal.content}
            </ModalWindow>
        );
    });
}

I get this obscure error on {modal.content}:

Note that if I add a method in the proxy like "map" then it works but I have to subscribe to the list even though I don't use it, otherwise my modal container does not update. In my opinion, this is a code smell.

[dai-shi]

ReactNode can't be proxified. Please use ref() to opt out.