Handle different onPress functions TypeScript

I am developing a mobile app using React Native with Expo CLI and TypeScript.

I have a screen in my app that contains two cards and two buttons inside those cards.To develop the cards, I did a reusable component so that I don't repeat code.

The code for this reusable component is this:

export function AccountCards(props: any = {}) {  const { header, content, text, style, handler } = props;  return (<Card      mode="elevated"      elevation={5}      style={[styles.cardPoints, styles.cards, style]}><Card.Content><Title style={styles.cardTitle}>{header}</Title><Paragraph style={styles.cardText}>{content}</Paragraph></Card.Content><Card.Actions><Button          mode="contained"          style={styles.cardBtn}          onPress={handler}          labelStyle={{ color: colors.buttonTextColor }}>          {text}</Button></Card.Actions></Card>  );}

This component is used in a screen then. The code is:

export function AccountScreen() {  return (<View style={styles.container}><Text style={styles.text}>Olá, Utilizador</Text><AccountCards        header={strings.screens.accountScreen.cardPoints.title}        content={strings.screens.accountScreen.cardPoints.content}        text={strings.screens.accountScreen.cardPoints.pointsButton}        style={{          marginBottom: 30,        }}        handler={PointsScreen}      /><AccountCards        header={strings.screens.accountScreen.cardHistory.title}        content={strings.screens.accountScreen.cardHistory.content}        text={strings.screens.accountScreen.cardHistory.historyButton}      /><Button mode="contained" style={styles.editBtn}>        {strings.screens.accountScreen.editProfileButton}</Button></View>  );}

This code doesn't seems to work, I guess I didn't pass the onPress prop correctly.

I also tried to pass it as an arrow function but it doesn't work either.