I am trying to make a Component where it's children are sent to the bottom of the code, so it can appear on the top of every other element, look an example:

<OverlayWrapper>
    <ConfirmationModal/>
</OverlayWrapper>

In this example, everything inside the ConfirmationModal is show in top of every other element

My problem is: if I do this, (I'll show the OverlayWrapper's code later), states that I pass to ConfirmationModal won't update. States inside of it, are updated normally.

const [ showModal, setShowModal ] = useState<boolean>(false)

return<>
    <OverlayWrapper>
        <ConfirmationModal
            show={showModal}
            setShow={showModal}
        />
    </OverlayWrapper>

    <Button
        title="Show Modal"
        onPress={()=>setShow(!show)}
    />
</>

Just to clarify, without the OverlayWrapper, it does work But with the OverlayWrapper, when I click the button, the Modal doesn't appear

This is the code for the OverlayWrapper and a OverlayContext

interface OverlayProps {
    setChildrens: Dispatch<SetStateAction<ReactNode>>
}

const OverlayContext = createContext<OverlayProps|null>(null)

export function OverlayProvider({ children }: { children: ReactNode }) {
    const [ subChildren, setSubChildren ] = useState<ReactNode>(null)
    
    return <OverlayContext.Provider value={{
        setChildrens: setSubChildren
    }}>
        {children}
        {subChildren}
    </OverlayContext.Provider>
}

export function OverlayWrapper({ children }: { children: ReactNode }) {
    const { setChildrens } = useContext(OverlayContext) as OverlayProps

    useEffect(() => {
        setChildrens(children)

        return () => {
            setChildrens([])
        }
    }, [])

    return <></>
}

The OverlayWrapper sets the subChildren context to be it's own children.

If my question isn't clear, please tell me, I'm going to correct