props are undefined when using mapStateToProps

Question

In my app I use mapStateToPros like that:

const mapStateToProps = (state:any) => {

   return {
    cardsAndBalance: state.cardsAndBalanceReducer
   }
}

In debug when I stop at return I can see that I have some data in state.

When I stop the app inside my useEffect function and check the props, the value of props is undefined

useEffect(() => {

    console.log('useEffect')
    
    let cardNumbers: number[] = []
    const myCards = props.cardsAndBalance.cards;

    if(myCards)
        myCards.forEach((card: Card) => cardNumbers.push(card.number))

    generatePaymentCodeForTavim(cardNumbers = [])
        .then((res:any) => {
            setBarCode(res.barCode);
        })
        .catch( (err:any) => {
            console.log("error: " + err)
            ToastAndroid.show("Error Occurrd - check logs", ToastAndroid.SHORT);
        })
}, [])

This is how I connect the component to the store:

export default connect(mapStateToProps)(PayWithTavimStep1);

And this is the whole component:

    const PayWithTavimStep1 = ({navigation}:{navigation:any}, props: any) => {
    
        const [barCode, setBarCode] = useState('')
    
        useEffect(() => {
    
            console.log('useEffect')
             //.......
        }, [])
    
        return (
            
            <View style={styles.container}>
               // Some views
            </View>
        )
    }
export default connect(mapStateToProps)(PayWithTavimStep1

Why do the props are undefined when I stop the execution in useEffect?

Answer 1

The problem was that I was passing two parameters to my component as such: ({navigation}:{navigation:any}, props: any). When it should have been (props: any) and now in my props I still have access to the navigation.