Why is Ref.current null/undef when passing Ref in child components?

Question

JavaScript

I'm trying to pass the active screen to a child screen to stop a function in the child screen if active screen !== to the child screen using the following code:

const Drawer = createDrawerNavigator();

function App() {
    const routeNameRef = createRef();
    const navigationRef = useNavigationContainerRef();
    return (
        <Context.Provider value={getCurrentRouteName}>
        <NavigationContainer ref={navigationRef}
                             onReady={() => {
                                 routeNameRef.current = navigationRef.getCurrentRoute().name;
                             }}
                             onStateChange={async () => {
                                 const currentRouteName = navigationRef.getCurrentRoute().name;
                                 routeNameRef.current = currentRouteName;
                             }}>
            <Drawer.Navigator>
                <Drawer.Screen name="Home" component={Home}
                               initialParams={{routeNameRef}}}/>
                <Drawer.Screen name="Favorite" component={Favorite}/>
            </Drawer.Navigator>
            <Footer/>
        </NavigationContainer>
        </Context.Provider>
    );
}

I tried to pass ref through initialParams and using context, and if you refer to props.route or context, then current is not lost yet

But if you try to extract Current from it, then it becomes null / undef (depending on whether through CreateRef or useRef ref was created), I also tried to initialize ref in useEffect in the child component, as there was a suspicion that this was due to the fact that the screen rendering had not yet occurred, undef was returned accordingly, but this did not help. waiting for your options