const ImageGalleryDialogTemplate = ({ container }) => {

    return (

        <Dialog.Root>
            <Dialog.Trigger asChild>
                <button className="text-violet11 inline-flex float-end shadow-blackA4 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-green-500 px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
                    Open Image Gallery
                </button>
            </Dialog.Trigger>
            <Dialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0" />
            <Dialog.Portal container={container}>



const ImageGalleryDialog = ({ shadowRootButton, shadowRootModal }) => {
    const [container, setContainer] = useState(null);

    return (
        <>
            <RadixRenderer shadowRootContainer={shadowRootButton}>
                <ImageGalleryDialogTemplate container={container} />
            </RadixRenderer>
            <RadixRenderer shadowRootContainer={shadowRootModal} >
                <div id="tao_modal_box" ref={setContainer} >
                </div>
            </RadixRenderer>

        </>
    );
};
                    

hi guys why isn't the Dialog.portal render anything inside div id="tao_modal_box"?