I am trying to use nested navigation with a stacked navigator. One of the screens (Club Locations) containing tabbed navigation with two tabs, from one of those tabs I'd like to push to another screen from the stack navigator.

inside App.js

<NavigationContainer theme={navTheme}> 
        <Root.Navigator>
            <Root.Screen
            name="Locations"
            component={Locations}/>
            <Root.Screen 
            name="Club Locations" 
            component={clubLoc}
            options={({ route }) => ({
                title: route.params.name,
                })}/>
            <Root.Screen
            name="Club info"
            component={clubInfo}
            options={({ route }) => ({
                title: route.params.name
            })}/>
        </Root.Navigator>
    </NavigationContainer>

Locations then pushes to Club locations which looks like this:

function clubLoc(props, {navigation}) {

  const ClubData = props.route.params.data;

  return (
      <Tabs.Navigator>
        <Tabs.Screen name="Overview" component={Tab1} initialParams={{data:ClubData}} navigation={navigation}/>
        <Tabs.Screen name="Forecast" component={Tab2} initialParams={{data:ClubData}} navigation={navigation}/>
      </Tabs.Navigator>
  );
}

and then from Tab1 id like to push to Club info but I keep getting navigation.push is not a function and so on, even if I put {} in the props I just get object is not a function.

Tab1.js

export default function ViewMap(props, {navigation}) { ...

const activePress = (item) => {
    let clubName = item 

    navigation.push("Club info", {
      data: clubName
    });
};

Any help is appreciated as it's the last part of my assignment