How to access redux action while using connect() and NavigationContainer - react-native

Question

I'm working on a React Native project using Redux and NavigationContainer. I was using useSelector(), useDispatch() and everything was working fine.
To move forward, we have to use connect(mapStateToProps, mapDispatchToProps)(Component); instead of useSelector() and useDispatch().
From what I understand while reading articles and docs, I can access both state values and actions from props in the same component that I passed into connect().
In my case, the only parameter I can find is ({navigation, route}), I can access the state like this: route.params. I tried to access the actions with navigation and route, which unfortunately didn't work.
connect.js
import {
login,
loggout,
} from './redux/actions';
export const mapStateToProps = state => ({
auth: state.auth,
});
const ActionCreators = Object.assign(
{},
login,
loggout,
);
export const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(ActionCreators, dispatch),
});
App.js
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import Main from './Main';
import configureStore from './store';
const App = () => {
const {store, persistor} = configureStore();
return (
<Provider store={store}>
<PersistGate persistor={persistor}>
<Main />
</PersistGate>
</Provider>
);
};
export default App;
Main.js
import {connect} from 'react-redux';
import {mapStateToProps, mapDispatchToProps} from './connect';
import {NavigationContainer} from '#react-navigation/native';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import Login from './screens/Login';
export const Main = () => {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Login"
screenOptions={{
headerTransparent: true,
headerTintColor: colors.yellow,
}}>
<Stack.Screen
name="Login"
component={Login}
options={{headerShown: false}}
initialParams={props}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default connect(mapStateToProps, mapDispatchToProps)(Main);
Login.js
import {login} from '../redux/actions';
import {
View,
Text,
} from 'react-native';
const Login = ({navigation, route}) => {
console.log('from Login');
console.log(route.params); // state access
// Here, how can I access the redux actions?
console.log('-----------------');
return (
<View style={styles.container}>
{route.params.auth.status === 'logged in' ? (
<Text>Go To Profile</Text>
) : (
<Text>Stay Here</Text>
)}
</View>
);
};
The issue is, I can't access redux actions using props. How can I access them? Does NavigationContainer works with connect()? If I'm not using NavigatorContainer I can access an action like: props.actionName(), but with navigation is another situation.