how can i navigate outside from navigator?

[gihanrangana]

this is my main function

return useMemo(() => {

            return (
                <appContext.Provider key={key} value={app}>

                    {!loaded &&

                        <p>LOADING....</p>

                    }

                    {loaded &&

                        <>

                            <Navigator />

                            {navStatus &&

                                <>
                                    <Ribbon />

                                    <Sidebar />
                                </>

                            }

                        </>

                    }

                </appContext.Provider>
            )


        }, [key, user, navStatus, loaded]);

this is my custom navigator

const SkyNavigator: React.FC<any> = (props: any) => {

    const { children, screenOptions, initialRouteName } = props;

    const app = useApp();

    const [nav, setNav] = app.store('nav');

    const [navStatus, setNavStatus] = app.store('navStatus');

    const [navKey, setNavKey] = useState(1);

    const { state, navigation, descriptors } = useNavigationBuilder(StackRouter, {
        children,
        screenOptions,
        initialRouteName
    })

    const activeKey = state.routes[state.index].key;

    const route = app.getRouteByName(state.routes[state.index].name)

    const currentRoute = { ...route, ...descriptors[activeKey], state: state.routes[state.index] };

    navigation.currentRoute = { ...currentRoute, navigation: {} };

    useEffect(() => {

        if (!nav || !nav.currentRoute) {

            nav.currentRoute = currentRoute

            setNav(navigation);
            setNavKey((prev) => prev + 1);

            if (!navStatus) setNavStatus(true);

        }

    }, [new Date().toJSON])

    return useMemo(() => (
        <div className='main'>

            <NavigationHelpersContext.Provider value={navigation}>

                {state.routes.map((route, i) => (

                    <div
                        key={route.key}
                        className={'screen'}
                        style={{
                            display: i === state.index ? 'flex' : 'none'
                        }}
                    >
                        {descriptors[route.key].render()}
                    </div>

                ))}

            </NavigationHelpersContext.Provider>

        </div>
    ),[navStatus,nav])
}

export const createSkyNavigator = createNavigatorFactory(SkyNavigator);

const Navigator: React.FC<NavigatorProps> = (props) => {

    const app: any = useApp();

    const linking: any = app.getRouteLinking();

    const routes: any = app.getRoutes();

    const Sky = createSkyNavigator();

    return React.useMemo(() => (

        <NavigationContainer
            linking={linking}
        >
            <Sky.Navigator
                initialRouteName={useRouter.initialRouteName}
                screenOptions={{
                    headerRight: () => null,
                    headerLeft: () => null,
                    header: () => null,
                    headerShown: false
                }}
            >

                {routes.map((route: any, index: number) => {

                    return (

                        <Sky.Screen
                            key={index}
                            name={route.navigationOptions.name}
                            component={route.screen}
                            initialParams={route.initialParams}
                            options={route.options}
                        />

                    )

                })}

            </Sky.Navigator>

        </NavigationContainer>

    ), [linking]);
};

interface NavigatorProps {
    [key: string]: any;
}

export default Navigator;

my link are in the SideBar, i want to navigate from sidebar. how can i do it
this is on web