Navigation with Typescript and createMaterialBottomTabNavigator

I'm trying to use the navigation in another component.

I have this in my app.tsx, as an exmaple of how the tabbed navigation looks.

export default class App extends Component<Props> {render() {return (<NavigationContainer><Tab.Navigator      initialRouteName="Home"      shifting={true}      sceneAnimationEnabled={false}      barStyle={{backgroundColor: '#005e16'}}><Tab.Screen        name="Map"        component={Home}        options={{          tabBarIcon: 'map',        }}      /><Tab.Screen        name="Fish"        component={Demo}        options={{          tabBarIcon: 'Demo',        }}      /><Tab.Screen        name="Routes"        component={Demo2}        options={{          tabBarIcon: 'Demo2',        }}      /><Tab.Screen        name="Help"        component={Help}        options={{          tabBarIcon: 'help-circle',        }}      /></Tab.Navigator></NavigationContainer>);}}

I can't seem to figure out how to use the navigation prop, in another component to change tabs programatically.

I've already tried to use the useNavigation hook, and it says I'm breaking the rules of a hook. What is the proper way to get the navigator in typescript?